Welcome to the new Next.js Docs!
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 a new
app directory (beta).
We are currently rewriting the Next.js documentation to reflect these updates.
🏗️ While you can try out the
appdirectory, it's currently in beta and we do not recommend using it in production. You can still use Next.js 13 with the
pagesdirectory, please refer to the stable docs if you're using
Here's a summary of the new features in the
|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 |
|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 (|
|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 directory roadmap.
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.
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:
For feedback on Next.js features and API design, please use GitHub Discussions.
Finally, let's get started! What would you like to do?