Next.js 14 App Router テンプレート 手順書

Next.jsでプロジェクト開始時によく行うセットアップを手順書兼備忘録としてまとめます

プロジェクト作成

bunx create-next-app@latest

zsh

bunx create-next-app@latest {プロジェクト名}
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … No
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like to use `src/` directory? … Yes
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias (@/*)? … Yes
✔ What import alias would you like configured? … @/*

Biomeセットアップ

インストール

zsh

bun add --dev --exact @biomejs/biome

初期化

zsh

bunx @biomejs/biome init

biome.json書き換え

biome.json

{
  "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
  "files": {
    "ignore": ["node_modules", "public", ".next"]
  },
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "correctness": {
        "useHookAtTopLevel": "error"
      }
    }
  },
  "formatter": {
    "enabled": true,
    "formatWithErrors": false,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 80,
    "lineEnding": "lf",
    "ignore": []
  }
}

フォーマッター設定

zsh

mkdir .vscode && touch .vscode/settings.json

settings.json

{
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.organizeImports.biome": "always"
    }
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.organizeImports.biome": "always"
    }
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.organizeImports.biome": "always"
    }
  },
  "typescript.preferences.importModuleSpecifier": "non-relative",
  "editor.tabSize": 2
}

npm scripts修正(scriptsのみ抜粋)

packeage.json

"scripts": {
  "dev": "next dev --turbo",
  "build": "next build",
  "start": "next start",
  "check": "biome check ./src/",
  "check:fix": "biome check --write ./src/"
}

tsconfig.json編集して絶対パス設定

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

shadcn/uiセットアップ

zsh

bunx --bun shadcn-ui@latest init
Which style would you like to use? › Default
Which color would you like to use as base color? › Zinc
Do you want to use CSS variables for colors? › yes

終わり

簡単に管理できる方法や他に取り入れてるものがあればぜひご教授ください！