🤿

tsconfig.json の baseUrl

2024/04/09に公開

Next.js

TypeScript

tech

概要

baseUrl を利用することで tsconfig.json ファイルを含んでいるディレクトリをルートディレクトリとして相対パスでファイルにアクセスできます。

簡易例

このようなフォルダ構成があるとします。

.
├── src
│   ├── app
│   │   └── page.tsx
│   └── components
│       └── hello-world-button.tsx
└── tsconfig.json

baseUrl の値を . に設定すると、tsconfig.json ファイルを含んでいるディレクトリをルートディレクトリとして相対パスでファイルにアクセスできます。

tsconfig.json

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

page.tsx から hello-world-button.tsx にアクセスする場合、src/components/hello-world-button と記述することでアクセスできます。

src/app/page.tsx

import { type FC } from "react";

// `baseUrl`が`.`の場合
import HelloWorldButton from "src/components/hello-world-button";

const Home: FC = () => {
 return (
   <div>
     <HelloWorldButton />
   </div>
 );
};

export default Home;

baseUrl の値を ./src に設定すると、tsconfig.json ファイルを含んでいるディレクトリをルートディレクトリとして相対パスでファイルにアクセスできます。

tsconfig.json

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

page.tsx から hello-world-button.tsx にアクセスする場合、components/hello-world-button と記述することでアクセスできます。

src/app/page.tsx

import { type FC } from "react";

// `baseUrl`が`./src`の場合
import HelloWorldButton from "components/hello-world-button";

const Home: FC = () => {
 return (
   <div>
     <HelloWorldButton />
   </div>
 );
};

export default Home;

Next.jsの設定考察

create next-app で作成した Next.js プロジェクトで baseUrl が設定されていません。必要に応じて変更しましょう。基本的には baseUrl は ./ を設定し tsconfig.json を含んでいるディレクトリをルートディレクトリとして相対パスでファイルへアクセスできるようにします。

tsconfig.json

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

VSCodeの設定考察

VSCode の観点から tsconfig.json に baseUrl を設定すると、環境にもよりますが、ファイルへのアクセスがしやすくなります。

例えば、baseUrl が設定されていない場合は以下のようになります。

alt text

baseUrl が . に設定されている場合はサジェストで出るようになります。

alt text

便利上の観点から baseUrl を設定することをおすすめします。

参考

公式の説明はこちらです。

以下が作業リポジトリです。

この記事の内容

この記事では baseUrl の値を指定し動作を確認します。Next.js のプロジェクトで動作確認を行います。

Next.jsのプロジェクトで動作確認

Next.js のプロジェクトを作成し、baseUrl の値を指定し動作確認します。

事前環境の構築

動作を作業するための Next.js プロジェクトを作成します。長いので、折り畳んでおきます。

新規プロジェクト作成と初期環境構築の手順詳細

プロジェクトを作成

create next-app@latestでプロジェクトを作成します。

$ pnpm create next-app@latest next-tsconfig-baseurl --typescript --eslint --import-alias "@/*" --src-dir --use-pnpm --tailwind --app
$ cd next-tsconfig-baseurl

Peer Dependenciesの警告を解消

Peer dependenciesの警告が出ている場合は、pnpm installを実行し、警告を解消します。

 WARN  Issues with peer dependencies found
.
├─┬ autoprefixer 10.0.1
│ └── ✕ unmet peer postcss@^8.1.0: found 8.0.0
├─┬ tailwindcss 3.3.0
│ ├── ✕ unmet peer postcss@^8.0.9: found 8.0.0
│ ├─┬ postcss-js 4.0.1
│ │ └── ✕ unmet peer postcss@^8.4.21: found 8.0.0
│ ├─┬ postcss-load-config 3.1.4
│ │ └── ✕ unmet peer postcss@>=8.0.9: found 8.0.0
│ └─┬ postcss-nested 6.0.0
│   └── ✕ unmet peer postcss@^8.2.14: found 8.0.0
└─┬ next 14.0.4
  ├── ✕ unmet peer react@^18.2.0: found 18.0.0
  └── ✕ unmet peer react-dom@^18.2.0: found 18.0.0

以下を実行することで警告が解消されます。

$ pnpm i -D postcss@latest react@^18.2.0 react-dom@^18.2.0

