Building with Next.js 15

Exploring the latest features and improvements in Next.js 15, including the new turbopack compiler and enhanced app router capabilities.

What's New in Next.js 15?

Next.js 15 introduces several groundbreaking features:

  • Turbopack: Lightning-fast bundler (now stable!)
  • Enhanced React 19 support: Server actions and improved streaming
  • Partial Prerendering: Combine static and dynamic content seamlessly
  • Improved caching: Better control over data fetching
Performance Gains

Turbopack showed 76.7% faster cold starts compared to Webpack in our tests.

Setting Up a Project

Bash
1npx create-next-app@latest my-app
2cd my-app
3pnpm dev

App Router Deep Dive

The app router continues to evolve with better patterns:

TypeScript
1// app/posts/[id]/page.tsx
2export default async function PostPage({ 
3  params 
4}: { 
5  params: Promise<{ id: string }> 
6}) {
7  const { id } = await params;
8  const post = await getPost(id);
9  
10  return <article>{post.content}</article>;
11}

Server Actions

Server actions simplify form handling:

TypeScript
1async function createPost(formData: FormData) {
2  'use server';
3  
4  const title = formData.get('title');
5  await db.posts.create({ title });
6  revalidatePath('/posts');
7}

Server actions eliminated ~200 lines of API route boilerplate in our production app.

Key Learnings

  1. Migration Path: Incremental adoption from Pages to App router is smooth
  2. Type Safety: Better TypeScript integration with async params
  3. Performance: Real-world improvements align with benchmarks
  4. Developer Experience: Hot reload is noticeably faster

Trade-offs

Be cautious with client-side state management when mixing server and client components.

Placeholder content - replace with your actual Next.js 15 experiments.