Getting Started

The Next.js documentation is divided into two sites:

Introducing the App Router

Over the past few months, the Next.js team has been working to integrate Next.js with React Server Components and React 18 features. These new features are now available to try in the new app directory.

🏗️ The App Router is currently in beta and we do not recommend using it in production.

Features Overview

Here's a summary of the new features in the App Router:

FeaturesWhat's New?
RoutingNew file-system based router built on top of Server Components that supports layouts, nested routing, loading states, error handling, and more.
RenderingClient-side and Server-side Rendering with Client and Server Components. Further optimized with Static and Dynamic Rendering on the server with Next.js. Streaming on Edge and Node.js runtimes.
Data FetchingSimplified data fetching with async/await support in React Components and the fetch() API that aligns with React and the Web Platform.
CachingNew Next.js HTTP Cache and client-side cache optimized for Server Components and client-side navigation.
OptimizationsImproved Image Component with native browser lazy loading. New Font Module with automatic font optimization.
TranspilationAutomatic transpilation and bundling of dependencies from local packages (like monorepos) or from external dependencies (node_modules).
APIUpdates to the API design throughout Next.js. Please refer to the API Reference Section for new APIs.
ToolingIntroducing Turbopack, up to 700x faster Rust-based Webpack replacement.

For a more extensive list, check out the App Router Roadmap.

Thinking in Server Components

Similar to how React changed the way we think about building UIs, React Server Components introduce a new mental model for building hybrid applications that leverage the server and the client.

Instead of React rendering your whole application client-side, React now gives you the flexibility to choose where to render your components based on their purpose.

For example, consider a page in your Next.js application:

Server and Client Components

If we were to split the page into smaller components, you'll notice that the majority of components are non-interactive and can be rendered on the server as Server Components. For smaller pieces of interactive UI, we can sprinkle in Client Components. This aligns with Next.js server-first approach.

To make this transition easier, Server Components are the default in the app directory, so you do not have to take additional steps to adopt them. Then, you can optionally opt-in to Client Components when needed.

To learn more, check out our guide on Server and Client Components.

Giving Feedback

We'd love your feedback as we're working on the new docs. You'll notice a toolbar at the bottom of the screen. You can comment with a Vercel account and leave feedback directly on the pages.

Feedback that would be helpful:

  • Typos and other small mistakes.
  • Confusing or unclear explanations.
  • Missing information.
  • Questions that you had while reading the docs.

For feedback on Next.js features and API design, please use GitHub Discussions.

Choose Your Path

Finally, let's get started! What would you like to do?