Getting Started with Next.js 15

Next.js 15 brings a dramatically improved developer experience alongside serious performance wins. If you've been on the fence about adopting the App Router, now is the time.

Why the App Router Changes Everything

The App Router moves rendering closer to the data. Server Components fetch data and stream HTML directly — no client-side waterfall, no useEffect fetch chains. Your page loads faster, your bundle is smaller, and you write less code.

Setting Up Your Project

Bootstrap a new project with a single command. Choose TypeScript, Tailwind, and the App Router when prompted.

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

Your First Server Component

Every file in app/ is a Server Component by default. You can fetch data directly at the top of the component — no hooks, no loading state, no boilerplate.

// app/posts/page.tsx
async function getPosts() {
  const res = await fetch("https://api.example.com/posts")
  return res.json()
}

export default async function PostsPage() {
  const posts = await getPosts()
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

When to Add "use client"

Only add "use client" when you genuinely need browser APIs, event handlers, or stateful hooks. Keep client boundaries as deep in the tree as possible — a small interactive button doesn't need to make the whole page a client component.

Static vs Dynamic Rendering

By default, routes are statically rendered at build time. Opt into dynamic rendering with export const dynamic = 'force-dynamic' or by reading cookies, headers, or search params. Use generateStaticParams for dynamic routes that should still be statically generated.

What's Next?

From here, explore Parallel Routes for complex layouts, Server Actions for form handling without API routes, and Partial Prerendering for the best of static and dynamic in a single page. The App Router is the foundation — build on it confidently.