Деплой Next.js Static Exports не в корневую директорию

Для статического экспорта и деплоя приложения Next.js не в корневую директорию, нужно правильно прописать путь, т.к. по умолчанию Next.js смотрит от корня.

Допустим, что нам надо подготовить проект Next.js Static Exports для деплоя по адресу: https://example-site.ru/my-url.

Активируем static export в next.config.ts и прописываем basePath и assetPrefix, который будет равен нашей поддиректории и будет активироваться только при сборке проекта.

next.config.ts

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  output: 'export',
  basePath: process.env.NODE_ENV === 'development' ? '' : (process.env.NEXT_PUBLIC_BASE_PATH || '/my-url'),
  assetPrefix: process.env.NODE_ENV === 'development' ? '' : (process.env.NEXT_PUBLIC_BASE_PATH || '/my-url/'),
}
 
module.exports = nextConfig

Дело в том, что basePath, который мы указали в конфиге, не поменяет пути у картинок, фоновых изображений, музыки и т.д.

Для правильной замены, создадим в константах переменную basePath, в которой будет храниться путь в зависимости от режима разработки.

constants.ts

export const basePath = process.env.NODE_ENV === 'development' ? '' : (process.env.NEXT_PUBLIC_BASE_PATH || '/my-url');

Установим npm-пакет next-image-export-optimizer для оптимизации изображений и добавления basePath картинкам. В package.json добавим команде build запуск next-image-export-optimizer.

package.json

"scripts": {
  "dev": "next dev --turbopack",
  "build": "next build --turbopack && next-image-export-optimizer",
  "start": "next start"
},

Настроим пакет в next.config.ts. Больше настроек тут: https://www.npmjs.com/package/next-image-export-optimizer

next.config.ts

images: {
  loader: "custom",
  imageSizes: [128, 256, 384, 512, 640, 768, 896, 1024],
  deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
},
transpilePackages: ["next-image-export-optimizer"],
env: {
  nextImageExportOptimizer_imageFolderPath: "public/img",
  nextImageExportOptimizer_exportFolderPath: "out",
  nextImageExportOptimizer_quality: "100",
  nextImageExportOptimizer_storePicturesInWEBP: "true",
  nextImageExportOptimizer_exportFolderName: "nextImageExportOptimizer",
  nextImageExportOptimizer_generateAndUseBlurImages: "true",
  nextImageExportOptimizer_remoteImageCacheTTL: "0",
},

Теперь будем использовать компонент <ExportedImage />, вместо <Image />, в котором в basePath запишем нашу переменную из constants.

<ExportedImage basePath={basePath}
  width={200}
  height={204}
  src="/img/room/hammer.png"
  alt=""
/>

Добавим нашу переменную везде, где это необходимо, например к фоновым изображениям.

<div className="absolute inset-0 z-50 w-full h-full flex flex-col items-center bg-[#E6EBFF] bg-cover overflow-auto"
  style={{
    backgroundImage: `url(${basePath}/img/bg-cloud.png)`}
  }
>

Или к url для предзагрузки изображений.

let preloadPriorityImagesData = [
  `${basePath}/img/room/bathroom.jpg`,
  `${basePath}/img/room/kitchen.jpg`,
  `${basePath}/img/room/living-room.jpg`,
];

Теперь можно собрать проект и разместить на любом сервере, который поддерживает HTML/CSS/JS.