mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
92b4d6737c
- Fetch logging configuration is no longer experimental - Add `unstable_noStore` reference - Add `unstable_cache` reference - Add codemod docs for `next/og` import changes - Update docs around stable Server Actions - Add example of revalidating the entire data cache - Update static export docs for `next export` command removal - Update minimum required Node.js version - Add `viewport` and `generateViewport` reference Co-authored-by: Balázs Orbán <[email protected]> Co-authored-by: Delba de Oliveira <[email protected]>
47 lines
3.0 KiB
Plaintext
47 lines
3.0 KiB
Plaintext
---
|
|
title: Optimizations
|
|
nav_title: Optimizing
|
|
description: Optimize your Next.js application for best performance and user experience.
|
|
---
|
|
|
|
{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
|
|
|
|
Next.js comes with a variety of built-in optimizations designed to improve your application's speed and [Core Web Vitals](https://web.dev/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.
|
|
|
|
<AppOnly>
|
|
|
|
The Metadata API in Next.js allows you to modify the `<head>` element of a page. You can configure metadata in two ways:
|
|
|
|
- **Config-based Metadata**: Export a [static `metadata` object](/docs/app/api-reference/functions/generate-metadata#metadata-object) or a dynamic [`generateMetadata` function](/docs/app/api-reference/functions/generate-metadata#generatemetadata-function) in a `layout.js` or `page.js` file.
|
|
- **File-based Metadata**: Add static or dynamically generated special files to route segments.
|
|
|
|
Additionally, you can create dynamic Open Graph Images using JSX and CSS with [imageResponse](/docs/app/api-reference/functions/image-response) constructor.
|
|
|
|
</AppOnly>
|
|
|
|
<PagesOnly>
|
|
|
|
The Head Component in Next.js allows you to modify the `<head>` of a page. Learn more in the [Head Component](/docs/pages/api-reference/components/head) documentation.
|
|
|
|
</PagesOnly>
|
|
|
|
## 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 <PagesOnly>[Analytics](/docs/app/building-your-application/optimizing/analytics), </PagesOnly> [OpenTelemetry](/docs/pages/building-your-application/optimizing/open-telemetry)<PagesOnly>,</PagesOnly> and [Instrumentation](/docs/pages/building-your-application/optimizing/instrumentation) guides.
|