Confused about NextJS, whether to use "app"-directory or "pages" and "index.tsx" or "page.tsx"

Question

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!

Answer 1

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.