Next.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

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

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}`
}

import Image from 'next/image'
 
export default function Page() {
  return <Image alt="turtles" src="/turtles.jpg" width={300} height={300} />
}

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;
  }
}