Legacy Next.js on Netlify

# Key features of the legacy runtime

Here are notable features of the v4 runtime and the main differences compared to the current adapter:

# Supported router types

Next.js Runtime v4 supports Next.js Pages Router. For full support of App Router, upgrade to the latest adapter.

# Incremental Static Regeneration (ISR)

On Runtime v4, ISR on Netlify works with On-demand Builders to revalidate pages as needed without rebuilding your entire site. Runtime v4 does not support tag or path based revalidation. Upgrade to the current adapter to use that functionality.

You can enable ISR for a page by returning a value for revalidate from the getStaticProps function. The minimum value for revalidate is 60 seconds. Any value less than that will default to 60 seconds.

ISR uses a “stale while revalidate” strategy, meaning that the visitor still receives the stale content, but it is regenerated in the background and becomes ready for the next request.

# Static site export

You can use next export to generate a completely static site, if you have no need for any of the dynamic features that Next.js offers.

# Image optimization

The next/image component allows you to automatically optimize images for your site on-demand, as they’re requested by users. On Runtime v4, next/image uses ipx and On-demand Builders by default. With the current adapter, Netlify Image CDN is used instead to simplify the setup of your site.

# Edge middleware

Next.js middleware is supported via an automatically-installed Edge Function.

# Redirects and rewrites

Next.js Runtime supports Next.js rewrites and redirects. These are defined in your next.config.js file and support some features that are not included in Netlify redirects and rewrites.

For redirects, we recommend using Netlify redirects when possible because they are faster to evaluate. Learn more about Next.js redirects and rewrites on Netlify.

# Suggested configuration values

When you link a repository for a Next.js project, Netlify provides a suggested build command and publish directory: next build and .next.

If you’re using the CLI to run Netlify Dev for a local development environment, Netlify suggests a dev command and port: next and 3000.

You can override suggested values or set them in a configuration file instead, but suggested values from automatic framework detection may help simplify the process of setting up a Next.js site on Netlify.

For manual configuration, check out the typical build settings for Next.js.

# pnpm support

If you’re planning to use pnpm with Next.js to manage dependencies, you must do one of the following:

• Set a PNPM_FLAGS environment variable with a value of --shamefully-hoist. This appends a --shamefully-hoist argument to the pnpm install command that Netlify runs.

• Enable public hoisting by adding an .npmrc file in the root of your project with this content:

  public-hoist-pattern[]=*
   

Learn more about using pnpm on Netlify.

# Troubleshooting

If you run into issues running a Next.js app on Netlify, check out our troubleshooting page. You can also visit the Netlify Support Forums to see if others have encountered similar issues.

# More resources

• Next.js documentation
• Posts about Next.js in our blog