Before taking your Next.js application to production, there are some optimizations and patterns you should consider implementing for the best user experience, performance, and security.
This page provides best practices that you can use as a reference when building your application, before going to production, and after deployment - as well as the automatic Next.js optimizations you should be aware of.
These Next.js optimizations are enabled by default and require no configuration:
- Code-splitting: Next.js automatically code-splits your application code by pages. This means only the code needed for the current page is loaded on navigation. You may also consider lazy loading third-party libraries, where appropriate.
- Prefetching: When a link to a new route enters the user's viewport, Next.js prefetches the route in background. This makes navigation to new routes almost instant. You can opt out of prefetching, where appropriate.
- Automatic Static Optimization: Next.js automatically determines that a page is static (can be pre-rendered) if it has no blocking data requirements. Optimized pages can be cached, and served to the end-user from multiple CDN locations. You may opt into Server-side Rendering, where appropriate.
These defaults aim to improve your application's performance, and reduce the cost and amount of data transferred on each network request.
While building your application, we recommend using the following features to ensure the best performance and user experience:
<Link>component: Use the
<Link>component for client-side navigation and prefetching.
- Custom Errors: Gracefully handle 500 and 404 errors
- API Routes: Use Route Handlers to access your backend resources, and prevent sensitive secrets from being exposed to the client.
- Data Caching: Verify whether your data requests are being cached or not, and opt into caching, where appropriate. Ensure requests that don't use
getStaticPropsare cached where appropriate.
- Incremental Static Regeneration: Use Incremental Static Regeneration to update static pages after they've been built, without rebuilding your entire site.
- Static Images: Use the
publicdirectory to automatically cache your application's static assets, e.g. images.
- Font Module: Optimize fonts by using the Font Module, which automatically hosts your font files with other static assets, removes external network requests, and reduces layout shift.
<Image>Component: Optimize images by using the Image Component, which automatically optimizes images, prevents layout shift, and serves them in modern formats like WebP or AVIF.
<Script>Component: Optimize third-party scripts by using the Script Component, which automatically defers scripts and prevents them from blocking the main thread.
- ESLint: Use the built-in
eslint-plugin-jsx-a11yplugin to catch accessibility issues early.
- Environment Variables: Ensure your
.env.*files are added to
.gitignoreand only public variables are prefixed with
- Content Security Policy: Consider adding a Content Security Policy to protect your application against various security threats such as cross-site scripting, clickjacking, and other code injection attacks.
<Head>Component: Use the
next/headcomponent to add page titles, descriptions, and more.
- TypeScript and TS Plugin: Use TypeScript and the TypeScript plugin for better type-safety, and to help you catch errors early.
Before going to production, you can run
next build to build your application locally and catch any build errors, then run
next start to measure the performance of your application in a production-like environment.
- Lighthouse: Run lighthouse in incognito to gain a better understanding of how your users will experience your site, and to identify areas for improvement. This is a simulated test and should be paired with looking at field data (such as Core Web Vitals).
Additionally, the following tools can you understand the impact of adding new dependencies to your application:
Depending on where you deploy your application, you might have access to additional tools and integrations to help you monitor and improve your application's performance.
For Vercel deployments, we recommend the following:
- Analytics: A built-in analytics dashboard to help you understand your application's traffic, including the number of unique visitors, page views, and more.
- Speed Insights: Real-world performance insights based on visitor data, offering a practical view of how your website is performing in the field.
- Logging: Runtime and Activity logs to help you debug issues and monitor your application in production. Alternatively, see the integrations page for a list of third-party tools and services.
Good to know:
To get a comprehensive understanding of the best practices for production deployments on Vercel, including detailed strategies for improving website performance, refer to the Vercel Production Checklist.
Following these recommendations will help you build a faster, more reliable, and secure application for your users.