The App Router
Next.js v13 introduced a new app router system built on the React Server Components. The source code now sits in the app folder. React components inside the app directory are, by default, treated as Server Components. This change agrees with the server-first approach React advocates, making data fetching on the server side the default.
Next.js app router is file-system based, meaning folders are used to construct URL paths. One caveat is that Next.js reserves certain file names for specific purposes, including layout, page, loading, not-found, error, global-error, route, template and default.
Next.js allows you to colocate your private files inside the app folder. E.g., you can put your CSS files or React components next to your page.js/jsx/tsx. By default, only contents returned by page.js/jsx/tsx or route.js/jsx/tsx are publicly addressable. Everything else is private by default.
Although the new routing system is server-centric, meaning the actual routing happens on the server side (while the previous versions of Next.js used client-side page routers where a route map had to be downloaded to the client), it still uses client-side navigation through the next/Link component, resembling a SPA.
Additionally, as users navigate the app, the router will store the React Server Component payload in an in-memory client-side cache. The cache is split by route segments, which allows invalidation at any level and ensures consistency across React’s concurrent renders. This means that the cache of a previously fetched segment can be re-used for certain pages, further improving performance.
Next.js also uses partial render to speed up your web apps. E.g., if you have multiple pages using the same parent layout, such as /dashboard/users and /dashboard/products, the shared layout in the /dashboard parent directory is only rendered once. Navigating from the user dashboard to the product dashboard will only trigger subpage-specific content being rendered and sent to the client - not the shared parts.