- Published on
nextjsで絶対パスインポートする方法
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/
というエイリアスが使えるようになり、絶対パスでインストールすることができます。