Getting Started with Next.js 15 and the App Router

Next.js 15 brings exciting new features and improvements to the React framework. In this post, we'll explore the App Router and how to leverage it for building modern web applications.

Why Next.js 15?

Next.js 15 introduces several key improvements:

• Turbopack - A faster bundler written in Rust
• Server Components - Render components on the server by default
• Improved caching - Better control over data caching
• Partial Prerendering - Combine static and dynamic content

Setting Up Your Project

To create a new Next.js 15 project, run:

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

This will scaffold a new project with TypeScript, Tailwind CSS, and the App Router.

Creating Your First Page

With the App Router, pages are created in the app directory:

// app/page.tsx
export default function HomePage() {
  return (
    <main className="min-h-screen p-8">
      <h1 className="text-4xl font-bold">Welcome to Next.js 15!</h1>
      <p className="mt-4 text-lg">
        This is your first page using the App Router.
      </p>
    </main>
  );
}

Server Components vs Client Components

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

"use client";

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

Data Fetching

Server Components can fetch data directly:

// 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: { id: number; title: string }) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

Conclusion

Next.js 15 with the App Router provides a powerful foundation for building modern web applications. The combination of Server Components, improved caching, and Turbopack makes development faster and more efficient.

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