Getting Started with Next.js 15 and App Router

Next.js 15 brings significant improvements to the developer experience with the stable App Router and React Server Components. In this tutorial, we'll explore how to build modern web applications using these powerful features.

What's New in Next.js 15?

The App Router introduces a new paradigm for building Next.js applications:

Server Components by Default: Components are server-rendered by default, improving performance and reducing bundle size

Nested Layouts: Create persistent UI elements that maintain state across navigations

Loading UI: Built-in support for loading states and error boundaries

Parallel Routes: Render multiple pages in the same layout simultaneously

Getting Started

First, create a new Next.js application:

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

Understanding the App Directory

The new app directory structure is intuitive and powerful:

app/
├── layout.tsx      # Root layout
├── page.tsx        # Home page
├── about/
│   └── page.tsx    # About page
└── blog/
    ├── layout.tsx  # Blog layout
    └── page.tsx    # Blog listing

Server Components vs Client Components

By default, all components in the app directory are Server Components. To use client-side features like useState or useEffect, add the "use client" directive:

'use client'
import { useState } from 'react'
export function Counter() {
  const [count, setCount] = useState(0)
  return 
}

Creating Layouts

Layouts allow you to create persistent UI elements:

// app/blog/layout.tsx
export default function BlogLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    

      

        ← Back to Blog
      

      {children}
    

  )
}

Data Fetching with Server Components

Server Components can fetch data directly:

async function BlogPost({ slug }: { slug: string }) {
  const post = await fetchPost(slug)
  return (
    

      
{post.title}

      
{post.content}

    

  )
}

Conclusion

Next.js 15 with the App Router provides a powerful foundation for building modern web applications. The combination of Server Components, nested layouts, and improved routing makes it easier than ever to create fast, SEO-friendly applications.

Stay tuned for more tutorials on advanced Next.js features!