# Next.js App Router The App Router is the latest routing paradigm in Next.js, built on React Server Components for optimal performance. ## File-Based Routing ``` app/ layout.tsx # Root layout page.tsx # Home page (/) about/ page.tsx # About page (/about) blog/ [slug]/ page.tsx # Dynamic blog pages (/blog/my-post) ``` ## Server Components By default, all components in the App Router are Server Components: ```tsx async function BlogList() { const posts = await db.post.findMany(); return (

{posts.map(post => (
• {post.title}
))}

); } ``` ## Layouts Layouts persist across navigations and preserve state: ```tsx export default function DashboardLayout({ children }) { return ( ); } ``` ## Server Actions ```tsx async function createPost(formData: FormData) { 'use server'; await db.post.create({ data: { title: formData.get('title') as string }, }); } ``` ## Streaming and Suspense ```tsx export default function Page() { return ( }> ); } ```