Next.js コンポーネントのimportで相対パスを使う

ツイート
2021年05月17日
2021年05月18日

Absolute Imports and Module path aliasesに記載してありました。

1. jsconfig.json または tsconfig.jsonに設定する

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

2. import文を変更してみる

js
import Pagination from '@/components/pagination'

3. devサーバの再起動

devサーバの再起動しないと、jsconfig.jsonが読み込まれないようです。

自分のもの

json
{ "compilerOptions": { "baseUrl": ".", "paths": { "@/components/*": ["components/*"], "@/lib/*": ["lib/*"], "@/styles/*": ["styles/*"] } }, }