Next.jsのプロジェクトを始める時にやっていること

ghq get git@github.com:yuki-takara/nextjs-base.git

# 作成したリポジトリのフォルダに移動
cd {作成したリポジトリのフォルダ}
 
# GitHub上に表示されている初期化のコマンドをそのままコピペ
echo "# nextjs-base" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:yuki-takara/nextjs-base.git
git push -u origin main

$ git log --oneline
26eea93 (HEAD -> main, origin/main) first commit

pnpm init

{
  "name": "nextjs-base",
  "version": "0.0.1",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "license": "ISC"
}

{
  "name": "nextjs-base",
  "version": "0.0.1",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "license": "ISC",
  "volta": {
    "node": "20.11.1"
  }
}

$ node -v
v20.11.1

pnpm dlx create-next-app@latest

✔ What is your project named? … my-app
✔ 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

{
  "name": "nextjs-base",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "14.1.3"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "eslint": "^8",
    "eslint-config-next": "14.1.3"
  },
  "volta": {
    "node": "20.11.1"
  }
}

$ pnpm run dev
 
> nextjs-base@0.0.1 dev /Users/yuu/src/github.com/yuki-takara/nextjs-base
> next dev
 
   ▲ Next.js 14.1.3
   - Local:        http://localhost:3000

pnpm add -D prettier

module.exports = {
  endOfLine: "lf",
  semi: false,
  singleQuote: true,
  printWidth: 100,
  arrowParens: 'avoid',
}

module.exports = {
  // Googleスタイルガイドに従い、インデントには2つのスペースを使用
  tabWidth: 2,
  // セミコロンを省略せずに使用
  semi: true,
  // シングルクォートを使用
  singleQuote: true,
  // オブジェクトのプロパティのキーが必要な場合のみクォートを使用
  quoteProps: 'as-needed',
  // 配列やオブジェクトの要素の最後にもカンマを付ける（ES5で有効な場合のみ）
  trailingComma: 'es5',
  // 複数行の場合、配列の括弧内に改行を入れる
  bracketSpacing: true,
  // アロー関数のパラメータが1つのみの場合も括弧を付ける
  arrowParens: 'always',
  // HTMLやJSXの閉じタグを改行しない
  jsxBracketSameLine: false,
  // HTMLやJSXの属性にシングルクォートを使用
  jsxSingleQuote: true,
  // ファイルの末尾に改行を入れる
  endOfLine: 'lf',
};

pnpm dlx prettier --write "**/*.{ts,tsx,json,mjs,css}"

{
  "extends": "next/core-web-vitals"
}

module.exports = {
  extends: 'next/core-web-vitals',
}

pnpm add -D eslint-config-prettier

module.exports = {
  extends: ['next/core-web-vitals', 'prettier'],
}

$ pnpm run lint
> next lint
 
✔ No ESLint warnings or errors

pnpm add -D eslint-plugin-unicorn

module.exports = {
  extends: ['next/core-web-vitals', 'plugin:unicorn/recommended', 'prettier'],
}

$ pnpm run lint
> next lint
 
✔ No ESLint warnings or errors

'use client'
 
import { useState } from 'react'
 
export function SampleComponent() {
  const [val, setVal] = useState(0)
 
  return <div>{val}</div>
}

import Image from 'next/image'
import { SampleComponent } from '@/components/SampleComponent'
 
export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <SampleComponent />
      ・・・

$ pnpm run lint
> next lint
 
./src/components/SampleComponent.tsx
1:1  Error: Filename is not in kebab case. Rename it to `sample-component.tsx`.  unicorn/filename-case
6:10  Error: The variable `val` should be named `value`. A more descriptive name will do too.  unicorn/prevent-abbreviations
6:15  Error: The variable `setVal` should be named `setValue`. A more descriptive name will do too.  unicorn/prevent-abbreviations

module.exports = {
  extends: ['next/core-web-vitals', 'plugin:unicorn/recommended', 'prettier'],
  rules: {
    // ケバブケース以外のファイル名も許容
    'unicorn/filename-case': 'off',
  },
}

'use client'
 
import { useState } from 'react'
 
export function SampleComponent() {
  const [value, setValue] = useState(0)
 
  return <div>{value}</div>
}

$ pnpm run lint
> next lint
 
✔ No ESLint warnings or errors