Next.js App Router: Complete Guide

The App Router is the new paradigm for building Next.js applications.

File-based Routing

app/
├── page.tsx          # /
├── blog/
│   ├── page.tsx      # /blog
│   └── [slug]/
│       └── page.tsx  # /blog/:slug

Server Components

By default, all components are Server Components:

tsxCopy
// This runs on the server
async function BlogPage() {
  const posts = await fetchPosts();
  return <PostList posts={posts} />;
}

More content coming soon...