不要な設定を削除し、プロジェクトを初期化します。

styles

CSSなどを管理するstylesディレクトリを作成します。globals.cssを移動します。

$ mkdir -p src/styles
$ mv src/app/globals.css src/styles/globals.css

globals.cssの内容を以下のように上書きします。

src/styles/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

初期ページ

app/page.tsxを上書きします。

src/app/page.tsx

import { type FC } from "react";

const Home: FC = () => {
  return (
    <div className="">
      <div className="text-lg font-bold">Home</div>
      <div>
        <span className="text-blue-500">Hello</span>
        <span className="text-red-500">World</span>
      </div>
    </div>
  );
};

export default Home;

レイアウト

app/layout.tsxを上書きします。

src/app/layout.tsx

import "@/styles/globals.css";
import { type FC } from "react";
type RootLayoutProps = {
  children: React.ReactNode;
};

export const metadata = {
  title: "Sample",
  description: "Generated by create next app",
};

const RootLayout: FC<RootLayoutProps> = (props) => {
  return (
    <html lang="ja">
      <body className="">{props.children}</body>
    </html>
  );
};

export default RootLayout;

TailwindCSSの設定

TailwindCSSの設定（tailwind.config.ts）を上書きします。

tailwind.config.ts

import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  plugins: [],
}
export default config

TypeScriptの設定

TypeScriptの初期設定はこちらです。

tsconfig.json

