Next.jsで静的ビルドしたソースコードをサブディレクトリパスにデプロイする方法

この記事は以前ちょっと株式会社 社員ブログで公開していたものです

こんにちわ、ちょっと株式会社 エンジニアのhanetsukiです。

FTPサーバーやS3、GitHubページなどに静的サイトをデプロイしたい時ってありますよね。
Next.jsやGatsbyなどと言ったフレームワークを用いてデプロイする際に、『CSSや画像が読み込まれない』ということがあるので、その忘備録を残します。

なぜCSSや画像が読み込まれないのか

まず、なぜCSSや画像が読み込まれないのか、

画像は、CSSが当たっていないスクリーンショットです。
コンソールに表示されている通り、404エラーとなっているようです。

CSSファイルがアップされていないのかな？と思いきや、、、

実ファイルはちゃんとアップされているようでした。

ではなぜ、404エラーなのか。

答えはlinkタグにありました。

スクリーンショットを確認すると/next/static/から呼び出そうとしています。

この先頭の/はrootからの絶対パスとなるので、
本来格納されているhttps://example.com/sub-directory/next/static/*ではなく、
https://example.com/_next/static/*からCSSや画像を読み込もうとします。

これでは、404エラーになることも頷けます。

対応方法

Next.jsではnext.config.jsのassetsPrefixとbasePathを追加することで対応ができます。

const isProd = process.env.NODE_ENV === 'production'
const prefixPath = !isProd ? '/sub-derectory' : ''

/** @type {import('next').NextConfig} */
const nextConfig = {
  assetPrefix: prefixPath,
  basePath: prefixPath,
  reactStrictMode: true,
}

module.exports = nextConfig

しかし、上記の設定で対応されるのは

• next/image
• next/link
• 自動生成される/_next/static/*のファイル
  のみで、public/ディレクトリに格納したファイルは対象外となります。

<img src="/example.jpg" alt="">

このようなファイルは、

<img src="/sub-derectory/example.jpg" alt="">

上記のように対応する必要があります。

サブディレクトリの仕様が変更された際に変更対応するのが手間になるので
独自関数やコンポーネントを作成してラップしてあげるのが良いでしょう。