🏗️
Next.js + TypeScript 環境構築 v12.1
Next.js + TypeScript の環境構築忘備録です。
主な環境のバージョン
- next: v12.1.0
- typescript: v4.5.5
- eslint: v8.10.0
1.Next.jsの環境を作成
tpescript用の環境作成コマンドよしなにやってくれる便利なやつ。
yarn create next-app --typescript
ディレクトリの移動
ソースはsrcディレクトリに入っている方が好みなので、移動する。
mkdir src
mv pages src/pages
mv styles src/styles
2.ESLintの設定
設定方法はこちらの記事を参考にさせていただきました。
既存のファイルを破棄します。
rm .eslintrc.json
対話式のコマンドでESLintの設定を行なっていきます。
yarn create @eslint/config
私の解答は以下です。
（訳）どのようにESLintを使うか？
? How would you like to use ESLint? …
To check syntax only
To check syntax and find problems
❯ To check syntax, find problems, and enforce code style
（訳）どのようなモジュールを使うか？
? What type of modules does your project use? …
❯ JavaScript modules (import/export)
CommonJS (require/exports)
None of these
（訳）使用しているフレームワークは？
? Which framework does your project use? …
❯ React
Vue.js
None of these
（訳）TypeScriptは使っているか？
? Does your project use TypeScript? No / › Yes
（訳）コードはどこで走らせるか？
? Where does your code run? … (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
Node
（訳）スタイルの設定はどのようにするか？
? How would you like to define a style for your project? …
❯ Use a popular style guide
Answer questions about your style
（訳）どのスタイルガイドにするか？
? Which style guide do you want to follow? …
Airbnb: https://github.com/airbnb/javascript
Standard: https://github.com/standard/standard
❯ Google: https://github.com/google/eslint-config-google
XO: https://github.com/xojs/eslint-config-xo
（訳）設定ファイルの拡張子は？
? What format do you want your config file to be in? …
❯ JavaScript
YAML
JSON
eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest eslint-config-google@latest eslint@>=5.16.0 @typescript-eslint/parser@latest
（訳）これらのパッケージを今npm installするか？
? Would you like to install them now with npm? › No / Yes
yarnを利用しているので、Noを選択して下記のコマンドを実施しました。
yarn add -D eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest eslint-config-google@latest @typescript-eslint/parser@latest
生成されたeslintrc.jsにNext.js用の設定を加えます。
eslintrc.js
module.exports = {
'env': {
'browser': true,
'es2021': true,
},
'extends': [
'plugin:@typescript-eslint/recommended',
'plugin:react/recommended',
'google',
+ 'next/core-web-vitals',
],
'parser': '@typescript-eslint/parser',
'parserOptions': {
'ecmaFeatures': {
'jsx': true,
},
'ecmaVersion': 'latest',
'sourceType': 'module',
},
'plugins': [
'react',
'@typescript-eslint',
],
'rules': {
},
};
あとは、好みのルールやプラグインを加えてください。
今回実施した私の最終形はこちらです
eslintrc.js
module.exports = {
'env': {
'browser': true,
'es2021': true,
},
'extends': [
'eslint:recommended',
'plugin:@typescript-eslint/eslint-recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react/recommended',
'next/core-web-vitals',
'google',
],
'parser': '@typescript-eslint/parser',
'parserOptions': {
'ecmaFeatures': {
'jsx': true,
},
'ecmaVersion': 'latest',
'sourceType': 'module',
},
'plugins': [
'react',
'react-hooks',
'@typescript-eslint',
],
'rules': {
'semi': ['error', 'never'],
'require-jsdoc': ['off'],
'spaced-comment': ['off'],
},
}
3.pathpidaを導入
ルーティングを管理するのにpathpidaを適応する。
next-setupに従ってパッケージの追加とpackage.jsonのscriptを書き換える
yarn add pathpida npm-run-all --dev
package.json
{
"scripts": {
"dev": "run-p dev:*",
"dev:next": "next dev",
"dev:path": "yarn path -w",
"build": "yarn path && next build",
"path": "pathpida -o ./src/lib",
}
}
$path.tsが出力されるためのディレクトリを用意
mkdir src/lib
$path.tsを出力
yarn path
4.aliasの設定
import { Layout } from '@/components/Layout'とかで呼び出せるようにします。
tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"],
"/*": ["*"]
}
// ...
}
// ...
}
以上で基本的なNext.js + TypeScriptの環境構築を終えます。
終わりに
かけ足でしたがいかがでしたでしょうか？
スクラップにまとめたものを記事化したものなので、至らぬ点・不備等あれば気軽にコメントください！
Discussion