Zenn
🚅

Next.js (バージョン 13.4) + TypeScript の新規プロジェクトの開発環境設定

に公開
Next.js
TypeScript
tech

この記事は何ですか?

Next.js の新規プロジェクトの環境設定に関するメモです。

create-next-app でボイラープレートを作る

公式サイトが勧める通り create-next-app で Next.js のプロジェクトを作ります。新規プロジェクトは example-app という名前で、パッケージ管理には npm を、プログラミング言語には TypeScript を採用するものとします。

$ npx create-next-app@latest example-app --use-npm --typescript

このコマンドを実行するといくつか選択肢が与えられるので、次のように答えます。

✔ Would you like to use ESLint? … No / Yes  [=> Yes]
✔ Would you like to use Tailwind CSS? … No / Yes  [=> No]
✔ Would you like to use `src/` directory? … No / Yes  [=> Yes]
✔ Would you like to use App Router? (recommended) … No / Yes  => [=> Yes]
✔ Would you like to customize the default import alias? … No / Yes  => [=> No]

ところで create-next-app コマンドは --example オプションでテンプレートプロジェクトを指定できます。しかし選択肢が多すぎて逆に大変に感じたため、本記事では使用しません。

プロジェクト名と同様のディレクトリ (この例では example-app) が作られます。そこに移動して npm run dev コマンドを実行するとアプリケーションが立ち上がります。ブラウザから http://localhost:3000 にアクセスすると Next.js の初期画面が表示されます。

このタイミングでブラウザに表示されるコンテンツは src/app/page.tsx のものです。いったん最小限の内容に書き換えましょう。Home 関数を次のようにします。

export default function Home() {  
    return <div>Hello, world!</div>;  
}

これで、ブラウザからは Hello, world! だけ表示されるようになります。

Jest および React Testing Library の設定をする

テストのために必要なライブラリをインストールします。このプロジェクトでは Jest でテストをします。

$ npm i -D jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom

Jest の設定を jest.config.js というファイル名でプロジェクト直下に置きます。内容は次の通りです。

const nextJest = require("next/jest");

const createJestConfig = nextJest({
    dir: "./",
});

const customJestConfig = {
    setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
    moduleNameMapper: {
        "^@/src/(.*)$": "<rootDir>/src/$1",
    },
    testEnvironment: "jest-environment-jsdom",
};

module.exports = createJestConfig(customJestConfig);

また setupTests.ts というファイルをプロジェクト直下に置きます。内容は次の通りです。

import '@testing-library/jest-dom/extend-expect';

これで Jest を使う準備ができました。

最初のテストとして src/app ディレクトリに Home.spec.tsx を作ります。内容は次の通りです。

import { render, screen } from "@testing-library/react";
import Home from "@/app/page";

describe("Home", () => {
    it("shows 'Hello, world!'", () => {
        render(<Home />)

        expect(screen.getByText("Hello, world!")).toBeInTheDocument();
    });
});

ここまでの設定ができていれば jest コマンドがきちんと動きます。

$ jest
 PASS  src/app/Home.spec.tsx
  Home
    ✓ shows 'Hello, world!' (21 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.248 s
Ran all test suites.

ESLint および Prettier の設定をする

コードフォーマットを整えるため ESLint と Prettier の設定をします。まずはパッケージをインストールします。

$ npm i -D prettier eslint-config-prettier

次に package.json に ESLint の設定を入れましょう。

  "eslintConfig": {
    "settings": {
      "import/parsers": {
        "@typescript-eslint/parser": [
          ".ts",
          ".tsx"
        ]
      },
      "import/resolver": {
        "typescript": {}
      },
      "parserOptions": {
        "project": "./tsconfig.json"
      }
    }
  }

これで eslint --ext .js,.jsx,.ts,.tsx src/ --fix && prettier --write src/**/*.ts* で ESLint と Prettier でコードの整形ができるようになります。必要に応じて package.json で npm のサブコマンドとして設定したり、IDE のファイル保存時のフックとして指定すると良いでしょう。

GitHubで編集を提案

Discussion