Getting Started with Next.js 16

Next.js has revolutionized the way we build React applications. With version 16, released in October 2025, the framework introduces groundbreaking features including Cache Components, Turbopack as the default bundler, React 19.2 support, and enhanced performance optimizations. This guide will walk you through setting up a new project and understanding the core concepts.

Prerequisites

Before getting started, ensure you have:

Node.js: Version 20.9 or later
TypeScript: Version 5.1 or later (if using TypeScript)
Modern Browser: Chrome 111+, Edge 111+, Firefox 111+, or Safari 16.4+

Setting Up Your Project

The easiest way to start a Next.js project is by using create-next-app. Open your terminal and run:

npx create-next-app@latest my-next-app

You will be prompted with a few questions:

Would you like to use TypeScript? Yes
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? Yes
Would you like to use src/ directory? Yes
Would you like to use App Router? Yes

Once the installation is complete, navigate into your project folder:

cd my-next-app
npm run dev

Open http://localhost:3000 in your browser to see your new application running.

Note: Next.js 16 uses Turbopack as the default bundler, which provides up to 5-10x faster Fast Refresh and 2-5x faster builds compared to Webpack.

Understanding the App Router

The App Router (app directory) is the modern paradigm for building applications in Next.js. It replaces the traditional pages directory and brings powerful features like:

Layouts: Shared UI across multiple pages.
Server Components: Components that render on the server by default.
Streaming: Progressively rendering UI.
Cache Components: New in Next.js 16, utilizing Partial Pre-Rendering (PPR) for instant navigation.

File Structure

In the app directory, files are mapped to routes:

app/page.tsx -> /
app/about/page.tsx -> /about
app/blog/[slug]/page.tsx -> /blog/:slug

Server vs. Client Components

By default, all components in the App Router are Server Components. This means they run on the server, have direct access to your database, and send zero JavaScript to the client.

To use interactive features like useState or useEffect, you must mark a component as a Client Component by adding the "use client" directive at the top of the file.

"use client";

import { useState } from "react";

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

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

Cache Components (New in Next.js 16)

Next.js 16 introduces Cache Components using the use cache directive. This feature leverages Partial Pre-Rendering (PPR) to enable instant navigation by caching static parts of your application while keeping dynamic parts fresh.

import { cache } from "react";

const getData = cache(async () => {
  const res = await fetch("https://api.example.com/data", {
    next: { revalidate: 3600 },
  });
  if (!res.ok) throw new Error("Failed to fetch data");
  return res.json();
});

export default async function Page() {
  const data = await getData();
  return <main>{/* Render your data */}</main>;
}

Data Fetching

Data fetching in Next.js 16 has important changes. Request APIs are now asynchronous - you must use await when accessing cookies, headers, draftMode, params, and searchParams.

// ✅ Correct - Async access in Next.js 16
export default async function Page({ params, searchParams }) {
  const resolvedParams = await params;
  const resolvedSearchParams = await searchParams;

  const data = await fetch("https://api.example.com/data");
  if (!data.ok) throw new Error("Failed to fetch data");
  const result = await data.json();

  return <main>{/* Render your data */}</main>;
}

Improved Caching APIs

Next.js 16 introduces enhanced caching APIs including updateTag(), refresh(), and refined revalidateTag() for better cache management:

import { revalidateTag, updateTag } from "next/cache";

// Revalidate specific cache tags
revalidateTag("products");

// Update cache tags
updateTag("products", { maxAge: 3600 });

React 19.2 Support

Next.js 16 includes support for React 19.2, bringing features like:

View Transitions: Smooth page transitions
useEffectEvent(): New hook for effect events
<Activity/> component: Enhanced activity tracking
React Compiler: Automatic memoization for optimized performance (stable in Next.js 16)

Enhanced Routing

Next.js 16 optimizes navigation and prefetching with:

Layout Deduplication: Prevents duplicate layout rendering
Incremental Prefetching: More efficient prefetching strategy

Turbopack (Stable)

Turbopack is now the default bundler in Next.js 16, offering:

5-10x faster Fast Refresh: See your changes instantly
2-5x faster builds: Significantly reduced build times
File System Caching (Beta): Enhanced startup and compile times for large applications

Upgrading from Previous Versions

If you're upgrading an existing Next.js project, you can use the automated codemod:

npx @next/codemod@canary upgrade latest

This command will:

Update your project configuration
Migrate deprecated conventions
Remove unstable API prefixes
Handle async Request API migrations

Conclusion

Next.js 16 provides a robust, high-performance framework for building modern web applications. By leveraging the App Router, Server Components, Cache Components, and Turbopack, you can build faster, more efficient, and scalable applications with cutting-edge features and improved developer experience.