Published on

nextjsで絶対パスインポートする方法

Authors
  • avatar
    Name
    ssu
    Twitter

next.jsで、コンポーネントやhooksなどをimportする際に、絶対パスやエイリアスを利用する方法を紹介します。

とても、シンプルでtypescriptの場合はtsconfig.jsonでjavascriptを使っている場合は、jsconfig.jsonで次のように、指定するとできます。

// tsconfig.json or jsconfig.json { "compilerOptions": { "baseUrl": ".", "paths": { "@/components/*": ["components/*"] } } }

順を追って説明すると、 まず基準となるpathを"baseUrl": "."で指定します。

次に、特定のpathからのimportを

"paths": { "@/components/*": ["components/*"] }

のように指定できます。そうすると、上の例だと"components/"のディレクトにあるものをimportする際は@/components/というエイリアスが使えるようになり、絶対パスでインストールすることができます。

参考: module-path-aliases