{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

スクリプトを追加

型チェックのスクリプトを追加します。

package.json

{
  "name": "next-tsconfig-include",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
+   "typecheck": "tsc"
  },
  "dependencies": {
    "next": "14.1.4"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.1.4",
    "postcss": "^8.4.38",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}

動作確認

ローカルで動作確認します。

$ pnpm run dev

コミットして作業結果を保存しておきます。

$ git add .
$ git commit -m "feat:新規にプロジェクトを作成し, 作業環境を構築"

`baseUrl` の値を設定しない場合

baseUrl を設定しない場合、ファイルにアクセスするためには対象ファイルからの相対パスを指定する必要があります。

baseUrl の動作確認するためのコンポーネントを作成し、baseUrl の値を設定しない場合の動作確認を行います。

$ mkdir -p src/components
$ touch src/components/hello-world-button.tsx

src/components/hello-world-button.tsx

import { type FC } from "react";

const HelloWorldButton: FC = () => {
  return (
    <button className="bg-orange-600 py-2 px-3 rounded-lg text-white hover:bg-orange-600/90">
      Hello Universe
    </button>
  );
};

export default HelloWorldButton;

フォルダ構成を確認します。

$ tree -I "node_modules|README.md|next-env.d.ts|next.config.mjs|pnpm-lock.yaml|postcss.config.js|package.json|public|tailwind.config.ts"
.
├── src
│   ├── app
│   │   ├── favicon.ico
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── components
│   │   └── hello-world-button.tsx
│   └── styles
│       └── globals.css
└── tsconfig.json

5 directories, 6 files

page.tsx に HelloWorldButton コンポーネントを追加します。baseUrl は設定していません。よって、hello-world-button.tsx にアクセスするには相対パスとして ../components/hello-world-button と指定します。baseUrl の値にかかわらず、相対パスでファイルにアクセスできます。

src/app/page.tsx

import { type FC } from "react";

+// `baseUrl`が`.`の場合は動作する
+// import HelloWorldButton from "src/components/hello-world-button";

+// `baseUrl`が`./src`の場合は動作する
+// import HelloWorldButton from "components/hello-world-button";

+// `baseUrl`の値にかかわらず動作する
+import HelloWorldButton from "../components/hello-world-button";

const Home: FC = () => {
  return (
    <div className="">
      <div className="text-lg font-bold">Home</div>
      <div>
        <span className="text-blue-500">Hello</span>
        <span className="text-red-500">World</span>
      </div>
+     <HelloWorldButton />
    </div>
  );
};

export default Home;

動作確認をします。無事動いています。

$ pnpm run dev

Alt text

コミットします。

$ git add .
$ git commit -m "baseUrlの値を設定しない場合"

`baseUrl` に `.` を設定する場合

baseUrl に . を設定した場合、tsconfig.json ファイルを含んでいるディレクトリをルートディレクトリとして相対パスでファイルにアクセスできます。

tsconfig.json の baseUrl に . を設定します。ちなみに、. と ./ は同じ意味です。

tsconfig.json

{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
+   "baseUrl": ".",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

baseUrl が . であっても、../components/hello-world-button でファイルにアクセスできます。

動作確認をします。無事動いています。

$ pnpm run dev

Alt text

baseUrl が . の場合、tsconfig.json ファイルを含んでいるディレクトリをルートディレクトリとして相対パスでファイルにアクセスできます。よって、hello-world-button.tsx への相対パスは src/components/hello-world-button となります。

src/app/page.tsx

import { type FC } from "react";

// `baseUrl`が`.`の場合は動作する
-// import HelloWorldButton from "src/components/hello-world-button";
+import HelloWorldButton from "src/components/hello-world-button";

// `baseUrl`が`./src`の場合は動作する
// import HelloWorldButton from "components/hello-world-button";

// `baseUrl`の値にかかわらず動作する
-import HelloWorldButton from "../components/hello-world-button";
+//import HelloWorldButton from "../components/hello-world-button";

const Home: FC = () => {
  return (
    <div className="">
      <div className="text-lg font-bold">Home</div>
      <div>
        <span className="text-blue-500">Hello</span>
        <span className="text-red-500">World</span>
      </div>
      <HelloWorldButton />
    </div>
  );
};

export default Home;

動作確認をします。無事動いています。

$ pnpm run dev

Alt text

コミットします。

$ git add .
$ git commit -m "baseUrlの値を.に変更"

`baseUrl` に `./src` を設定する場合

baseUrl の値を ./src に変更します。これで、src の記載を省略できます。

tsconfig.json

{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
-   "baseUrl": ".",
+   "baseUrl": "./src/",
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

baseUrl は ./src です。tsconfig.json ファイルを含んでいるディレクトリをルートディレクトリとなります。hello-world-button.tsx への相対パスは components/hello-world-button となります。

src/app/page.tsx

import { type FC } from "react";

// `baseUrl`が`.`の場合は動作する
-import HelloWorldButton from "src/components/hello-world-button";
+// import HelloWorldButton from "src/components/hello-world-button";

// `baseUrl`が`./src`の場合は動作する
-// import HelloWorldButton from "components/hello-world-button";
+import HelloWorldButton from "components/hello-world-button";

// `baseUrl`の値にかかわらず動作する
// import HelloWorldButton from "../components/hello-world-button";

const Home: FC = () => {
  return (
    <div className="">
      <div className="text-lg font-bold">Home</div>
      <div>
        <span className="text-blue-500">Hello</span>
        <span className="text-red-500">World</span>
      </div>
      <HelloWorldButton />
    </div>
  );
};

export default Home;

動作確認をします。無事動いています。

$ pnpm run dev

Alt text

コミットします。

$ git add .
$ git commit -m "baseUrlの値を./srcに変更"

Next.jsの設定考察

tsconfig.json

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

VSCode

VSCode の観点から tsconfig.json に baseUrl を設定すると、環境にもよりますが、ファイルへのアクセスがしやすくなります。

例えば、baseUrl が設定されていない場合は以下のようになります。

alt text

baseUrl が . に設定されている場合はサジェストで出るようになります。

alt text

便利上の観点から baseUrl を設定することをおすすめします。

まとめ

この記事では、baseUrl の値を変更し、動作を確認しました。baseUrl を利用することで tsconfig.json ファイルを含んでいるディレクトリをルートディレクトリとして相対パスでファイルにアクセスできます。

概要

簡易例

Next.jsの設定考察

VSCodeの設定考察

参考

この記事の内容

Next.jsのプロジェクトで動作確認

事前環境の構築

プロジェクトを作成

Peer Dependenciesの警告を解消

styles

初期ページ

レイアウト

TailwindCSSの設定

TypeScriptの設定

スクリプトを追加

動作確認

baseUrl の値を設定しない場合

baseUrl に . を設定する場合

baseUrl に ./src を設定する場合

Next.jsの設定考察

VSCode

まとめ

Discussion

`baseUrl` の値を設定しない場合

`baseUrl` に `.` を設定する場合

`baseUrl` に `./src` を設定する場合