tsconfig.json

https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

create-next-app で作成されるデフォルトの状態：

{
  "compilerOptions": {
    "target": "ES2017",
    "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": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

target：どのバージョンの JavaScript にコンパイルするか
include / exclude：TypeScript が型チェックや補完の対象にするファイル範囲
module ：TypeScript がコンパイルした後、どのモジュール形式で出力するか（import/export の仕様をどれにするか）

include

デフォルト（create-next-app）だと .js , .jsx 拡張子からのimport補完が効かない

対策："include"に以下を追加

 "**/*.js" ,"**/*.jsx"

paths：エイリアス設定

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

"baseUrl"：相対パスの基準にする場所
"paths"：上記の意味は「ルート以下のファイルは @/ スタートでimportができる」

例：./apps/test/test.ts 内で ./lib/utils.ts をimport

ルート/
├─ lib/
│  └─ utils.ts
├─ apps/
│  └─ test/
│     └─ test.ts

"paths"の設定が無い場合：

import { test_ } from "../../lib/utils

相対パスでimportするので長いimportパスになる

"paths"設定がある場合：

import { hoge } from "@/lib/utils

@/ スタートでimportができる

package.json

https://docs.npmjs.com/cli/v11/configuring-npm/package-json

create-next-app で作成されるデフォルトの状態：

{
  "name": "next-turbo-test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build --turbopack",
    "start": "next start",
    "lint": "eslint"
  },
  "dependencies": {
    "react": "19.1.0",
    "react-dom": "19.1.0",
    "next": "15.5.0"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "@tailwindcss/postcss": "^4",
    "tailwindcss": "^4",
    "eslint": "^9",
    "eslint-config-next": "15.5.0",
    "@eslint/eslintrc": "^3"
  }
}

"name"：パッケージ名
- monorepoの場合フォルダ名と同一にした方が良い
"scripts"：
- "dev": "NODE_ENV=development next dev"のように環境変数を渡せる
- npmスクリプトは&&でつなげることで処理をチェーンできる
- "postinstall" :：依存関係のインストール後に自動で実行

"dependencies"：本番でも必要なライブラリ
- ReactやNext.jsはデプロイ後にブラウザやサーバー上で動作するために必要
"devDependencies"：開発時のみ必要なライブラリ
- TypeScriptやESLintは開発時にのみ使う
"extends"：ベースとなるtsconfig.jsonを継承

package.lock.json：ロックファイル

package.json：「どんな依存が必要か」をざっくり書く

バージョンは必ずしも固定ではなく^ や ~ のような範囲指定ができる
^4.17.0 → 「4.17.x 系なら何でもOK」。npm install すると最新の 4.17.x がインストールされる

package.lock.json ：「実際にどのバージョンを使っているか」を正確に記録（ = ロック）する

全く同じバージョンを再現するために必要

Nextjs：tsconfig.json と package.json