この記事ではNext.jsの環境構築について解説していきます。
ESLintなど様々な機能を導入できるので是非参考にしてみてください。また、ターミナルを最低限触れる方であれば再現できるように、細かく丁寧に解説しています。
使用技術・できるようになること
- Next.js（TypeScriptは未使用）
- Sass（SCSS記法）
- ESLint（JavaScriptの構文チェック）
- Stylelint（CSSの構文チェック、プロパティの自動並び替え、アンパサンド（&）禁止など）
- Prettier（保存時にコード自動整形）
- Visual Studio Code（テキストエディタ）
-
pages/やstyles/をひとつのフォルダにまとめる - ファイルを絶対パスで読み込めるようになる（エイリアス）
解説すること・しないこと
解説する内容はあくまで環境構築までです。なので、環境構築に関する設定ファイルなどの解説はしますが、Next.jsの機能や他のファイルに関しては特に解説していません。
Next.jsを基礎から学びたい方は、しまぶーさんのYouTubeがおすすめです。全17回もあり、とても丁寧に解説してくれています。
YouTubeのvideoIDが不正です
基礎を学んだ後は、こちらのチャンネルもおすすめです。microCMSなどのAPI連携や問い合わせフォームからメールを送る方法など発展的な内容を学べます。
YouTubeのvideoIDが不正です
環境構築を始める前に
Node.jsをインストールしていない方はインストールしておいてください。
Next.jsのプロジェクトを作成
まず、Next.jsをインストールしたいディレクトリにターミナルで移動します。
そこで以下コマンドを実行します（プロジェクト名がフォルダ名になります）。
$ npx create-next-app プロジェクト名
すると、以下のように質問されると思います。
// TypeScriptを使いますか？
Would you like to use TypeScript with this project? … No / Yes
// ESLintを使いますか？
Would you like to use ESLint with this project? … No / Yes
ターミナルアプリにもよると思いますが、左右キーでYesかNoを選択できると思うので、どちらも「No」を選択してエンターキーを押します。
※ESLintは後ほどインストールします
インストールされたかを確認する
インストールが終わると、先程入力したプロジェクト名でフォルダが作られると思うので、そこに移動します。
その後、以下コマンドを実行してローカルサーバーを立ち上げます。デフォルトURLは http://localhost:3000/ です。
$ cd プロジェクト名
$ npm run dev
http://localhost:3000/ にアクセスして以下のような画面が表示されれば成功です。
ダークモードの画面（通常モードの場合は背景が白になるはずです）
pages/やstyles/をひとつのフォルダにまとめる
プロジェクト直下にあるpages/とstyles/をひとつのフォルダにまとめます。こうすることで、乱立しやすいコンポーネント系をひとつのフォルダにまとめてプロジェクト内を見やすくします。
まず、src/フォルダをプロジェクト直下に作り、その中にpages/とstyles/を移動します。
次に、プロジェクト直下に設定ファイル.jsconfig.jsを作ります。
module.exports = {
"compilerOptions": {
"jsx": "react",
"baseUrl": "src"
}
}
baseUrlに先程作成したフォルダ名のsrcを指定します。
jsxに関して詳しく知りたい方はこちらの記事で詳しく解説してくれています。
ファイルを保存したら、再度 http://localhost:3000/ にアクセスしてみます。
無事表示されれば成功です。もし表示されなかったらサーバーを再起動してみましょう。
ファイル読み込みを相対パスから絶対パスに変える（エイリアスの設定）
デフォルトのファイルの読み込み方は相対パスになっています。
import styles from '../styles/Home.module.css'
これだと、自身の場所によっては大量の../を書く羽目になり、流石に不便で可読性も悪いので絶対パスで読み込めるように変更します。
next.config.jsを開き、以下のように編集します。
const path = require('path');
const nextConfig = {
reactStrictMode: true,
webpack(config, options) {
config.resolve.alias['@'] = path.join(__dirname, 'src')
return config;
},
}
module.exports = nextConfig
const path = require('path');とwebpack(...)を追加しました。
試しにsrc/pages/_app.jsのglobals.cssの読み込み方を変えてみます。エラーが出なければ成功です。
import '../styles/globals.css'
// ↓
import '@/styles/globals.css'
@には、next.config.jsで指定したsrcが代入されています。この書き方のことを「エイリアス」と呼びます。
ESlintの導入
ESlintとはJavaScriptの静的検証ツールです。構文ミスによるバグを見つけたり、括弧やインデントなど人によってバラバラになりそうなルールを統一してくれます。
コードの検証にはVSCodeの拡張機能を用います。
パッケージのインストール
まずはESlintに関するパッケージをインストールします。
$ npm i -D eslint eslint-config-next eslint-config-prettier
拡張機能のインストール
VSCodeのESLintの拡張機能をインストールします。
設定ファイルの作成
プロジェクト直下に.eslintrc.jsを作成します。
module.exports = {
// ルールをまとめて追加
"extends": [
"next/core-web-vitals",
"plugin:import/recommended",
"plugin:import/warnings",
"prettier"
],
// 個別ルール
"rules": {
// importするファイルをアルファベット順に自動で並び替える
"import/order": [
"error",
{
"alphabetize": {
"order": "asc"
}
}
],
// importのパスにエイリアス（'@/components/xxxxx'）を使うとエラーになるのでそれを防ぐ
"import/no-unresolved": "off"
}
}
ここでは様々なルールやプラグインの設定を行います。
extendsにはプラグインを定義しており、おすすめ設定やコアウェブバイタルに関する設定を入れています。
package.jsonの編集
package.jsonのscriptsにLint用コマンドを追加します。
"scripts": {
// 割愛
"lint": "next lint --dir src",
"lint:fix": "next lint --fix"
},
--dir srcオプションを付けることで、srcフォルダのみを対象とさせます。
StyleLintの導入
SASS記法に対するStyleLintの導入について
結論、SASS記法に対してStyleLintの導入はできませんでした。
後述するstylelint-config-recommended-scssなどのプラグインがSASS記法には対応していなかったからです（導入すると大量のエラーが出る）。
なので、もしSASS記法に対してStyleLintを導入したい場合は自分でルールの作成などをする必要がありそうです。
もしいい方法など知っている方がいたらコメント頂けると嬉しいです。🙏
導入の流れはESLintとほぼ同じです。
パッケージのインストール
まずはStyleLintに関するパッケージをインストールします。ついでにSassもインストールしておきます。
$ npm i -D sass
$ npm i -D stylelint stylelint-config-recess-order stylelint-config-recommended-scss
拡張機能のインストール
VSCodeのStyleLintの拡張機能をインストールします。
設定ファイルの作成
プロジェクト直下に.stylelintrc.jsを作成します。
module.exports = {
extends: ["stylelint-config-recess-order", "stylelint-config-recommended-scss"],
rules: {
// ::before, ::afterのコロンを2つにする
"selector-pseudo-element-colon-notation": "double",
// クラス名でアンパサンド（&）は禁止（&:hoverなどはOK）
"scss/selector-no-union-class-name": true,
// シングルクォーテーションに統一
"string-quotes": "single",
},
ignoreFiles: ["**/node_modules/**"],
};
stylelint-config-recommended-scssは様々なルールを導入してくれるプラグインです。また、これより厳格な stylelint-config-standard-scss というプラグインもあります。
これらに関してはこちらの記事で詳しく解説されています。
他にもプロパティの自動並び替えやアンパサンド（&）禁止などのルールを追加しています。特にCSSプロパティは人によって書き方が全く違うので、是非入れることをおすすめします。
package.jsonの編集
package.jsonのscriptsにLint用コマンドを追加します。
"scripts": {
// 割愛
"lint:style": "stylelint '**/*.{css,scss,sass}'",
"lint:style:fix": "stylelint --fix '**/*.{css,scss,sass}'"
},
Prettierの導入
先程設定したESLintとStyleLintをファイル保存時に実行されるようにします。こうすることで、保存時に構文チェックと自動整形を同時に行ってくれます。
パッケージのインストール
まずはPrettierに関するパッケージをインストールします。
$ npm i -D prettier
拡張機能のインストール
VSCodeのPrettierの拡張機能をインストールします。
VSCodeの設定ファイルの作成
プロジェクト直下に.vscodeのフォルダを作り、その中にsettings.jsonファイルを作成します。
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
},
"stylelint.validate": ["css", "scss"],
"css.validate": false,
"scss.validate": false,
"javascript.validate.enable": false,
"typescript.validate.enable": false
}
このような形で設定ファイルを作成することで、現在開いているワークスペースのみにここで定義した設定を適用できます。
Prettierの設定ファイルの作成
プロジェクト直下に.prettierrc.jsと.prettierignoreを作成します。
module.exports = {
trailingComma: 'all', // 可能な限り末尾にカンマを付ける
tabWidth: 2, // インデントのスペースの数
semi: true, // ステートメントの最後にセミコロンを追加
singleQuote: true, // シングルクォートに統一
jsxSingleQuote: true, // JSXでダブルクォートの代わりにシングルクォートを使用する
printWidth: 100, // 折り返す行の長さ
singleAttributePerLine: true, // ひとつの属性ごとに改行する
};
*.md
.prettierignoreには自動整形してほしくないファイルを定義します。
package.jsonの編集
package.jsonのscriptsにPrettier用コマンドを追加します。
"scripts": {
// 割愛
"format": "prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,json}'",
},
自動整形の検証
これでようやく自動整形の設定が終わりました。
.js、.jsx、.scssなどを編集して保存してみてください。自動で整形されたら成功です（うまく動かなかったらVSCodeを再起動してみましょう）。
CSSプロパティやimportファイルの自動並び替えには感動しました。🙌
package.json
package.jsonは何度も編集したので、最終形をこちらに載せておきます。
{
"name": "next",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint --dir src",
"lint:fix": "next lint --fix",
"format": "prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,json}'",
"lint:style": "stylelint '**/*.{css,scss,sass}'",
"lint:style:fix": "stylelint --fix '**/*.{css,scss,sass}'"
},
"dependencies": {
"next": "13.1.2",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"devDependencies": {
"eslint": "^8.32.0",
"eslint-config-next": "^13.1.2",
"eslint-config-prettier": "^8.6.0",
"prettier": "^2.8.3",
"sass": "^1.57.1",
"stylelint": "^14.16.1",
"stylelint-config-recess-order": "^3.1.0",
"stylelint-config-recommended-scss": "^8.0.0"
}
}
最終的なディレクトリ構成
今回解説した内容全てが終わった時のディレクトリ構成も載せておきます（デフォルトの.gitignoreなどは除外してあります）。
.vscode/
node_modules/
public/
src/
.eslintrc.js
.jsconfig.js
.prettierignore
.prettierrc.js
.stylelintrc.js
next.config.js
package-lock.json
package.json
参考記事
以下記事の他にも、記事中で様々な参考記事を掲載させて頂きました。🙏
サンプルコード
Discussion