🏗️

Next.js + TypeScript 環境構築 v12.1

2021/09/09に公開約4,400字

Next.js + TypeScript の環境構築忘備録です。

主な環境のバージョン

  • next: v12.1.0
  • typescript: v4.5.5
  • eslint: v8.10.0

1.Next.jsの環境を作成

https://nextjs.org/docs#setup

tpescript用の環境作成コマンドよしなにやってくれる便利なやつ。

yarn create next-app --typescript

ディレクトリの移動

ソースはsrcディレクトリに入っている方が好みなので、移動する。

mkdir src
mv pages src/pages
mv styles src/styles

2.ESLintの設定

設定方法はこちらの記事を参考にさせていただきました。
https://zenn.dev/hiroko_ino/articles/eslint-prettier-husky-2022

既存のファイルを破棄します。

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を導入

https://github.com/aspida/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/*"],
      "/*": ["*"]
    }
    // ...
  }
  // ...
}

https://nextjs.org/docs/advanced-features/module-path-aliases

以上で基本的なNext.js + TypeScriptの環境構築を終えます。

終わりに

かけ足でしたがいかがでしたでしょうか?
スクラップにまとめたものを記事化したものなので、至らぬ点・不備等あれば気軽にコメントください!

Discussion

ログインするとコメントできます