Next.jsで作った最低限のサイトを200stackで配信する

Next.jsのSSGのサイトを作って200stackでホスティングするまでの手順を説明します。SSGで作ることでほとんどのソースコードを長いTTLでCDNにデプロイでき、高速で配信できるようになります。また、動的サーバーで配信する場合と比べてサーバー費用もかなり下げることができます。（200stackなら300円から！）
ほとんどのコーポレートサイトとかサービスサイトとかはSSGで作成するのが良いのではないかと思います。

ソースコードを準備してGitHubにPushする

まずはNext.jsのドキュメントの通りにアプリを作ります。

❯ pnpm create next-app@latest demo-200stack-nextjs --yes
❯ cd demo-200stack-nextjs
❯ git remote add origin git@github.com:anytools-app/demo-200stack-nextjs.git
❯ git push origin main

200stackで配信するために最適な設定にする

next.config.ts

next.config.ts を更新してSSGの設定をします。

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  images: {
    // Imageコンポーネントで表示する画像をホストしているサーバーのURL（microCMSを使う場合↓）
    domains: ["images.microcms-assets.io"],
    // 画像の最適化処理を動かさない
    unoptimized: true,
  },
  // export 時に /path/index.html 形式で出力する
  trailingSlash: true,

  // 静的出力
  output: "export",
};

export default nextConfig;

画像の最適化処理は動的サーバー上で動かす必要があるので動かさないようにします。また、trailingSlashをtrueにすることで /path/index.html という形式でファイルが出力されるので、 /path/ というURLでアクセスできます。こうすることで、ローカルで pnpm dev とかで確認している時と、静的出力した後のURLを同じものにできて便利です。trailingSlashを設定しないと /path.html という形式でファイルを出力します。

routing-config.jsonc

routing-config.jsonc は、200stackでリダイレクトやフォワードを処理を行うための設定ファイルです。これをプロジェクトルートに置くことで各種処理を行うことができます。今回は404の設定を行います。

{
  "version": "1",
  "rules": [
  ],
  "notFound": {
    "destination": "/404/index.html",
    "status": 404,
    "htmlOnly": true,
    "enabled": true
  }
}

ここまでで最低限の設定が完了です。この状態で200stackにデプロイします。
これが作成したコードのGitリポジトリです。

ソースコードを準備してGitHubにPushする

200stackで配信するために最適な設定にする

next.config.ts

routing-config.jsonc

200stackとの連携は下記のページを参考にしてください