Next.js Images and Fonts

Next.js provides built-in image and font optimization features designed to improve application performance and user experience.

Next.js's image and font optimization features provide developers with powerful tools to help build high-performance web applications with excellent user experience.

FeatureDescription
Image OptimizationUses the<Image>component, supports local and remote images, automatically optimizes size and loading performance.
Font OptimizationUses thenext/fontmodule, supports Google Fonts and local fonts, automatically hosts and optimizes loading.
Static Asset ManagementPlace static assets in thepublicdirectory, and access them via/filenamedirectly.

Static Asset Management

Next.js allows static assets (such as images, fonts, etc.) to be stored in the public directory.

These assets can be accessed directly via /filename.

Example directory structure:

my-next-app/
├── app/
├── public/
│   ├── images/
│   │   └── logo.png
│   └── fonts/
│       └── my-font.woff2
├── package.json
└── next.config.js

public/images/logo.pngCan be accessed via/images/logo.png.

Image Optimization

Next.js provides the<Image>component to optimize image loading. It extends the HTML<img>element and provides the following features:

  • Size Optimization: Automatically provides correctly sized images for different devices, supports modern image formats (such as WebP).

  • Visual Stability: Prevents layout shift during image loading.

  • Faster Loading: Uses native browser lazy loading, loading only when the image enters the viewport.

  • Resource Flexibility: Supports on-demand image resizing, even for remote images.

Using<Image>Components

fromnext/imageImport the<Image>component and use it within your component.

Example

import Image from 'next/image';

export default function Page() {
  return <Image src="/images/logo.png" alt="Logo" width={500} height={300} />;
}

Local Images

Local images can be referenced directly from the public directory.

Example

import Image from 'next/image';
import profilePic from './me.png';

export default function Page() {
  return (
    <Image
      src={profilePic}
      alt="Picture of the author"
      // width and height are automatically obtained from the image file
      // blurDataURL and placeholder are optional
    />
  );
}

Remote Images

Remote images require manually specifying width and height to avoid layout shift.

Example

import Image from 'next/image';

export default function Page() {
  return (
    <Image
      src="https://s3.amazonaws.com/my-bucket/profile.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  );
}

Configuring Remote Images

Configure the allowed remote image domains in next.config.js.

Example

const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 's3.amazonaws.com',
        port: '',
        pathname: '/my-bucket/**',
      },
    ],
  },
};

export default nextConfig;

Font Optimization

Next.js provides thenext/fontmodule to optimize font loading. It supports automatic hosting of font files, improving privacy and performance.

Using Google Fonts

Import fonts from next/font/google and apply them to HTML elements.

Example

import { Geist } from 'next/font/google';

const geist = Geist({
  subsets: ['latin'],
});

export default function Layout({ children }) {
  return (
    <html lang="en" className={geist.className}>
      <body>{children}</body>
    </html>
  );
}

If using non-variable fonts, you need to specify weight:

Example

import { Roboto } from 'next/font/google';

const roboto = Roboto({
  weight: '400',
  subsets: ['latin'],
});

export default function Layout({ children }) {
  return (
    <html lang="en" className={roboto.className}>
      <body>{children}</body>
    </html>
  );
}

Using Local Fonts

Import local font files from next/font/local.

Example

import localFont from 'next/font/local';

const myFont = localFont({
  src: './my-font.woff2',
});

export default function Layout({ children }) {
  return (
    <html lang="en" className={myFont.className}>
      <body>{children}</body>
    </html>
  );
}

If using multiple font files:

Example

const roboto = localFont({
  src: [
    {
      path: './Roboto-Regular.woff2',
      weight: '400',
      style: 'normal',
    },
    {
      path: './Roboto-Italic.woff2',
      weight: '400',
      style: 'italic',
    },
    {
      path: './Roboto-Bold.woff2',
      weight: '700',
      style: 'normal',
    },
    {
      path: './Roboto-BoldItalic.woff2',
      weight: '700',
      style: 'italic',
    },
  ],
});
Other Extensions