Next.jsでいつも入れている環境構築の備忘録 #TypeScript

Next.jsの環境構築のための備忘録の為のメモです。

インストール

最新版のNext.jsをプロジェクト配下と同じフォルダに作成するというコマンド

npx create-next-app@latest .

対話コマンド

Need to install the following packages:
  create-next-app@version
Ok to proceed? (y)

// 次のパッケージをインストールする必要がありますと出てくるのでキーボードの Yを入力してエンター

? Would you like to use TypeScript with this project? › No / Yes
// TypeScriptも一緒にプロジェクトにインストールしますかと
yesが選択されている（水色）のを確認してエンター

? Would you like to use ESLint with this project? › No / Yes
// 構文解析エラーツールのESLintもプロジェクトにインストールしますかと聞かれるので理由がなければyes

? Would you like to use Tailwind CSS with this project? › No / Yes
// Tailwind CSSも一緒に（以下略　今回使用したいのでyes

? Would you like to use `src/` directory with this project? › No / Yes
// 作業フォルダはsrc配下に設置するものとするか？と聞かれるのでyes

? Would you like to use experimental `app/` directory with this project? › No / Yes
// 実験的なappディレクトリを作成しますかと聞かれるのでNo

? What import alias would you like configured? › @/*
// エイリアス（ファイルの場所を別の名前で参照する）をどの名前で利用しますか？　何も考えずにエンター

設定

最初に設定するファイル

プロジェクトルート/
├ site.config.ts（追加 サイト名などを定義）
├ .prettierrc（追加）
└ public/
     └ favicon.ico(削除）
     ├ next.svg（削除）
     ├ vercel.svg（削除）
└ src/
     └ components/(新規にフォルダと下記ファイルの追加）
       ├ Layout.tsx
       ├ Footer.tsx
       └ Header.tsx
    　　pages/
       ├ _app.tsx
       ├ _document.tsx
       └ index.tsx
			 └ api/
         └ _hello.tsx（削除）
...（その他のフォルダ（ファイル）はそのまま残しておく）

コードの品質を保つために、ルールの設定を追加するESlintの設定とコードのフォーマットを最適化するPrettierの導入をしていきます。更にtailwind.cssも追加します。

yarn add -D prettier eslint-config-prettier prettier-plugin-tailwindcss

.prettierrcファイルには下記のように設定します。

.prettierrc

{
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "printWidth": 100
}

次に、ESlintの設定を変更するため、プロジェクトのルートディレクトリにある.eslintrc.jsonのファイルを開いて設定を行います。

.eslintrc.json

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

上記を下記のように変更します。

.eslintrc.json

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

上記は、import の順番をアルファベット順から、昇順で設定をするというルールです。

続いて、package.jsonのファイルを編集します。

ルールの適用ファイルをsrcファイル配下に、自動修正用のコマンドも追記します。

package.json

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },

を下記に変更します

package.json

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint --dir src",
    "lint:fix": "yarn lint --fix",
    "format": "prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,json}'"
  },

VSCodeで保存時に、自動でフォーマットを設定するように変更していきます。

ESlint

Prettier

拡張機能が入ってない場合は、インストールします。

プロジェクト直下に、.vscodeフォルダを作成し、settings.jsonを追加し下記のようにします。

.vscode/setting.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

忘れやすいのでメモとして残しておきます。