Getting Started with Next.js 15 — App Router Guide

Introduction

Next.js 15 is the most powerful version of the framework yet. With the App Router, React Server Components, and built-in optimizations, you can ship production-ready apps faster than ever.

Prerequisites

Before getting started, make sure you have:

• Node.js 18.20 or higher
• A code editor (VS Code recommended)
• Basic knowledge of React

Creating Your First Project

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

Open http://localhost:3000 to see your app.

Understanding the App Router

The app/ directory uses a file-system based router. Each folder represents a route segment:

app/
├── layout.tsx        # Root layout (shared UI)
├── page.tsx          # Home page /
├── about/
│   └── page.tsx      # /about
└── blog/
    ├── page.tsx      # /blog
    └── [slug]/
        └── page.tsx  # /blog/:slug

Server Components vs Client Components

By default, every component in the app/ directory is a React Server Component (RSC). They run on the server, reducing JavaScript sent to the browser.

// This runs only on the server — no client JS
export default async function BlogList() {
  const posts = await fetchPosts()
  return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>
}

Add 'use client' only when you need browser APIs or interactivity:

'use client'
import { useState } from 'react'
 
export default function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>
}

Static Generation with generateStaticParams

Pre-render dynamic routes at build time for maximum performance:

export async function generateStaticParams() {
  const posts = await getPosts()
  return posts.map(post => ({ slug: post.slug }))
}

Conclusion

Next.js 15 with the App Router gives you the best of both worlds: the developer experience of React with the performance of static sites. Start building today!