nextjs-app-router-fundamentals

Next.js App Router uses a file-based routing convention where you define routes by creating folders and special files like page.tsx and layout.tsx inside the app directory. This structure automatically handles nested routing and persistent layouts across page navigations.

In the Next.js App Router, components are Server Components by default for performance. You must add the 'use client' directive to files that require client-side interactivity or state, separating data fetching from interactive UI elements.

You generate static pages in the Next.js App Router using the generateStaticParams function for dynamic routes. For metadata, you can export a static metadata object or dynamically generate metadata using the generateMetadata function.

TypeScript is not strictly required to use the Next.js App Router, but it is highly recommended. The App Router conventions integrate smoothly with TypeScript, providing strong typing for your layouts, routes, and generated metadata.