はじめに
2023年3月時点での自分のためのメモとして、Next.jsの環境構築手順をまとめてみます。
かなり長くなるのでいくつかのstepに分けて書いていきます。
環境
主に以下のような環境でNext.js 13の環境構築を行なっていきます。 CSSを書くにあたってNext.js(React)では多くの選択肢があると思いますが、Next.js 13に組み込まれているstyled-jsxを使う方針でstylelintなども設定していきます。
- OS: macOS Monterey
- node 18.14.2
- yarn 1.22.19
- next 13.2.4
- eslint + prettier
- styled-jsx
- stylelint
- lint-staged
nodeのインストール
nodenvか何かでインストールしてバージョンを指定します。
以下のページあたりを参照して、LTS（Long-Term Support 長期サポート）になっているバージョンを選ぶのが良いと思います。
2023年3月現在で最新LTSのnode 18系を選択しました。
create next-app
yarn を使って環境構築をしていこうと思います。TypeScriptのオプションも使用します。
yarn create next-app --typescript
以下の通り選択しました。
✔ What is your project named? … my-app ✔ Would you like to use ESLint with this project? … Yes ✔ Would you like to use `src/` directory with this project? … Yes ✔ Would you like to use experimental `app/` directory with this project? … No ✔ What import alias would you like configured? … @/*
package.jsonの確認
以下の通りpackage.jsonが生成されました。
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@types/node": "18.15.9",
"@types/react": "18.0.29",
"@types/react-dom": "18.0.11",
"eslint": "8.36.0",
"eslint-config-next": "13.2.4",
"next": "13.2.4",
"react": "18.2.0",
"react-dom": "18.2.0",
"typescript": "5.0.2"
}
}
開発時だけ使用するパッケージをdevDependenciesに移動する
型のパッケージなど、開発時だけ使用するパッケージをdevDependenciesに移動して以下のようにしました。
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "13.2.4",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"devDependencies": {
"@types/node": "18.15.9",
"@types/react": "18.0.29",
"@types/react-dom": "18.0.11",
"eslint": "8.36.0",
"eslint-config-next": "13.2.4",
"typescript": "5.0.2"
}
}
ディレクトリ移動
cd my-app
typesyncをインストールする
typesyncをインストールします。typesyncを実行すると足りない型パッケージをpackage.jsonに追記してくれて便利です。
yarn add --dev typesync
typesyncを実行する
以下の通り実行します。
yarn typesync
以下のように表示されて、@types/eslint がpackage.jsonに追記されたのがわかります。
yarn run v1.22.19 $ /Users/motomichi/Desktop/tmp/my-app/node_modules/.bin/typesync » TypeSync v0.10.0 ✔ 1 new typings added. 📦 my-app — package.json (1 new typings added, 0 unused typings removed) └─ + @types/eslint ✨ Go ahead and run npm install or yarn to install the packages that were added. ✨ Done in 3.89s.
@types/eslint をインストールする
package.jsonに @types/eslint が追記されたのでインストールします。
yarn install
TSの絶対パスインポートの設定
tsconfig.json を編集します。
create next-app したときに、pathsが自動で設定されるようになりましたが、 baseUrl は自動では設定されないので自分で設定します。
"compilerOptions": {
〜省略〜
"baseUrl": "./",
〜省略〜
},
baseUrlを設定することで、VSCodeの入力補完が利くようになったりするはず。
.eslintrcの拡張子と記述内容を変更する
.eslintrc.json の拡張子を .eslintrc.js に変更します。
.eslintrc.json の記述内容は以下の通りでしたが、
{
"extends": "next/core-web-vitals"
}
.eslintrc.js に拡張子を変更したので、記述内容を以下の通り変更しました。ついでに extends プロパティの値を配列に変更しています。
module.exports = {
extends: ["next/core-web-vitals"],
};
長くなりそうなので、今回はここまでにしておきます。
続きはこちら
Next.js13の開発環境構築手順 step02 eslintとprettierを設定する - Motomichi Works Blog
