Next.js x Typescriptでサクッと開発環境を整える

これはなに？

Next.js x Typescriptで開発環境を作成したので備忘録として記載しました

作成物

導入手順

1. projectを作成する

shell

npx create-next-app --ts $プロジェクト名

--typescript or --tsでtypescript用に作成されます

こんな画面が出たらokです

他にもオプションがあってfirebaseやらframer-motionをデフォルトで入れられたりするので色々と試せそう

2. 実行してみる

上の画像に従って実行してみます

ソースコードも.tsor.tsxで作成されていることが確認できるかと思います

3. Lint周りを整える

ここからはマストではなく入れておくとちょっと便利だよといった機能の紹介になります

https://nextjs.org/docs/basic-features/eslint
公式ドキュメントにも書かれていますがNext.jsは11.0.0からlintコマンドが追加されました

By default, Next.js will run ESLint for all files in the pages/, components/, and lib/ directories. However, you can specify which directories using the dirs option in the eslint config in next.config.js for production builds:

デフォルトでチェックしてくれるのはpages/,components/,lib/ の3つのようです

今回はデフォルトで入っているeslintに加えてprettierも導入していきます

$ npm install -D prettier eslint-config-prettier

上記が完了したら
以下のファイルを変更します

.eslintrc.json

{
  "extends": ["next/core-web-vitals", "prettier"]
}

以下のprettierのルールを記載するファイルを作成

.prettierrc.js

module.exports = {
  singleQuote: false,
};

完了したらpackage.jsonのscriptsに以下を追記して実行できるようにします

{
//~~省略~~
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "format": "prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,json,css}'"
  },
//~~省略~~
}

実行

$ npm run format

結果を見てみると、.prettierrc.jsで設定した通りシングルクォートからダブルに変わっていることが確認できます

所感

今回はプロジェクト開発の第一歩目を記事として書いてみました

特に3は複数人で開発する際に可読性を下げずに進められるのでおすすめです

Let's enjoy coding life!