āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š nextjs/app/guides/production-checklist ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
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 and before going to production, 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:
<AppOnly>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."use client" boundaries to avoid unnecessarily increasing your client-side JavaScript bundle.cookies and the searchParams prop will opt the entire route into Dynamic Rendering (or your whole application if used in the Root Layout). Ensure Dynamic API usage is intentional and wrap them in <Suspense> boundaries where appropriate.</AppOnly> <PagesOnly>Good to know: Partial Prerendering (experimental) will allow parts of a route to be dynamic without opting the whole route into dynamic rendering.
<Link> component: Use the <Link> component for client-side navigation and prefetching.fetch are cached.public directory to automatically cache your application's static assets, e.g. images.getStaticProps are cached where appropriate.public directory to automatically cache your application's static assets, e.g. images.app/global-error.tsx to provide consistent, accessible fallback UI and recovery for uncaught errors across your app.app/global-not-found.tsx to serve an accessible 404 for unmatched routes across your app.<Image> Component: Optimize images by using the Image Component, which automatically optimizes images, prevents layout shift, and serves them in modern formats like WebP.<Script> Component: Optimize third-party scripts by using the Script Component, which automatically defers scripts and prevents them from blocking the main thread.eslint-plugin-jsx-a11y plugin to catch accessibility issues early..env.* files are added to .gitignore and only public variables are prefixed with NEXT_PUBLIC_.<Head> Component: Use the next/head component to add page titles, descriptions, and more.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.
useReportWebVitals hook: Use this hook to send Core Web Vitals data to analytics tools.Use the @next/bundle-analyzer plugin to analyze the size of your JavaScript bundles and identify large modules and dependencies that might be impacting your application's performance.
Additionally, the following tools can help you understand the impact of adding new dependencies to your application:
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā