Next.js App Router: From Zero to Production

Next.js 15 with the App Router is the most-used full-stack React framework. This tutorial takes you from npx create-next-app to a deployed app in 45 minutes.

What is the App Router?

The App Router (introduced in Next.js 13, stable in 14) uses React Server Components as the default. Key differences from the old Pages Router:

• Server Components by default (less JS shipped to client)
• Nested layouts instead of _app.js
• Server Actions for form submissions (no API routes needed)
• Streaming built-in

Install

npx create-next-app@latest my-app
cd my-app
npm run dev

This gives you a starter at http://localhost:3000.

Project structure

app/
  layout.tsx        # Root layout (required)
  page.tsx          # Home page (/)
  api/              # API routes
  blog/             # Route group: /blog
    [slug]/         # Dynamic route
      page.tsx
components/         # Shared components
lib/                # Server utilities
public/             # Static assets

Your first server component

// app/page.tsx
import { getArticles } from '@/lib/data';

export default async function Home() {
  const articles = await getArticles();  // Direct DB call — no API!
  return (
    <div>
      {articles.map(a => <h2 key={a.id}>{a.title}</h2>)}
    </div>
  );
}

Server Action (no API route needed)

// app/blog/actions.ts
'use server';
export async function createPost(formData: FormData) {
  await db.posts.create({ title: formData.get('title') });
  revalidatePath('/blog');
}

Key takeaways

• Server Components reduce client JS
• Server Actions replace most API routes
• Nested layouts beat single _app.js