The hottest news in the Jamstack world this week is the release of Next.js 13, which is the most significant Next.js release ever. It comes with a host of exciting new features, including a fundamentally new data fetching and routing model. Unlocked by React 18, this beta feature includes first class support for React Server Components, streaming HTML at the edge, and a new, more efficient and easier-to-use data fetching model.
How to deploy Next.js 13 on Netlify
Netlify supports Next.js 13 today. You can update your site to Next 13 and it will work on Netlify right away. All the stable features work out of the box with no changes required on your part when using the latest Netlify Next.js Runtime. If you have manually installed the Netlify Next.js Runtime in your package.json you will need to upgrade it, but for everyone else it will upgrade you automatically on your next deploy.
Using the Next.js 13 app directory on Netlify
The most exciting new features in Next 13 use the experimental app directory. This uses a completely new router which supports features such as nested routes, and unlocks some of the most useful new features from React 18 such as React Server Components, and a new data-fetching model.
This is an experimental Next.js feature which you can enable by setting experimental.appDir to true in your next.config.js. It currently also requires the use of a pre-release version of the Netlify Next.js Runtime. To try it out, run npm install -D @netlify/plugin-nextjs@appdir in your project. While we aim to enable support by default soon, this is currently pre-release and should not be used for production.
While deploying app directory sites to Netlify is still experimental, it already supports many of the most interesting new features, including React Server Components and streaming HTML using the edge runtime. Pages that use the edge runtime are automatically deployed to Netlify Edge Functions and rendered in edge nodes around the world.
Soon you will not need to install the pre-release plugin, and it will work automatically when deployed to Netlify. Some features will remain unstable or incomplete while the feature is experimental. We will continue to update our support for the new app directory features during the beta period, and expect to release comprehensive support in time for the feature’s general release.
Test
Learn more
To find out more about Next 13, see the beta Next docs. To learn more about Next 13 app dir on Netlify, and to give feedback, visit our discussion at https://ntl.fyi/next-13-feedback.
