Next.js(React)にて絶対パスでimportする方法

Next.js(React)では、デフォルトだとコンポーネントなどを相対パスでimportするようになっています。
本記事では、Next.jsにて絶対パスでimportする方法を解説しています。

jsconfig.json(tsconfig.json)で設定する

Next.jsのjsconfig.jsonに下記の設定を追加します。（※TypeScriptの場合はtsconfig.jsonです。）

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "."
  },
}

baseUrlにオプションを設定することで、絶対パスでimportすることができます。

index.tsx

// import Layout from '../components/layout/Layout'
import Layout from 'components/layout/Layout' // 絶対パスで指定

const Home = () => {
  return (
    <>
      <Layout />
    </>
  )
}

export default Home

Visual Studio Code(VSCode)にて自動で絶対パスをimportする

VSCodeではコンポーネントなどを記述する際に自動でimportしてくれる機能があります。
自動importを絶対パスにするには、VSCodeの設定を変更します。

設定を開いて下記の画像のようにJavaScript › Preferences: Import Module Specifierをnon-relativeに設定します。

上記の設定をすることでbaseUrlに基づいてimportをしてくれるようになります。

ちなみにVSCodeではjsonファイルで設定を管理することもできます。
.vscodeディレクトリのsettings.jsonファイルで管理します。

settings.json

{
  "javascript.preferences.importModuleSpecifier": "non-relative"
}

最後に

本記事ではNext.jsにて絶対パスでimportする方法を解説してきました。
プロジェクトが大きくなり、ディレクトリの階層が深くなる場合などは絶対パスの方が便利かなと思います。