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

export default async function Page() {
  // このフェッチは`next build`中にサーバー上で実行されます
  const res = await fetch('https://api.example.com/...')
  const data = await res.json()
 
  return <main>...</main>
}

'use client'
 
import useSWR from 'swr'
 
const fetcher = (url: string) => fetch(url).then((r) => r.json())
 
export default function Page() {
  const { data, error } = useSWR(
    `https://jsonplaceholder.typicode.com/posts/1`,
    fetcher
  )
  if (error) return '読み込み失敗'
  if (!data) return '読み込み中...'
 
  return data.title
}

import Link from 'next/link'
 
export default function Page() {
  return (
    <>
      <h1>インデックスページ</h1>
      <hr />
      <ul>
        <li>
          <Link href="/post/1">ポスト1</Link>
        </li>
        <li>
          <Link href="/post/2">ポスト2</Link>
        </li>
      </ul>
    </>
  )
}

/** @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} />
}

export async function GET() {
  return Response.json({ name: 'Lee' })
}

'use client';
 
import { useEffect } from 'react';
 
export default function ClientComponent() {
  useEffect(() => {
    // これで`window`にアクセスできます
    console.log(window.innerHeight);
  }, [])
 
  return ...;
}

export const dynamic = 'error'

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