Skip to main content

Optimizations

Next.js comes with a variety of built-in optimizations designed to improve your application's speed and Core Web Vitals. This guide will cover the optimizations you can leverage to enhance your user experience.

Built-in Components​

Built-in components abstract away the complexity of implementing common UI optimizations. These components are:

  • Images: Built on the native <img> element. The Image Component optimizes images for performance by lazy loading and automatically resizing images based on device size.
  • Link: Built on the native <a> tags. The Link Component prefetches pages in the background, for faster and smoother page transitions.
  • Scripts: Built on the native <script> tags. The Script Component gives you control over loading and execution of third-party scripts.

Metadata​

Metadata helps search engines understand your content better (which can result in better SEO), and allows you to customize how your content is presented on social media, helping you create a more engaging and consistent user experience across various platforms.

The Metadata API in Next.js allows you to modify the <head> element of a page. You can configure metadata in two ways:

Additionally, you can create dynamic Open Graph Images using JSX and CSS with imageResponse constructor.

The Head Component in Next.js allows you to modify the <head> of a page. Learn more in the Head Component documentation.

Static Assets​

Next.js /public folder can be used to serve static assets like images, fonts, and other files. Files inside /public can also be cached by CDN providers so that they are delivered efficiently.

Analytics and Monitoring​

For large applications, Next.js integrates with popular analytics and monitoring tools to help you understand how your application is performing. Learn more in the Analytics, OpenTelemetry, and Instrumentation guides.