Статический экспорт

Next.js позволяет начать разработку со статического сайта или одностраничного приложения (SPA), а затем при необходимости добавить функции, требующие сервера.

При выполнении команды next build Next.js генерирует HTML-файл для каждого маршрута. Разбивая классическое SPA на отдельные HTML-файлы, Next.js избегает загрузки ненужного JavaScript-кода на стороне клиента, уменьшая размер бандла и ускоряя загрузку страниц.

Поскольку Next.js поддерживает такой статический экспорт, его можно развернуть на любом веб-сервере, способном обслуживать статические ресурсы HTML/CSS/JS.

Полезно знать: Мы рекомендуем использовать App Router для расширенной поддержки статического экспорта.

Конфигурация

Для включения статического экспорта измените режим вывода в next.config.js:

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  output: 'export',

  // Опционально: Изменить ссылки `/me` -> `/me/` и генерировать `/me.html` -> `/me/index.html`
  // trailingSlash: true,

  // Опционально: Отключить автоматическое преобразование `/me` -> `/me/`, сохраняя оригинальный `href`
  // skipTrailingSlashRedirect: true,

  // Опционально: Изменить выходную директорию `out` -> `dist`
  // distDir: 'dist',
}

module.exports = nextConfig

После выполнения next build Next.js создаст папку out, содержащую HTML/CSS/JS ресурсы вашего приложения.

Вы можете использовать getStaticProps и getStaticPaths для генерации HTML-файла для каждой страницы в директории pages (или больше для динамических маршрутов).

Поддерживаемые функции

Большинство основных функций Next.js для создания статических сайтов поддерживаются, включая:

• Динамические маршруты с getStaticPaths
• Префетчинг с next/link
• Предзагрузка JavaScript
• Динамические импорты
• Любые варианты стилизации (CSS Modules, styled-jsx и др.)
• Получение данных на клиенте
• getStaticProps
• getStaticPaths

Оптимизация изображений

Оптимизация изображений через next/image доступна при статическом экспорте с помощью кастомного загрузчика в next.config.js. Например, можно оптимизировать изображения через Cloudinary:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  images: {
    loader: 'custom',
    loaderFile: './my-loader.ts',
  },
}

module.exports = nextConfig

Кастомный загрузчик определяет способ получения изображений. Например, следующий загрузчик формирует URL для Cloudinary:

export default function cloudinaryLoader({
  src,
  width,
  quality,
}: {
  src: string
  width: number
  quality?: number
}) {
  const params = ['f_auto', 'c_limit', `w_${width}`, `q_${quality || 'auto'}`]
  return `https://res.cloudinary.com/demo/image/upload/${params.join(
    ','
  )}${src}`
}

export default function cloudinaryLoader({ src, width, quality }) {
  const params = ['f_auto', 'c_limit', `w_${width}`, `q_${quality || 'auto'}`]
  return `https://res.cloudinary.com/demo/image/upload/${params.join(
    ','
  )}${src}`
}

Затем можно использовать next/image в приложении, указывая относительные пути к изображениям в Cloudinary:

import Image from 'next/image'

export default function Page() {
  return <Image alt="черепахи" src="/turtles.jpg" width={300} height={300} />
}

import Image from 'next/image'

export default function Page() {
  return <Image alt="черепахи" src="/turtles.jpg" width={300} height={300} />
}

Неподдерживаемые функции

Функции, требующие Node.js сервера или динамической логики, недоступны при статическом экспорте:

• Интернационализация
• API-маршруты
• Реврайты
• Редиректы
• Заголовки
• Мидлвары
• Инкрементальная статическая регенерация
• Оптимизация изображений с дефолтным loader
• Черновой режим
• getStaticPaths с fallback: true
• getStaticPaths с fallback: 'blocking'
• getServerSideProps

Развертывание

При статическом экспорте Next.js можно развернуть на любом веб-сервере, поддерживающем статические ресурсы HTML/CSS/JS.

После выполнения next build Next.js генерирует статический экспорт в папку out. Например, для маршрутов:

• /
• /blog/[id]

Будут созданы файлы:

• /out/index.html
• /out/404.html
• /out/blog/post-1.html
• /out/blog/post-2.html

Для статических хостов типа Nginx можно настроить реврайты запросов:

server {
  listen 80;
  server_name acme.com;

  root /var/www/out;

  location / {
      try_files $uri $uri.html $uri/ =404;
  }

  # Необходимо при `trailingSlash: false`.
  # Можно опустить при `trailingSlash: true`.
  location /blog/ {
      rewrite ^/blog/(.*)$ /blog/$1.html break;
  }

  error_page 404 /404.html;
  location = /404.html {
      internal;
  }
}

История версий