Next.js 16 で lucide-static の SVG 参照が壊れた話（Turbopack 対応）

こんにちは、 wand です！

このたび、当ブログのフロントエンドを Next.js 15 から Next.js 16 にバージョンアップしました。
大きな破壊的変更は少ない印象だったのですが、実際に移行してみると ビルド時に思わぬエラーに遭遇しました。

結論から言うと、Turbopack がデフォルトになったことによる、CSS 内 SVG 参照パスの解決方法の違いが原因でした。

同じように lucide-static を使っている人がハマりそうなのですが、2026/1/31 執筆時点では日本語・英語ともに情報が見当たらなかったため、備忘録も兼ねてまとめます。

Next.js 16 で何が変わったのか

Next.js 16 の大きな変更点のひとつが、バンドラがデフォルトで Turbopack になったことです。

• Next.js 15.3
  • デフォルト: Webpack
  • --turbopack フラグを付けることで Turbopack を利用可能 (アルファ版機能)
• Next.js 16
  • デフォルト: Turbopack
  • --webpack フラグを付けることで Webpack を利用可能

つまり、バンドラを明示していなかった場合、Webpack から Turbopack に切り替わったということになります。

前提：lucide-static の SVG を CSS の url() で参照している

このブログでは、

これは info です。

のような表示を行う際、アイコン画像として lucide-static の SVG を CSS の url() 経由で参照しています。

mask-image: url(~lucide-static/icons/info.svg);

この書き方は、Lucide の公式ドキュメントにも記載されている Webpack ビルド前提の方法です。

Webpack ビルドでは、node_modules 配下のパッケージを CSS から参照する際、
パスの先頭に ~ を付けることでモジュールとして解決されます。

逆に、~ を付けない場合は相対パスとして解釈され、次のようなビルドエラーになります。

mask-image: url(lucide-static/icons/info.svg);

Error: Cannot find module './lucide-static/icons/info.svg'

Turbopack での挙動

ところが、Turbopack ではこの書き方がそのまま通用しません。

❌ Turbopack で ~ 付きパス

mask-image: url(~lucide-static/icons/info.svg);

この場合、次のエラーが発生しました。

Module not found: Can't resolve '~lucide-static/icons/info.svg'

✅ Turbopack では ~ を外す

Turbopack 環境では、~ を付けずにそのまま指定すると解決します。

mask-image: url(lucide-static/icons/info.svg);

Webpack とは真逆の挙動となりました。

補足：url imports は実験的機能

今回扱っている、CSS の url() 経由でモジュールを解決する url imports は、2026/1/31 執筆時点では実験的な機能とされています。

公式ドキュメントでも次のように注意書きされており、今後挙動が変更される可能性があります。

This feature is currently experimental and subject to change, it's not recommended for production.

まとめ

Webpack と Turbopack での挙動の違いを表にまとめると、次のようになります。

Next.js 15 → 16 への移行で、

• CSS 内で SVG やその他画像を参照している
• node_modules 配下のアセットを使っている
• 突然「Module not found」が出始めた

という場合は、パス先頭の ~ を一度疑ってみてください。

同じところでハマる人の助けになれば幸いです。