Next.js14(App Router)で開発環境を構築する

こんにちは、さかです。

今回はNext.js14(App Router)で開発環境の構築方法を紹介いたします。
Next.jsのバージョンは14.2.5を使用します。

プロジェクトを作成

Next.jsのプロジェクトを作成します。

なお、プロジェクト作成当たっては公式ドキュメントに沿って進めていきます。
さっそく、npxを使ってプロジェクト作成しましょう。

ターミナルに以下を入力します。

npx 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? … No
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias (@/*)? … Yes

設定が完了したら、Enterを押すと、プロジェクトが作成されます。

確認のため、作成したプロジェクトに移動してみます。

cd my-app

移動したら、プロジェクトを立ち上げます。

npm run dev

http://localhost:3000が立ち上がり、問題なくアクセスできたら完了です。

不要なコードを削除

プロジェクトが作成できたら不要なコードを削除していきます。

globals.cssを開き、:rootから以降をすべて削除します。

@tailwind base;
@tailwind components;
@tailwind utilities;

// 以降すべて削除する
:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

その後、page.tsxを開き、確認のため以下のように修正します。

export default function Home() {
  return (
    <h1>Home</h1>
  );
}

もう一度、localhost:3000にアクセスして、スタイルが適用されておらず、文字のみ表示されていれば完了です。

Prettierを導入する

コードを自動整形するためにPrettierを導入します。

Prettierは開発環境でしか使わないのでインストールする際に-Dオプションをつけます。

npm i -D prettier

.prettierrc.jsonを作成する

ルートに.prettierrc.jsonという設定ファイルを作成します。
例として以下のように設定していますが、プロジェクトにあった設定方法で問題ないです。

{
  "singleQuote": true,
  "semi": true,
  "trailingComma": "all",
  "useTabs": false,
  "tabWidth": 2,
  "bracketSpacing": true
}

なお、以下が簡単な設定項目です。

• ・singleQuote: シングルクォート（'）が使用されます。
• ・semi: ステートメントの末尾にセミコロンが付けられます。
• ・trailingComma: 配列やオブジェクトの最後の要素の後に、すべての場所でカンマが付けられます。
• ・useTabs: インデントにタブを使用するかどうかを指定します。falseに設定すると、スペースが使用されます。
• ・tabWidth: インデントの幅を指定します。
• ・bracketSpacing: オブジェクトリテラルの中括弧の内側にスペースを入れるかどうかを指定します。

フォーマットを設定する

ファイル保存時にフォーマットが走るように設定します。

vscodeの拡張機能Prettier - Code formatterを追加します。
追加後、プロジェクトルートに.vscodeフォルダを作成し、その中にsettings.jsonファイルを以下の内容で作成します。

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

作成後、画面をリロードすることでファイル保存時にフォーマットを実行してくれます。

prettier対象外のルートファイルを記述

.prettierignoreを作成し、フォーマット生成対象外のルートファイルを記述します。

node_modules/
.next/
out/
public/
package-lock.json
postcss.config.mjs
next.config.mjs

ESLintを導入する

次にESlintを設定します。

ターミナルで以下をパッケージを追加します。

npm i -D @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-prettier

.eslintrc.jsonを修正する

プロジェクト作成時に生成された.eslintrc.jsonを修正します。

{
  "extends": [
    "eslint:recommended",
    "next/core-web-vitals",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "parserOptions": {
    "project": true
  },
}

eslint対象外のルートファイルを記述

.eslintignoreも追加します。こちらも.prettierignore同様に設定します。

node_modules/
.next/
out/
public/
package-lock.json
next.config.mjs
tsconfig.json
next-env.d.ts
postcss.config.mjs
*.cjs
*.mjs

VScodeに設定する

作成したsettings.jsonを開き、追加で以下を記述します。

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

これらを設定することで、画面をリロードする際に設定したルールでESLintの自動修正が行われるようになります。

Tailwind CSSの設定

次にTailwind CSSの設定をします。

こちらで適切な記述と順番に変更してくれるように設定をします。
eslint-plugin-tailwailndcssをインストールします。

npm i -D eslint-plugin-tailwindcss

.eslintrc.jsonを修正します。

{
  "extends": [
    "eslint:recommended",
    "next/core-web-vitals",
    "plugin:@typescript-eslint/recommended",
　　　　　　　　"plugin:tailwindcss/recommended",　　// 追加
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "parserOptions": {
    "project": true
  },
　　　　// 以降追加
  "rules": {
    "tailwindcss/classnames-order": [
      "error",
      {
        "officialSorting": true,
        "prependCustom": true
      }
    ]
  }
}

この設定をすることにより、設定したルールに基づいて、自動で修正やエラーを表示できるようになります。

package.jsonの設定

最後にpackage.jsonの設定をします。

実行する際に、Prettier → ESLint の順に順次実行したいため以下のように修正します。

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint --fix", // 追加
    "prettier": "prettier --write .",　// 追加
    "format": "npm run prettier && npm run lint" // 追加
  },

実行する際はnpm run formatでターミナルに入力すると、Prettier → ESLint の順に実行されます。

まとめ

以上でNext.jsの開発環境の構築方法は終了です。

次回はmicroCMSの設定と記事表示について紹介できたらと思います。