Next.js14の開発環境構築手順 step01 create-next-app --typescript

はじめに

2024年4月時点での自分のためのメモとして、Next.jsの環境構築手順をまとめてみます。

かなり長くなるのでいくつかのstepに分けて書いていきます。

環境

主に以下のような構成でNext.js 14の環境構築を行なっていきます。 CSSを書くにあたってNext.js(React)では多くの選択肢があると思いますが、何か Zero Runtime のCSSライブラリを使用して、環境構築をしていこうと思います。

OS: macOS Ventura 13.6.4
node 20.5.1
npm 9.8.0
next 14.2.0
- eslint + prettier
- 何か Zero Runtime のCSSライブラリ
- stylelint
- lint-staged

nodeのインストール

nodenvか何かでインストールしてバージョンを指定します。

以下のページあたりを参照して、LTS（Long-Term Support 長期サポート）になっているバージョンを選ぶのが良いと思います。

2024年4月現在で最新LTSのnode 20系を選択しました。

create next-app

npm を使って環境構築をしていこうと思います。

TypeScriptのオプションも使用します。

ディレクトリ名は今回は frontend_v2 でやっていますが、任意のディレクトリ名でやってください。

npx create-next-app@latest --ts frontend_v2

対話形式で選択できる初期設定は以下の通り選択しました。

ESLintは使う
Tailwind CSSは使わない
src/ ディレクトリは使う
App Routerは使う
import aliasはカスタマイズしない（初期値のまま @/*）

package.jsonの確認

nameはご自身の環境に読み替えてください。

{
  "name": "frontend_v2",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "14.2.0"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.0"
  }
}

dependenciesとdevDependenciesをアルファベット順に並べ替える

dependenciesとdevDependenciesを以下の通りアルファベット順に並べ替えました。

{
  "name": "frontend_v2",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "14.2.0",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.0",
    "typescript": "^5"
  }
}

ディレクトリ移動

cd frontend_v2

typesyncをインストールする

typesyncをインストールします。typesyncを実行すると足りない型パッケージをpackage.jsonに追記してくれて便利です。

npm install --save-dev typesync

typesyncを実行する

以下のコマンドを実行します。

npx typesync

以下のように表示されて、@types/eslint がpackage.jsonに追記されたのがわかります。

»  TypeSync v0.12.1
✔  1 new typings added.

📦 frontend_v2 — package.json (1 new typings added)
└─ + @types/eslint

✨  Go ahead and run npm install or yarn to install the packages that were added.

@types/eslint をインストールする

package.jsonに @types/eslint が追記されたのでインストールします。

npm install

TSの絶対パスインポートの設定

tsconfig.json を編集します。

create next-app したときに、pathsが自動で設定されるようになりましたが、 baseUrl は自動では設定されないので自分で設定します。

  "compilerOptions": {
    〜省略〜
    "baseUrl": "./",
    〜省略〜
  },

baseUrlを設定することで、VSCodeの入力補完が利くようになったりするはず。

.eslintrc.json について

json よりも js の方が編集がしやすいですが、 create-next-app によって設定された eslint のバージョンが8系であることと、生成されたファイルが .eslintrc.json なので拡張子はこのままにしておきます。

eslint の設定ファイルについては、今後 eslintrc はではなくなり、Flat Config になるようです。

ESLint を eslintrc から Flat Config に移行する、ハマりポイントを添えて。 #JavaScript - Qiita

この環境構築手順では、 .eslintrc.json のまま進めていきますが、このことは留意しておくと良いと思います。

.eslintrcの拡張子と記述内容を変更する

.eslintrc.json の拡張子を .eslintrc.js に変更します。

.eslintrc.json の記述内容は以下の通りでしたが、

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

.eslintrc.js に拡張子を変更したので、記述内容を以下の通り変更しました。ついでに extends プロパティの値を配列に変更しています。

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

長くなりそうなので、今回はここまでにしておきます。

Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。