[Next.js 13 공식 문서 App Router] - Optimizing

Optimizations

Built-in Components

  - Images: lazy loading and automatically resizing images based on device size

  - Link: prefetches pages in the background, for faster and smoother page transitions

  - Scripts: control over loading and execution of third-party scripts

Metadata

  - Helps search engines understand our content better (better SEO)

  - Config-based Metadata: export a static metadata object or a dynamic generateMetadata function

  - File-based Metadata: Add static or dynamically generated special files to route segments

Static Assets

  - /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

Analytics and Monitoring

  - OpenTelemetry

  - Instrumentation

---

Images

  - Size Optimization

  - Visual Stability

  - Faster Page Loads

  - Asset Flexibility

Usage

  - Local Images

  - Remote Images

    - Since Next.js does not have access to remote files during the build process,
       We need to provide the width, height and optional blurDataURL props manually

    - Width and Height do not determine the rendered size of the image file

    - If we want to use relative URLs for the image src, use a loader

  - Domains

  - Loaders

    - A loader is a function that generates the URLs for our image

Priority

  - The image that will be the Largest Contentful Paint element for each page

Image Sizing

  - Automatically, using a static import

  - Explicitly, by including a width and height property

  - Implicitly, by using fill which causes the image to expand to fill its parent element

    - The fill prop allows our image to be sized by its parent element

Styling

  - Use className or style, not styled-jsx

  - When using fill, the parent element must have position: relative

  - When using fill, the parent element mus have display: block

Examples

  - Responsive

  - Fill Container

  - Background Image

Other Properties

Configuration

---

Fonts

Google Fonts

  - Specifying a subset

    - Google Fonts are automatically subset

  - Using Multiple Fonts

    - The first approach is to create a utility function that exports a font,
       imports it, and applies its className

Local Fonts

With Tailwind CSS

Preloading

Reusing fonts

  - If we load the same font function in multiple files, multiple instances of the same font are loaded

  - Call the font loader function in one shared file

  - Export it as a constant

  - Import the constant in each file

---

Scripts

Layout Scripts

Application Scripts

Strategy

  - beforeInteractive

  - afterInteractive (default)

  - lazyOnload

  - worker

Offloading Scripts To A Web Worker (Experimental)

Inline Scripts

  - An id property must be assigned for inline scripts in order for Next.js to track and optimize the script

Executing Additional Code

  - onLoad

  - onReady

  - onError

Additional Attributes

---

Metadata

Static Metadata

  - Export a Metadata object from a layout.js or static page.js file

Dynamic Metadata

  - generateMetadata function to fetch metadata that requires dynamic values

File-based metadata

  - favicon.ico, apple-icon.jpg, and icon.jpg

  - opengraph-image.jpg and twitter-image.jpg

  - robots.txt

  - sitemap.xml

Behavior

  - Default Fields

  - Ordering

  - Merging

Dynamic Image Generation

  - ImageResponse constructor allows us to generate dynamic images using JSX ans CSS

JSON-LD

  - Format for structured data can be used by search engines to understand our content

---

Static Assets

---

Lazy Loading

next/dynamic

Examples

  - Importing Client Components

  - Skipping SSR

  - Importing Server Components

  - Loading External Libraries

  - Adding a custom loading component

  - Importing Named Exports

---

Analytics

Web Vitals

  - Time to First Byte (TTFB)

  - First Contentful Paint (FCP)

  - Largest Contentful Paint (LCP)

  - First Input Delay (FID)

  - Cumulative Layout Shift (CLS)

  - Interaction to Next Paint (INP, expreimental)

---

OpenTelemetry

Getting Started

  - Using @vercel/otel

  - Manual OpenTelemetry configuration

Testing your instrumentation

Deployment

  - Using OpenTelemetry Collector

Custom Spans

Default Spans in Next.js

---

Instrumentation