Next.js Discord

Discord Forum

shadcn/ui NEXTjs installation

Answered
Jersey Wooly posted this in #help-forum
Open in Discord
Jersey WoolyOP
Hello there!
I'm trying to start a new project with shadcn ui, basically following instructions from this page
https://ui.shadcn.com/docs/installation/next

After I initiate it with npx shadcn-ui@latest init all pages show 404 error

Here's my ts config file
{ "compilerOptions": { "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, "forceConsistentCasingInFileNames": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "plugins": [ { "name": "next" } ], "paths": { "@/*": ["./src/*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] }

Did anybody have the same issue? Didn't manage to find a solution yet, unfortunately. Thnaks in advance!
Answered by DirtyCajunRice | AppDir
why do you have 2 app dirs haha
View full answer

7 Replies

@DirtyCajunRice | AppDir Whats your components.json look like…? and whats your file structure currently look like
Jersey WoolyOP
{ "$schema": "https://ui.shadcn.com/schema.json", "style": "default", "rsc": true, "tsx": true, "tailwind": { "config": "tailwind.config.js", "css": "app/globals.css", "baseColor": "slate", "cssVariables": true }, "aliases": { "components": "@/components", "utils": "@/lib/utils" } }
um
why do you have 2 app dirs haha
Answer
Jersey WoolyOP
I don't know. Didn't create anything manually, stricktly followed commands and to be honest didn't notice that I have two app folders 🤦‍♂️
Jersey WoolyOP
I've just deleted /app folder that's outside src dir and it fixed the issue. Thank you a lot for your help!
Do you have experience with these components? Are they worth playing with instead of plain radix ui components?