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
pagesdirectory automatically results in corresponding routes. The
next/routercomponent allows access to the router object inside components of an application, and the
next/linkcomponent 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/apidirectory 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 exportcommand generates a completely static site for deployment.
AMP support. The
next/ampcomponent 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.
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 new site, Netlify tries to detect the framework your project is using. If your project uses Next.js, Netlify automatically installs the Essential Next.js Build Plugin. For existing sites already linked to Netlify, you can choose to install the plugin yourself.
Essential Next.js configures your site on Netlify to enable key Next.js functionality. It effectively creates a Netlify Function for each Next.js page that requires one. The plugin 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.
Redirects and rewrites using
next.config.js aren’t currently supported for Next.js sites on Netlify.
Use built-in bundling
# More resources
Did you find this doc useful?
Your feedback helps us improve our docs.