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

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

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

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

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

Настройка

Чтобы включить статический экспорт, измените режим вывода внутри next.config.js:

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  output: 'export',
 
  // Optional: Change links `/me` -> `/me/` and emit `/me.html` -> `/me/index.html`
  // trailingSlash: true,
 
  // Optional: Prevent automatic `/me` -> `/me/`, instead preserve `href`
  // skipTrailingSlashRedirect: true,
 
  // Optional: Change the output directory `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}`
}

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

import Image from 'next/image'
 
export default function Page() {
  return <Image alt="turtles" 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]

После выполнения next build, Next.js сгенерирует следующие файлы:

• /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;
  }
 
  # This is necessary when `trailingSlash: false`.
  # You can omit this when `trailingSlash: true`.
  location /blog/ {
      rewrite ^/blog/(.*)$ /blog/$1.html break;
  }
 
  error_page 404 /404.html;
  location = /404.html {
      internal;
  }
}

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