2022-09-02

next.config.jsの設定

Static HTML Export

デプロイ先を Vercel ではなく、Static HTML Export で HTML を書き出して、契約しているサーバー上にアップロードして、アクセスしてみたら…

（ローカル環境では問題なかったのに）CSS は適用されていないし、個別ページに遷移してみたら、404 エラーに…

その時の next.config.js ファイルは、以下の様な設定でした。

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

module.exports = nextConfig;

assetPrefix

NextJS で CSS が適用されないとかでググってみると、asssetPrefix を設定するといいよ〜という記事がいくつかあったので、早速試してみる事に。

/** @type {import('next').NextConfig} */
const nextConfig = {
  assetPrefix: "/blog",
  reactStrictMode: true,
  trailingSlash: true,
};

module.exports = nextConfig;

これでアクセスしてみたら、CSS は適用されたんですが、個別ページに遷移してみると、また 404 エラーに…

個別ページの URL を確認してみると、（ドメイン名/posts/個別記事のパス/）となっていました。

本当はドメイン名の後に、/blog が入るんですが、それが抜けてしまっている…

こうなって欲しい！→（ドメイン名/blog/posts/個別記事のパス/）

assetPrefix を設定すると、ルートの URL も変わってくれるという記事もみたんですが、NextJS のバージョンが上がった際に変更でもあったのか、自分の環境だと上手く行きませんでした。

ちなみに assetPrefix を以下の様に設定する記事も見たのですが、CSS は適用されても、個別ページに遷移したら同じく 404 エラーになりました。

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

module.exports = nextConfig;

basePath

Base Path

リファレンスを見ていたら、basePath を使えば良さそうかな？　と思ったので、試してみました。

/** @type {import('next').NextConfig} */
const nextConfig = {
  basePath: "/blog",
  reactStrictMode: true,
  trailingSlash: true,
};

module.exports = nextConfig;

これでアクセスしてみると、CSS もきちんと適用されているし、個別ページにアクセスしてみても、404 エラーは出ませんでした。

という訳で、assetPrefix の記述は削除しました。

<script
  src="/blog/_next/static/chunks/webpack-XXXXXXXXXXXXXXX.js"
  defer=""
></script>

basePath の指定をすると、script タグの src の_next フォルダへのパスに、/blog が自動的に付与されていました。

images

個別ページにアクセスしてみた際、アイキャッチ画像や favicon も表示されていませんでした。（ちなみに favicon は、トップページでも表示されていない…）

リファレンス（BasePath のページ）を見てみると、next/image コンポーネントを使っている時は、src に basePath に設定した値を付与する必要があるみたいですが、今回は next/image コンポーネントは使っていない（Static HTML Export）ので、src に basePath は設定していません。

favicon の設定は components フォルダ内に meta.js ファイルを作成し、そこに以下のような記述をし、layout.js 側で読み込んでいます。

<link
  rel="icon"
  type="image/png"
  sizes="16x16"
  href="/favicons/favicon-16x16.png"
/>

トップページや個別ページで（meta.js を）各々読み込んで、相対パスで設定するのもなぁ…と思ったので、

<link
  rel="icon"
  type="image/png"
  sizes="16x16"
  href="https://flabaka.com/blog/favicons/favicon-16x16.png"
/>

絶対パスに変更してみると、favicon もきちんと適用されました。

hero_image: "/assets/nextjs_config_js.png"

アイキャッチへのパスは、markdown に設定してあります。

Static HTML Export で書き出されたフォルダ構成を見てみると、パスを以下の様にすれば良さそうでした。

hero_image: "../../assets/nextjs_config_js.png"

ですが、この値を og:image の設定にも使っているので、こちらも絶対パスに変更しました。

ひとまずこれで CSS や画像関連は表示される様になりましたが、他にいい方法はないか今後も探って行きたいと思います。

next.config.jsの設定

目次

Static HTML Export

assetPrefix

basePath

images