Next.js開発環境構築（AppRouter, TypeScript, Tailwind CSS対応）

npx create-next-app@latest <プロジェクト名>

✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ 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 (@/*)? … No

{
  "compilerOptions": {
    // 他の設定...
    "verbatimModuleSyntax": true // 追加
    // 他の設定...
  }
  // 他の設定...
}

{
  "compilerOptions": {
    // 他の設定...
    "paths": {
      "@/*": ["./src/*"],
      "@/components/*": ["./src/components/*"],
      "@/lib/*": ["./src/lib/*"],
      "@/stories/*": ["./src/stories/*"],
      "@/styles/*": ["./src/styles/*"]
    }
  }
  // 他の設定...
  "exclude": ["node_modules", "src/components/ui/**/*"]
}

npx shadcn@latest init

✔ Which style would you like to use? › Default
✔ Which color would you like to use as the base color? › Gray
✔ Would you like to use CSS variables for theming? … yes

npm i -D husky lint-staged && npx husky init && echo "npx lint-staged" > .husky/pre-commit

{
  // 他の設定...
  "lint-staged": {}
}

git commit --no-verify -m "コミットメッセージ"

npm i -D prettier prettier-plugin-organize-imports && touch .prettierrc && touch .prettierignore

.prettierrc

Copy Code

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "trailingComma": "all",
  "bracketSpacing": true,
  "bracketSameLine": false,
  "arrowParens": "always",
  "plugins": ["prettier-plugin-organize-imports"],
  "overrides": [
    {
      "files": ["*.html"],
      "options": {
        "printWidth": 360
      }
    },
    {
      "files": ["*.css", "*.scss", "*.sass", "*.less"],
      "options": {
        "singleQuote": false
      }
    }
  ]
}

# 依存関係
node_modules

# ビルド出力とキャッシュ
.cache/
.next/
.nuxt/
.astro/
build/
dist/
out/

# パッケージマネージャのロックファイル
package-lock.json
yarn.lock
pnpm-lock.yaml

# 特定のJavaScriptモジュールファイル
*.cjs
*.mjs

mkdir -p .vscode && echo '{}' > .vscode/settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.codeActionsOnSave": {
    "source.addMissingImports.ts": "explicit"
  },
  "javascript.preferences.importModuleSpecifier": "non-relative",
  "typescript.preferences.importModuleSpecifier": "non-relative"
}

{
  // 他の設定...
  "scripts": {
    // 他の設定...
    "lint:prettier": "prettier --check .",
    "fix:prettier": "npm run lint:prettier -- --write",
    "prepare": "husky"
  },
  // 他の設定...
}

npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-tailwindcss eslint-config-prettier && touch .eslintignore

{
  "extends": [
    "next/core-web-vitals",
    "plugin:@typescript-eslint/recommended",
    "plugin:tailwindcss/recommended",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "rules": {
    "@typescript-eslint/consistent-type-imports": [
      "error",
      {
        "prefer": "type-imports",
        "fixStyle": "separate-type-imports"
      }
    ],
    "@typescript-eslint/no-unused-vars": [
      "warn",
      {
        "vars": "all",
        "varsIgnorePattern": "^_",
        "args": "after-used",
        "argsIgnorePattern": "^_"
      }
    ],
    "object-shorthand": "error",
    "tailwindcss/no-custom-classname": "off",
    "react/jsx-curly-brace-presence": "error",
    "react/self-closing-comp": [
      "error",
      {
        "component": true,
        "html": false
      }
    ],
    "@next/next/no-img-element": "off",
    "react/no-unescaped-entities": "off"
  }
}

# 依存関係
node_modules/

# ビルド出力とキャッシュ
.cache/
.next/
.nuxt/
.astro/
build/
dist/
out/

# 静的ファイル
public/

# パッケージマネージャのロックファイル
package-lock.json
yarn.lock
pnpm-lock.yaml

# 設定ファイル
vite.config.ts
next.config.js
tsconfig.json
tailwind.config.js
tailwind.config.ts

# 型定義ファイル
src/env.d.ts

# 特定のJavaScriptモジュールファイル
*.cjs
*.mjs

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.codeActionsOnSave": {
    "source.addMissingImports.ts": "explicit",
    "source.fixAll.eslint": "explicit" // 追加
  },
  "javascript.preferences.importModuleSpecifier": "non-relative",
  "typescript.preferences.importModuleSpecifier": "non-relative",
  // ▽ 追加
  "eslint.validate": [
    "html",
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ]
}

{
  // 他の設定...
  "scripts": {
    // 他の設定...
    "lint:eslint": "eslint .", // 追加
    "lint:prettier": "prettier . --check",
    "fix:eslint": "npm run lint:eslint -- --fix", // 追加
    "fix:prettier": "npm run lint:prettier -- --write",
    "prepare": "husky"
  },
  // 他の設定...
}

npm i -D npm-run-all

{
  // 他の設定...
  "scripts": {
    // 他の設定...
    "lint": "next lint", // 削除
    "lint": "run-p -l -c --aggregate-output lint:*", // 追加
    "lint:prettier": "prettier . --check",
    "fix": "run-s fix:prettier fix:eslint", // 追加
    "fix:eslint": "npm run lint:eslint -- --fix",
    "fix:prettier": "npm run lint:prettier -- --write",
    "prepare": "husky"
  },
  // 他の設定...
}

{
  // 他の設定...
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,md,mdx,css,scss,yaml,yml}": [
      "prettier --write"
    ]
  }
}

npx storybook@latest init

.storybook/main.ts

Copy Code

import type { StorybookConfig } from '@storybook/nextjs';
import path from 'path';

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-onboarding',
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@chromatic-com/storybook',
    '@storybook/addon-interactions',
  ],
  framework: {
    name: '@storybook/nextjs',
    options: {},
  },
  webpackFinal: async (config) => {
    if (config.resolve) {
      config.resolve.alias = {
        ...config.resolve.alias,
        '@': path.resolve(__dirname, '../src'),
      };
    }
    return config;
  },
};
export default config;

.storybook/preview.ts

Copy Code

import type { Preview } from '@storybook/react';
import '@/styles/globals.css'; // 追加

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
};

export default preview;

{
  // 他の設定...
  "lint-staged": {
    "*.{js,jsx,ts,tsx,stories.js,stories.jsx,stories.ts,stories.tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,md,mdx,css,scss,yaml,yml}": [
      "prettier --write"
    ]
  }
}