NextJS の import のパスについて

最終更新日:

@import で指定しているパスは一体どこを指しているのか調べる。

環境

  • NextJS 15
  • TypeScript

はじめに

まずは NextJS をチュートリアル通りにインストールしてみる。

$ /path/to/your-product
$ npx create-next-app@latest
What is your project named? app
Would you like to use TypeScript? No / Yes ← Yes
Would you like to use ESLint? No / Yes ← Yes
Would you like to use Tailwind CSS? No / Yes ← No
Would you like to use `src/` directory? No / Yes ← Yes
Would you like to use App Router? (recommended) No / Yes ← Yes
Would you like to customize the default import alias (@/*)? No / Yes ← No
What import alias would you like configured? @/*

作成されたファイルを見てみる

「./」がついていれば相対パスとなって、
そのファイルから見てどこにあるかを指してる。

先頭に何もついてなければ node_modules を見ている。

/src/app/layout.tsx

import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css" // /src/app/globals.css を指している。

/src/app/page.tsx

import Image from "next/image"
import styles from "./page.module.css" // /src/app/page.module.css を指している。

絶対パス

作成したファイルを import で指定する時に、
絶対パスで指定したい場合、まず tsconfig.json の内容を見る。

tsconfig.json

関係のある所だけ抜粋。

{
  "compilerOptions": {
    "paths": {
      "@/*": [
        "./src/*"
      ]
    },
  },
  ...
}

「@/」と記述すれば「"./src/"」を指す。
ということらしい。
src は tsconfig.json と同じ階層にある。

/src/app/layout.tsx

つまり、

import "./globals.css"

は、

import "@/app/globals.css"

と書き換えれる。

ここで聞かれてた

はじめのインストール時に、適当に Yes や No で答えてた所で、
擬似的な絶対パス（エイリアス）についてどうすべきか聞かれてた。

$ npx create-next-app@latest
...
Would you like to customize the default import alias (@/*)? No / Yes ← No
What import alias would you like configured? @/*

もっと細かくパスを指定したい時

下記参考。