Zenn
⚛️

Next.js(pages router)でSSGする時の設定

2024/07/28に公開
Next.js
React
SSG
tech

SSGのための設定

バックエンドがPHPとPerlしか使えないWebサーバにReactで作ったWebサイトをデプロイする機会が多いので、ファイルシステムルーティングで、SSGもできて、情報豊富なNext.jsはとても重宝しています。その際の設定を記録しておきます。
App Router登場後は、色々あるみたいですが。。。

next.config.jsの設定

buildコマンドに「next export」を追加(非推奨になっている)

// package.json
"scripts": {
    "build": "next build && next export",
},

代わりにnext.config.jsに下記の設定を付けて、next buildをすればよい

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  output: 'export',
 
  // Optional: Change links `/me` -> `/me/` and emit `/me.html` -> `/me/index.html`
  // trailingSlash: true,
 
  // Optional: Prevent automatic `/me` -> `/me/`, instead preserve `href`
  // skipTrailingSlashRedirect: true,
 
  // Optional: Change the output directory `out` -> `dist`
  // distDir: 'dist',
}
 
module.exports = nextConfig

サブディレクトリにデプロイ

CSSやJavaScriptの読込み設定

prodution用にbuildしたときだけ、pathにサブディレクトリをprefixする。

// next.config.js
const isProd = process.env.NODE_ENV === "production";

const nextConfig = {
	assetPrefix: isProd ? "/pre" : "",
}

Imageコンポーネント

next exportではImageコンポーネントの画像最適化がサポートされてなく、エラーになる。
そこでまず、イメージ最適化を無効にする。

また、プロダクション用に書き出した時にPathにサブディレクトリをつけるための設定。

// next.config.js
const nextConfig = {
	// 画像最適化オフ
	images: {
		unoptimized: true,
	},

	// コンポーネントから取得可能な値を設定しておく
	publicRuntimeConfig: {
		basePath: isProd ? "/pre" : "",
	}
}

コンポーネントから、basePathの値を取得し、Imagaコンポーネントのsrc属性に接頭する。

import Image from "next/image";
import getConfig from "next/config";

const { publicRuntimeConfig } = getConfig();
const basePath = publicRuntimeConfig?.basePath || "";

export const Component = () => {
	return(
		<Image src={`${basePath}/img/foo.png`} />
	)
}

Linkコンポーネント

Imageコンポーネントと考え方は同じで、as属性を使用する。

<Link href="/hoge/fuga" as={`${basePath}/hoge/fuga`}>text</Link>

next buildでSSGした際に、リロードしても404にならないRoutingの設定

pages/index.tsx
pages/about.tsx
上記のような構成でnext buildでSSGすると下記のようなディレクトリ構造になるらしい。

out
|- index.html
|- about.html

これをそのままhostingすると /about => /about/index.html にルーティングするので404になる。

next.config.jsの設定

// next.config.js
const nextConfig = {
	trailingSlash: true,
}

上記設定をすると、下記のようにファイルが生成されるようになる。

out
|- index.html
|- about
   |- index.html

参考記事

https://zenn.dev/mattak/articles/6880e5b8f02ee5

Discussion