Next.js Discord

Discord Forum

Setting up Next.Js

Unanswered
ArkB posted this in #help-forum
Open in Discord
Hello!

So I’m strictly following the docs on Next.js to create a Web app however, it says I’m missing required components but I have all of them. Would really appreciate the help. Thank you!
#next-auth

20 Replies

@ArkB Hello! So I’m strictly following the docs on Next.js to create a Web app however, it says I’m missing required components but I have all of them. Would really appreciate the help. Thank you! <#1068089513253019688>
Tonkinese
Did you start with the cli? 'npx create-next-app' should be all you need to generate everything you need to get started. Then 'npm run dev' should start the server. Can you put it on github so I can take a look?
Tonkinese
Oh.... you aren't missing something... you have too much of something.
Bruh
Tonkinese
index in the pages folder does exactly the same thing as the index file in the app folder. The app folder is Next's new way of handling things as of this most recent major release, where the pages folder was their way of handling things for the previous several years.
@Clown Bruh
oh lol sry
Tonkinese
You have to pick which way you want to build the app for the most part. There's cases where you might want to create part of the app in the pages folder, but that's mostly for really specific cases. In this case I'd recommend just getting rid of the pages folder entirely.
oh I see then where do I put my other files? like the about, _app, _document etc
Read the routing part
You'll know everything you need. Messages here cant describe in as much details as its there.
Pages and Layouts is the part you want. Just start with a fresh nextjs project and learn from those docs.
Tonkinese
The layout.ts file in the app directory does pretty much the combination of the _app and _document folder in the pages router. Everything that would go into those just stick in the layout.ts file. And then for each route, name the path relative to the app folder to the route that you want them to be accessible by. For example, to create a page at https://www.yourWebsite.com/users/profile create a file called /app/users/profile/page.tsx
The path must match how they navigate to it, and page.tsx or page.jsx is a special filename that next uses as the source for that page.
oh ok, that's really cool. that's way more efficient ty
European sprat
/ping @ArkB
oh lol yea np