やること

• Next.jsのプロジェクト作成
• gitの初期化
• Typescriptの設定
• Prettierの設定
• ESLintの設定

create-next-app

next.jsのプロジェクトは1から作成することも可能なのですが、ある程度設定されたテンプレートが多く用意されています。
そのためコマンド1つで簡単にプロジェクトが作成できてしまいます。

プロジェクトを作成していきますが、プロジェクトを作成するにはnodeがインストールされている必要があります。
今回はインストールの説明は省かせていただきます。
インストールするだけならそんなに難しいことではないので、こちらの記事を参考にインストールしてください

プロジェクト作成に戻ります。
コマンドで以下を実行

npx create-next-app next-myblog-tutorial --typescript

npx create-next-appでプロジェクトを作成できる
next-myblog-tutorialはプロジェクトの名前
--typescriptをつけることでtypescriptの設定がある程度された状態でプロジェクトを作成することができます。

作成したらプロジェクトに移動してエディタで開いて中身を確認してみましょう。
私はVscodeを使用しています。

cd next-myblog-tutorial

srcファイルを作成

srcファイルを作成し、その中に

pages
styles

を入れてください

gitの初期化

プロジェクトを作成すると最初から.gitファイルが作成されているので一度削除して初期化します

rm -rf .git
git init
git checkout -b main
git add .
git commit -m 'first-commit'

開発サーバーを立ち上げる

npm run dev

開発サーバーはホットリロードに対応していたりと、開発しているときには便利なので基本はこちらで開発を進めていきます。
他には、buildやstartといった様なコマンドがありますが、それは後に出てきます。
localhost:3000dで以下の様なページが確認できたら成功です。

Typescriptの設定

tsconfig.jsonにbaseUrlを追加します。
baseUrlをsrcにします。

{
  "compilerOptions": {
    "baseUrl": "src"
    // 省略
  }
  // 省略
}

srcディレクトリで表示させるファイルを管理したいため、baseUrlをsrcに変更しました。

Prettierをインストール

npm install -D prettier eslint-config-prettier

• prettier コードをフォーマットする
• eslint-config-prettier eslintのルールと被らない様にする

Prettierの設定

package.jsonに設定を書いていきます。
最低限必要だと思う設定をしておきます。
他の設定も見てみたい方は公式HPを参考にしてみてください

{
    // 省略
  "devDependencies": {
    "@types/react": "17.0.19",
    "eslint": "7.32.0",
    "eslint-config-next": "11.1.2",
    "eslint-config-prettier": "^8.3.0",
    "prettier": "^2.3.2",
    "typescript": "4.4.2"
  },
  "prettier": {
    "trailingComma": "all",
    "tabWidth": 2,
    "semi": true,
    "singleQuote": true,
    "jsxSingleQuote": true,
    "printWidth": 100
  }
}

Eslintの設定

.eslintrc.jsonファイルを編集していきます。

{
  "extends": [
    "next",
    "next/core-web-vitals",
    "prettier"
  ]
}

package.jsonファイルを開き以下を追記する

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    //--dir srcを追記
    "lint": "next lint --dir src",
    // formatのscript
    "format": "prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,json,css}'"
  },

npm run lint

を行うとsrcファイル以下をlintにかける

npm run format

を行うとprettierを走らせフォーマットしてくれる
けどいちいちこんなことしてられないので、saveをするたびに実行するように設定していきます。

save時に自動フォーマットを行う

ここからはVscodeでの設定になります。
左下の歯車を押して設定を開きます



この時ワークスペースを選択していることに注意してください。
別にユーザーでもいいのですが、プロジェクトごとに設定が変わったりすることもあるので今回はワークスペースで設定をしていきます。

ワークスペースを選択したら右上にあるアイコンの一番左を選択することでjson形式で設定を書くことができます。
設定内容は以下です。

{
  // デフォルトのフォーマッタを prettier に設定
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // ファイル保存時、prettier による自動フォーマット
  "editor.formatOnSave": true,
  // ファイル保存時、ESLint による自動フォーマット
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "typescript.tsdk": "node_modules/typescript/lib"
}

これでsaveをしたときにprettierがはしり整形してくれます。

おまけ

importの順番をアルファベット順にする

.eslintrc.jsonを以下に書き換え

{
  "extends": [
    "next",
    "next/core-web-vitals",
    "prettier",
    "plugin:import/recommended",
    "plugin:import/warnings"
  ],
  "rules": {
    "import/order": [
      "error",
      {
        "alphabetize": {
          "order": "asc"
        }
      }
    ]
  }
}

これで保存した時にimportの順番がアルファベット順になります。

まとめ

個人的に設定などは最初から理解する必要はないと思っています。
自分も設定についての知識は全くないので、テンプレートを使用することが多いです。
慣れてきたら、カスタマイズして自分にあった環境を作りましょう！
これもプログラミングの楽しいところだと思います。

設定がある程度終わったので次回からブログの作成に入っていきます。
少しむずかいしいところや理解に苦しむところがあると思いますが、じっくりコードを読めばわかってきます。
諦めずに頑張りましょう！