🐼

tsconfig.json の paths

2024/04/10に公開

Next.js

TypeScript

tech

概要

paths を利用することでエイリアスを利用しファイルへアクセスできます。

簡易例

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

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

5 directories, 6 files

paths で @/* に ./src/* を設定することで @/ で src ディレクトリへアクセスできるようになります。

tsconfig.json

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

これにより @/ で src ディレクトリへアクセスできるようになります。

src/app/page.tsx

import { type FC } from "react";

// `paths`の`@/`に`./src/*`を設定した場合
import HelloWorldButton from "@/components/hello-world-button";

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

export default Home;

Next.jsの設定考察

create next-app で作成した Next.js プロジェクトで paths は設定されています。必要に応じて変更しましょう。個人的にはエイリアスの管理を簡素化させるために @/* だけ設定すれば十分だと思ってます。@components/* や @styles/* などの要素ごとのエイリアスを設定すると管理が煩雑になる可能性があるためです。

tsconfig.json

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

参考

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

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

この記事の内容

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

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

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

事前環境の構築

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

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

プロジェクトを作成

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

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

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:新規にプロジェクトを作成し, 作業環境を構築"

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

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

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

tsconfig.json の paths を削除します。

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"]
}

動作確認するコンポーネント作成します。

$ 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 コンポーネントを追加します。paths は設定していません。よって、hello-world-button.tsx にアクセスするには相対パスとして ../components/hello-world-button と指定します。

src/app/page.tsx

import { type FC } from "react";

// `paths`の`@components/`に`./src/components/*`を設定した場合
// import HelloWorldButton from "@components/hello-world-button";

// `paths`の`@/`に`./src/*`を設定した場合
// import HelloWorldButton from "@/components/hello-world-button";

// `paths`に値を設定しない
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;

また、layout.out は上書きします。

src/app/layout.tsx

// `paths`の`@styles/`に`./src/styles/*`を設定した場合
// import "@styles/globals.css";

// `paths`の`@/`に`./src/*`を設定した場合
// import "@/styles/globals.css";

// `paths`に値を設定しない
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;

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

$ pnpm run dev

Alt text

コミットします。

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

`paths` に値を設定する場合

paths を利用しコンポーネントにエリアスを利用してアクセスします。

paths の値を設定します。@/* に ./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,
    "plugins": [
      {
        "name": "next"
      }
    ],
+   "paths": {
+     "@/*": ["./src/*"]
+   }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

page.tsx を修正します。今回設定した paths の内容により、@/ で src ディレクトリへアクセスできるようになります。hello-world-button.tsx への相対パスは @/components/hello-world-button となります。

src/app/page.tsx

import { type FC } from "react";

// `paths`の`@components/`に`./src/components/*`を設定した場合
// import HelloWorldButton from "@components/hello-world-button";

// `paths`の`@/`に`./src/*`を設定した場合
-// import HelloWorldButton from "@/components/hello-world-button";
+import HelloWorldButton from "@/components/hello-world-button";

// `paths`に値を設定しない
-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;

layout.tsx を修正します。

src/app/layout.tsx

+// `paths`の`@styles/`に`./src/styles/*`を設定した場合
+// import "@styles/globals.css";

+// `paths`の`@/`に`./src/*`を設定した場合
-// import "@/styles/globals.css";
+import "@/styles/globals.css";

+// `paths`に値を設定しない
-import "../styles/globals.css";
+// 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;

動作確認をします。無事アクセスできました。

$ pnpm run dev

Alt text

コミットします。

$ git add .
$ git commit -m "pathsの値を設定する場合"

続いて、コンポーネント専用のエイリアスを追加します。

paths にコンポーネント専用のエイリアスとして @components を追加します。あと、スタイル専用のエイリアスとして @styles を追加します。

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/*"],
+     "@components/*": ["./src/components/*"],
+     "@styles/*": ["./src/styles/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

page.tsx を修正します。エイリアスを @/ から @components に変更します。

src/app/page.tsx

import { type FC } from "react";

// `paths`の`@components/`に`./src/components/*`を設定した場合
-// import HelloWorldButton from "@components/hello-world-button";
+import HelloWorldButton from "@components/hello-world-button";

// `paths`の`@/`に`./src/*`を設定した場合
-import HelloWorldButton from "@/components/hello-world-button";
+// import HelloWorldButton from "@/components/hello-world-button";

// `paths`に値を設定しない
//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;

layout.tsx を修正します。エイリアスを @/ から @styles に変更します。

src/app/page.tsx

+// `paths`の`@styles/`に`./src/styles/*`を設定した場合
-// import "@styles/globals.css";
+import "@styles/globals.css";

+// `paths`の`@/`に`./src/*`を設定した場合
-import "@/styles/globals.css";
+// import "@/styles/globals.css";

+// `paths`に値を設定しない
+// 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;

動作確認をします。無事アクセスできます。

$ pnpm run dev

Alt text

コミットします。

$ git add .
$ git commit -m "エイリアスを@componentsと@stylesに変更"

Next.jsの設定考察

tsconfig.json

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

まとめ

この記事では、paths の値を変更し、動作を確認しました。paths を利用することでエイリアスを利用しファイルへアクセスできるようになることを確認しました。

概要

簡易例

Next.jsの設定考察

参考

この記事の内容

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

事前環境の構築

プロジェクトを作成

Peer Dependenciesの警告を解消

styles

初期ページ

レイアウト

TailwindCSSの設定

TypeScriptの設定

スクリプトを追加

動作確認

paths の値を設定しない場合

paths に 値を設定する場合

Next.jsの設定考察

まとめ

Discussion

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

`paths` に値を設定する場合