Next.js 15 + Turbopack: App Router & Performance Guide

What Changed in Next.js 15

I used Next.js 15 in PlateeRAG-1 and hr_blog2.0. Here's a practical account of working with App Router, Turbopack, and Server Components.

App Router Structure

graph TD
    A[app/] --> B[layout.tsx - 루트 레이아웃]
    A --> C[page.tsx - 홈]
    A --> D[about/page.tsx]
    A --> E[documents/]
    E --> F[page.tsx - 목록]
    E --> G["[slug]/page.tsx - 상세"]
    E --> H[new/page.tsx - 작성]

Server vs Client Components

// Server Component (default)
// Rendered on the server; can access the DB directly
async function PostList() {
  const posts = await fetch('http://backend:8000/api/v1/posts');
  return <div>{/* render */}</div>;
}

// Client Component
'use client';
// Rendered in the browser; supports interactivity
function LikeButton() {
  const [liked, setLiked] = useState(false);
  return <button onClick={() => setLiked(!liked)}>♥</button>;
}

Turbopack Configuration

// next.config.ts
const nextConfig = {
  experimental: {
    turbo: {
      rules: {
        '*.svg': {
          loaders: ['@svgr/webpack'],
          as: '*.js',
        },
      },
    },
  },
};

Performance Comparison

Practical Tips

1. Dynamic Import: Lazy-load heavy components
2. Image Optimization: Let next/image handle it automatically
3. ISR: Use Incremental Static Regeneration for static pages
4. Middleware: Handle authentication and redirects here

Next.js 15 is a meaningful improvement to the developer experience overall. Turbopack's HMR speed in particular is impressive.