chot Inc.

ちょっと株式会社 社員ブログ
Blog
  • ホーム
  • ブログ
  • Next.jsで静的ビルドしたソースコードをサブディレクトリパスにデプロイする方法

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

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

SHARE

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

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のassetsPrefixbasePathを追加することで対応ができます。

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="">

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

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

たっちー

フロントエンドエンジニア

1995年生まれ。2018年にweb業界に足を突っ込んだ同人イラストレーター。 現在ではフロントエンド領域を生業としながら幅広くwebをカバーしてます。 コーヒーとジャパンサブカルと技術のお話が大好きです。 ちょっと社では「たっちー」の愛称で呼ばれ、SNSでは「hanetsuki」と言う名前で活動しています。

関連記事

Copyright © 2022, chot inc.