Next.jsアプリケーションのサブディレクトリホスティングとNginx設定

Next.jsアプリケーションをホスティングする際、多くの場合はホストのルートディレクトリを使用します。しかし、特定の状況下では、アプリケーションをサブディレクトリに配置したり、Nginxを用いて設定を行いたい場合もあります。

この記事では、そのような特殊なホスティング環境でNext.jsアプリケーションを適切に動作させるための設定方法を紹介します。

主原因

ルート配下に存在するJSやCSSが保存されたフォルダ /_next/ へのPathが、適切に設定されていないことが問題です。そのため、Next.jsのデフォルトの設定と補助的なコードで、それらのPathを適切に設定し、問題なくホスティングできるようにします。

基本設定

まずは、基本的な設定をnext.config.jsに記述します。開発環境とそれ以外の環境でbasePathとassetPrefixを切り替えることで、開発時はルートディレクトリを、それ以外の環境ではサブディレクトリやNginxを使用します。

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

  basePath:
    process.env.NODE_ENV === "development" ? undefined : "/subDirectory", // Sub directory
  assetPrefix: process.env.NODE_ENV === "development" ? undefined : "/Nginx/", // Nginx
};

module.exports = nextConfig;

Publicディレクトリのファイルの取り扱い

次に、Publicディレクトリ内のファイルを適切に取り扱うための関数を作成します。この関数を通じて、Publicディレクトリ内のファイルをすべて使用します。

以下に、その関数を定義したget-public-path.ts (任意のファイル) の内容を示します。

// get-public-path.ts
import config from "../../next.config.js";

export function getPublicPath(filename: string): string {
  let base = "";
  if (config.basePath) {
    base = config.basePath;
  } else if (config.assetPrefix) {
    base = config.assetPrefix;
  }

  if (base !== "") {
    return `${base}/${filename}`;
  } else {
    return filename;
  }
}

この関数を使用することで、開発環境とそれ以外の環境で適切なパスを取得できます。以下にその使用例を示します。

// test.jsx
import { getPublicPath } from "../get-public-path";
console.log(getPublicPath("/test.png"))

これで、ホスティング関連のPathの設定が容易になると思います。