Getting Started with Next.js 15 and the App Router

Next.js 15 is the most exciting release yet for the popular React framework. With the App Router now fully stable and powerful new features like React Server Components baked in, there's never been a better time to learn Next.js.

What is Next.js?

Next.js is a React framework that gives you everything you need to build production-ready web applications out of the box: routing, rendering, data fetching, optimization, and more.

💡

Next.js 15 requires Node.js 18.17 or later. Make sure your environment is up to date before getting started.

Setting Up Your Project

Getting started is simple with the official CLI:

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

The App Router Folder Structure

The App Router uses a file-system based routing convention. Every folder inside app/ becomes a route segment.

Your First Layout

The root layout wraps every page in your application. Here's a typical layout.tsx:

// app/layout.tsx
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import './globals.css'
 
const inter = Inter({ subsets: ['latin'] })
 
export const metadata: Metadata = {
  title: 'My Next.js App',
  description: 'Built with Next.js 15',
}
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <nav>My Navigation</nav>
        <main>{children}</main>
        <footer>My Footer</footer>
      </body>
    </html>
  )
}

Server vs. Client Components

One of the most important concepts in the App Router is the distinction between Server and Client Components:

Server Components (default): Run only on the server. Great for data fetching and reducing bundle size.
Client Components: Run in the browser. Needed for interactivity, state, and browser APIs. Add 'use client' at the top.

⚠️

Don't reach for 'use client' too quickly. Push client components to the leaves of your component tree to maximise the benefits of Server Components.

Data Fetching

In the App Router, you fetch data directly in Server Components using async/await:

// app/posts/page.tsx
async function getPosts() {
  const res = await fetch('https://api.example.com/posts', {
    next: { revalidate: 3600 }, // ISR: revalidate every hour
  })
  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>
  )
}