🔗

Next.jsで絶対パスを使う方法

2021/05/15に公開

Next.js

tech

はじめに

今現在私は Next.js でブログサイトを作成しながら学習しているのですが、先日相対パス → 絶対パスへ変更したので方法等をご紹介します。

パッと見たときにディレクトリの階層がわかりやすいですし、パスの指定を間違えてエラーの起因となるのを防ぐことができるので是非設定してみて下さい。

絶対パスで指定する方法

「jsconfig.json」(TypeScript の場合は「tsconfig.json」)ファイルを作成し、以下の内容を記述します。

jsconfig.json

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

これによって「jsconfig.json」がいる階層がベースとなります。

components/button.js

export default function Button() {
  return <button>Click me</button>
}

pages/index.js

+  import Button from 'components/button'  //componentsから指定が可能
-  import Button from '../components/button'  //「../」から記述が必要

export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  )
}

ベースとなるディレクトリから指定していくので見た目もよくなったと思います。

さいごに

VSCode で import する場合パスを補完してくれますが、通常の設定だと「相対パス」になってしまいます。その補完を「絶対パス」に設定する VSCode の設定もありますので、時間がある際に追記したいと思います。

参考

GitHubで編集を提案

はじめに

絶対パスで指定する方法

さいごに

参考

Discussion