
NexjsのApp RouterでSSGでの静的サイトを構築した際の備忘録。

用意して頂いた環境が良くあるレンタルサーバーだったので、SSGで生成したindex.htmlをURLの通り分けたフォルダに置く必要があった。App Routerで作成して無理ならPagesに戻すつもりで進めたら、意外と何とかなった。

[Nextjsのドキュメント | Static Exports](https://nextjs.org/docs/app/building-your-application/deploying/static-exports)

ポイントは以下の通り。

- next.configの設定
  - `output: 'export'` : 静的サイトまたはSPAとしてビルドする設定
  - `trailingSlash: true` : これを設定すると`/path.html`から`/path/index.html` となる。

- pages.tsxの実装
  - `'use client'` : クライアント側で処理を実行する
  - 動的にURLを生成するための`generateStaticParams()`の実装

今回は404ページ対応はあきらめた。ドキュメントにはnginxの設定が載っている。

## next.configの設定

```js:next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  // distDir: 'dist'
  trailingSlash: true,
};

export default nextConfig;
```

### output: 'export'

静的サイトまたはSPAとしてビルドする設定。`next build`を実行するとデフォルトでは`out`ディレクトリに出力される。この`out`の出力をファイルとフォルダ構成そのままホスティングサービスのルートに置けば静的サイトを公開できる。

`out`ではないディレクトリに出力したい場合は`distDir: 'dist'`で書き換えると良い。

### trailingSlash: true

階層のあるページ`/app/path/to/page.tsx`はデフォルトでは`root/path/to.html`のファイルとして出力される。
今回は`/path/to/`のURLにアクセスしたとき、そのフォルダの`index.html`を読むウェブサーバーの設定出るため、`root/path/to/index.html`を出力して欲しい。`trailingSlash: true`の設定だけで切り替わった。

## pages.tsxの実装例

サーバ側はNodeがなくホスティングのみで処理ができないため、`pages.tsx`ファイルの先頭には`'use client'`を明示してクライアント側で処理する。

```tsx:pages.tsx
'use client'

export default function Home() {
  return (
    <>{/* ページのコンテンツ */}</>
  );
}
```

### 動的なページの場合

お知らせの記事`/news/[slug]/`のようにページを動的に作るときの書き方。

`'use client'`は書かない。`generateStaticParams()`の関数で`slug`にあたる文字列のリストを作って渡す。

```tsx:/news/[slug]/page.tsx
// 'use client'は不要。`generateStaticParams()`と競合する。

type Props = {
  params: {
    slug: string;
  };
};

export default function NewsDetail({ params }: Props) {
  return (
    <>{/* ページのコンテンツ */}</>
  );
}

export async function generateStaticParams() {
  const newsList = [{ slug: '2021-01-01' }, { slug: '2021-01-02' }]; // 記事の一覧を取得する処理
  // 静的なパラメータの配列を返す
  return newsList.map((news) => ({
    slug: news.slug,
  }));
}
```

この書き方では、以下の通りslugがnews配下のフォルダとなってそこにindex.htmlができる。

```txt
/
|- news/
   |- 2021-01-01/
      |- index.html
   |- 2021-01-02/
      |- index.html
```


Nextjs App Router での静的サイトのための設定と実装