19

NextJS is confusing to me. All official examples and many (most, all?) tutorials that I've read including the official documentation are organizing the application with a pages-directory (and, if necessary, an api-directory for backend services). They claim that every file below the pages-directory will automatically reflect a corresponding route-name.

However, when creating a new NextJS app with npx create-next-app@latest, I get a total different setup. It contains an folder called app and not pages. Furthermore, the app-folder contain a file page.txs as a synonym what previously was index.tsx in the pages-folder.

In these tutorials and docs, there is the concept of overwriting the system-App-component with placing a file pages/_app.tsx. I can't find anything how to do this with the new directory-scheme.

Tutorials and Docs:

- package.json - next.config.js + pages - _app.tsx - _document.tsx - about.tsx - index.tsx + public - favicon.ico

New Scaffold:

+ app - favicon.ico - globals.css - layout.tsx - page.tsx - next.config.hs - package.json

What happened to NextJS? What is right? Is the scaffold wrong that npx create-next-app@latest will create or is there another version of documentation that I can't find?

In case of the new scaffold is the right version, how can I place new routes and sub-pages inside the app-directory? Is the concept of having an api-directory still valid?

I hope someone can shed some light here for me regarding latest evolvement of NextJS. Thank you!

Improve this question
1

3 Answers 3

Reset to default
12

In Nextjs 13 version many things have changed. It is the version with more changes, there was a huge Vercel conf explaining each of those changes, here. The first of all is that components are server side by default, so the layer dividing front and back end is thinner now. But there are also other changes in beta, as turbo pack to compile your app. Also you can name your files with layout or error to handle design, loading state and errors easier.

About the app directory, you can find the stable release video here. just put files there and they will become routes. You can also create folders and they will become part of the path to access a page. I believe you can also have dynamic routing using [], as explained here. The previous page directory still works, and you can use it along side with the new paradigm. The new documentation is very good and I recommend you to start with that https://nextjs.org/docs. Then, maybe check out this guy's videos that explains very well this topic.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

Yeah, I have just been setting up this environment and gotta say, for newcomers it`s crazy having pages.tsx as the index, and then having pages.ts stacked inside the app. I understand the reasoning but the naming is confusing for beginners like me.

Improve this answer

Comments

0

Although I'm new to Next.js, from the Next.js 13+ while scaffolding a new project, you'll have to decide between App Router vs Pages Router. With App Router you'll be given React.js server & client component - and this affects how you configure the routes for you App. While Pages Router leaves you with the old way of doing things in Next.js. For an in-depth explanation of this watch this video. Thanks.

https://www.youtube.com/watch?v=fNiLQi1RZrA

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.