【Next.js】モノレポでのパス解決の問題

こんにちは、フリーランスエンジニアの太田雅昭です。

モノレポ

モノレポは関心の分離などの観点からも、とても便利です。ただ色々問題に直面することも多いかと思います。今回はNext.jsでのパス解決の問題に関してです。

パスエイリアスが効かない

多くの場合、tsconfig.jsonでパスエイリアスを設定します。たとえばpackage1で以下のようにするとします。

"compilerOptions": {
    "paths": {
        "@/*": [
            "./src/*"
        ]
    }
}

ところがNext.jsはこの解決ができません。package1から見た@/は、Next.jsから見た@/とみなされてしまいます。

// nextでエラーになる。Can't resolve '@/Test2'
// import { Test2 } from "@/Test2";

// nextでもエラーにならない
import { Test2 } from "../Test2";

export function Test1() {
    return <Test2 />
}

このように、相対パスで実装しないと、Next.jsでは使えません。