Zenn
🤖

Next.js v13からv14へのアップデートで遭遇した.envファイル解釈の罠

2024/07/01に公開
Next.js
tech
dotenv
tech

Next.js v13からv14にアップデートした際に遭遇した、dotenvのバージョン違いによる.envファイルの解釈に関する微妙な差異についての小ネタです。

罠の概要

Next.js v13とv14では、内部で使用しているdotenvライブラリのバージョンが異なります。この差異が、.envファイルの解釈に影響を与えていました。

  • Next.js v13: @next/env -> dotenv v10.0.0
  • Next.js v14: @next/env -> dotenv v16.3.1

dotenvの変更点

dotenv v14.0.0で今回の罠に起因する変更がありました。
このバージョンから、.envファイル内での行中の#以降がコメントとして扱われるようになっています。

dotenvのCHANGELOGには、以下のように記載されています：

Breaking: Support inline comments for the parser 🎉 (#568)

Next.js v14では、以下のPRでdotenv v16にアップグレードされたことで反映されています。

feat(env): upgrade dotenv
https://github.com/vercel/next.js/pull/38481

例

この変更がどのように影響するか、具体例を見てみます。
以下のように環境変数でURLハッシュを含む.envファイルがあるとします。

NEXT_PUBLIC_PATH=/signin
NEXT_PUBLIC_HASH_PATH=/#/signin
NEXT_PUBLIC_PATH_WITH_QUOTE="/signin"
NEXT_PUBLIC_HASH_PATH_WITH_QUOTE="/#/signin"

この場合、NEXT_PUBLIC_HASH_PATHの値が、Next.js v13とv14でdotenvのバージョン違いにより異なる解釈をされます。

  • Next.js v13: /#/signin（そのまま解釈）
  • Next.js v14: /（#/signin部分がコメントとして扱われる）

対策

この問題を回避するには、値をクォーテーションで囲むようにしておけば問題ありません。

例えば、NEXT_PUBLIC_HASH_PATH_WITH_QUOTEの値は、v13でもv14でも同じく/#/signinとして解釈されます。

Discussion