Next.js (AppRouter) で環境(env)の値をSCSSの変数に渡す方法

Next.jsのenvに設定された値をSCSSの変数に渡して利用する方法を紹介します。

next.config.js の設定

// next.config.js
module.exports = {
  sassOptions: {
    additionalData: `$base_path: '${process.env.SITE_BASE_PATH}';`
  }
};

上記のコードは、Next.jsの設定ファイルに追加することで、環境変数 SITE_BASE_PATH を全ての SCSS ファイルで利用可能な SCSS 変数 $base_path として設定します。

envにSITE_BASE_PATHが設定されている想定のサンプルコードです。SITE_BASE_PATHには/hoge のような値が入ります。

globals.scss の設定

// app/globals.scss
:root {
  --icon-arrow: url(#{$base_path}/assets/icon/arrow.svg);
}

この設定では、SCSS 変数 $base_path を CSS 変数 –icon-arrow に組み込みます。これにより、CSS 変数を介して環境依存のパスを効率的に管理できます。

注意としては、next.config.jsで設定した変数はnext.jsで読み込まれるファイルに限定されます。なので、このapp/globals.scss なら使用できるのでここで使いましょう。

使用方法

.example {
  background-image: var(--icon-arrow);
}

CSSの変数を先ほど定義したのでそれをvarを使い利用するだけです。

これでCSS Moduleを使用したSCSSファイル内でも値を引き出すことができます。

まとめ

この記事では、Next.js プロジェクトで環境変数から直接 SCSS および CSS 変数を設定する簡潔な方法を示しました。この設定を利用することで、プロジェクトのメンテナンス性が向上し、環境に依存するパスを柔軟に扱うことが可能になります。