Next.js on Netlify

Next.js is a React-based open source framework that provides a hybrid static / server-side rendered model for enterprise-grade sites and applications.

# Key features

These Next.js features provide important benefits for sites and apps, including those built and deployed with Netlify.

  • Page routing. Next.js boasts a file system-based routing structure. Organizing files and subdirectories within a pages directory automatically results in corresponding routes. The next/router component allows access to the router object inside components of an application, and the next/link component enables client-side transitions between routes. Other routing highlights include dynamic routes, catch all routes, shallow routing that changes a URL without fetching data again, and client-side routing with optimized prefetching.

  • Automatic API endpoints. For simpler API management, any file added to the pages/api directory is treated as an API endpoint with a corresponding API route.

  • Preview mode. Netlify supports rendering a draft page from any data-fetching solution instead of building a statically-generated page to preview. This preview mode functionality eliminates waiting for a build to run before previewing new content.

  • Hybrid or static. Depending on project needs, you can either leverage a hybrid approach for generating content or export a completely static site. The hybrid approach allows a choice between server-side rendering or static generation on a per-page basis. Meanwhile, the next export command generates a completely static site for deployment.

  • AMP support. The next/amp component enables the creation of Accelerated Mobile Pages (AMP) to achieve faster load times on mobile devices.

  • Internationalization. Netlify supports Next.js internationalized routing functionality for locale-specific options.

In addition to the Next.js-specific items above, the following Netlify features provide a full-fledged site development and monitoring experience.

  • Redirects, rewrites, & headers. You can use Netlify's built-in routing capabilities to configure redirects and rewrites or to update headers.

  • Analytics. To monitor trends in site activity for a Next.js project on Netlify, you can leverage Netlify Analytics.

The Next.js framework also includes developer-friendly features such as hot code reloading, automatic code splitting, TypeScript support, a variety of styling options, and built-in support for environment variables. All of these are available when you build with Netlify.

# Netlify integration

When you link a repository for a Next.js project to a Netlify site, you can enable the features above by installing the Next.js Build Plugin.

The plugin configures your site on Netlify to enable key Next.js functionality. Essentially, the Build Plugin creates a Netlify Function for each Next.js page that requires one. It automatically stores the resulting serverless functions in your site’s functions directory. You can add custom Netlify Functions to the same directory, and they’ll be automatically detected and deployed.

Uninstall the plugin

You can remove the plugin if needed. If you’re building a Next.js project that’s exported to a static application, you don’t need the extra features enabled in the Build Plugin for your project to deploy with Netlify.

# Limitations

Incremental Static Regeneration (ISR), next/image, and redirects and rewrites using next.config.js aren't currently supported for Next.js sites on Netlify.

Use built-in bundling

Enabling JavaScript bundling for asset optimization on Netlify can result in site build issues for a Next.js project with server-side rendering. Note that Next.js automatically bundles your project without this setting enabled.

# More resources