Next.js
Getting Started
The Next.js documentation is divided into two sites:
- Next 13 App Router (beta) docs (you are here): Try out React Server Components, Streaming, new data fetching, and more.
- Next 13 (stable) docs: Use the new Font Optimization, updated Image, Link and Script components, and more.
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:
| Features | What's New? |
|---|---|
| Routing | New file-system based router built on top of Server Components that supports layouts, nested routing, loading states, error handling, and more. |
| Rendering | Client-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 Fetching | Simplified data fetching with async/await support in React Components and the fetch() API that aligns with React and the Web Platform. |
| Caching | New Next.js HTTP Cache and client-side cache optimized for Server Components and client-side navigation. |
| Optimizations | Improved Image Component with native browser lazy loading. New Font Module with automatic font optimization. |
| Transpilation | Automatic transpilation and bundling of dependencies from local packages (like monorepos) or from external dependencies (node_modules). |
| API | Updates to the API design throughout Next.js. Please refer to the API Reference Section for new APIs. |
| Tooling | Introducing 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:
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?