Next.js + TypeScript を簡単に環境構築（入門）

環境などは以下のような感じです。

環境	名称
OS	Mac Catalina
エディタ	VS Code
CSS	Styled-Components
静的型付け	TypeScript
FW	Next.js
整形	ESLint、Prettier

1. 導入

少数の仲間と共同開発する際に行った設定を備忘録として示します。

1-1. Next.js

Next.js とは React.js のフレームワークのひとつです。
従来の CSR（Client Side Rendering）と違い、SSG や ISR（Incremental Static Regeneration）の技術を導入し、これらによって SEO 対策（HTML を事前生成、高速表示）が可能となっています。

詳しくは Vercel をご確認いただければと思います。

1-2. TypeScript

一言でいうと
「Microsoft が開発した JavaScript のスーパーセットの静的型付け言語」です。

• JavaScript のスーパーセット・・・JavaScript の上位互換、すなわち JavaScript として機能を全て含みつつ拡張したものである、ということです。◎ の内側の円が JavaScript、外側の円が TypeScript。
• 静的型付け言語・・・対となる動的型付け（JavaScript）がありますが、これは変数の型が状況に応じて変わるということです。Typescript は静的型付けであり、C や Java のように厳格に定義することができます。 参考：TypeScript の概要

とりあえずは JavaScript を改良したやつです。

2. 環境構築

少々長いですがお付き合いいただけると幸いです。

2-1. Node.js インストール

まずはターミナルを起動し、以下のコマンドを実行してインストールされているか確認します。

npx -v
# 7.19.1 などが表示される

インストールされていなければ、公式から推奨版をダウンロードするか homebrew でインストールしてしまいましょう。
Node.js 公式からダウンロード

# homebrew でインストール
brew install node@14

そしてパスを通してあげます。

export PATH="/usr/local/opt/node@14/bin:$PATH"

これで終わりです。以下のコマンドで確認してみましょう。

node -v
# v14.15.0などと表示されれば成功

npx -v
# 7.19.1などと表示されれば成功

nodebrew でインストール方法などは
こちらの記事を参考にしてください。

2-2. Next.js インストール

以下のコマンドで Next.js の初期環境をまとめてインストールします。
現在のディレクトリに your-app-name （任意のプロジェクト名称）というディレクトリを作り、そのフォルダ下に環境ができあがります。
なお画像ではTerminalアプリからコマンドを入力していますが、VS Codeには内蔵のターミナルがありますので、そちらからコマンドを入力しても良いです。

# your-app-name　はお好みの名前に設定してください
npx create-next-app your-app-name

作成したディレクトリへ移動し、

cd your-app-name

開発サーバーを起動させます。Ctrl + Cで停止できます。

npm run dev

http://localhost:3000 　にアクセスしてください。以下のような画面が見れたら成功です。

next dev

sh: next: command not found

とエラーが出る場合は以下のコマンドを実施してください。

npm upgrade

2-3. TypeScript 導入

ターミナルから以下のコマンドを入力します。必要なTypeScriptの依存関係がインストールされるでしょう。

npm install -D typescript @types/react @types/react-dom @types/node

2-3-1. TypeScript の設定ファイルを追加

ターミナルで以下のコマンドを入力します。プロジェクトのルートディレクトリにtsconfig.jsonを作成します。

touch tsconfig.json

tsconfig.json ファイルの内容は以下の通りです。

tsconfig.json

{
  "compilerOptions": {
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "esnext",
    "target": "es6",
    "jsx": "preserve",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "moduleResolution": "node"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

2-3-2. JS ファイルを TS ファイルに変更

今の状態ですと拡張子がJavaScriptの.jsなのでTypeScriptを示す.tsに変更します。

# JSファイルをTS、TSXファイルに変換
mv pages/index.js pages/index.tsx
mv pages/_app.js pages/_app.tsx
mv pages/api/hello.js pages/api/hello.ts

2-4. Next.js の設定を追加

まずはディレクトリ構成を変更します。src フォルダ直下に各ソースコードを配置します。

# src ディレクトリへ移動
mkdir src src/components src/utils
mv pages/ src/pages
# Next.js の設定ファイルを作成
touch next.config.js next-env.d.ts

Next.js の設定ファイル next.config.js はプロジェクトのルートディレクトリに配置してください。コピペした時点でエラーが出力されると思いますが、２−５.ESLintの設定で消えるのでそのまま進めましょう。

next.config.js

// ESLintの設定 eslint-disable を追加する
/* eslint-disable
    @typescript-eslint/no-var-requires,
    @typescript-eslint/explicit-function-return-type
*/

next-env.d.ts

/// <reference types="next" />
/// <reference types="next/types/global" />

ESLint と呼ばれるリンタの一部設定をオフにすることで、他のプラグインと競合するのを防止しています。

2-5. ESLint 設定

コーディングスタイルに一貫性をもたせるために導入します。例えば以下の条件を適応させたい場合です。

• セミコロンは必要でない場合、省略
• ダブルクオーテーションではなくシングルクォーテーションを使用
• インデントにはスペース

JavaScript のリンターである ESLint に TypeScript のプラグインを合わせて使うことが推奨されています。

以下のコマンドで必要な依存関係をインストールします。

npm install -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

ESLint の設定ファイル.eslintrc.js をルートディレクトリに作成します。

touch .eslintrc.js

内容は以下のとおりです。

eslintrc.js

module.exports = {
  root: true, // プロジェクトのルートに配置していると教えている
  env: {
    es2020: true,
    node: true,
  },
  parser: "@typescript-eslint/parser", // ESLintにTypeScriptを適応
  parserOptions: {
    sourceType: "module",
    ecmaVersion: 2020,
    tsconfigRootDir: __dirname,
    project: ["./tsconfig.eslint.json"],
  },
  plugins: ["@typescript-eslint"], // TypeScriptプラグインのルールを適用
  extends: [
    "eslint:recommended", //ESLintのJavaScriptルールを適用
    "plugin:@typescript-eslint/recommended", // 型チェックが不要なルールを適用
    "prettier",
    "prettier/@typescript-eslint", // Prettierでカバーできるルールを無効化
  ],
  rules: {},
};

2-6. prettier 設定

prettier（ぷれてぃあ）という有名すぎるコードフォーマッタです。ESLint ではエラーを教えてくれるだけでいささか不親切であるため、自動的に補完してくれるフォーマッタを導入します。

以下のコマンドでインストールしましょう。

npm i -D prettier eslint-config-prettier

設定ファイルをルートディレクトリに追加します。

touch .prettierrc

設定ファイル.prettierrc の内容は以下のとおりです。

.prettierrc

{
  "printWidth": 100,
  "singleQuote": false,
  "trailingComma": "es5",
  "semi": true,
  "tabWidth": 4
}

プロパティ	効果
printWidth	繰返す行の長さを指定
singleQuote	ダブルクオーテーションを使用
trailingComma	Styled-末尾のカンマの設定
semi	末尾にセミコロンを付加
tabWidth	タブのスペースを４つぶん

デフォルト値や細かい設定項目を知りたい方はこちらのリンクをご参照ください。

Prettier の設定

2-7. Styled Components 導入

npm install styled-components
npm install -D @types/styled-components babel-plugin-styled-components

設定ファイル.babelrcをルートディレクトリに作成します。

# .babelrcを作成
touch .babelrc

babel の設定ファイル.babelrc の内容は以下のとおりです。

{
    "presets": [
      "next/babel"
    ],
    "plugins": [
      [
        "babel-plugin-styled-components",
        {
          "ssr": true,
          "displayName": true,
        }
      ]
    ]
  }

Next.js と styled-components が実行される想定の環境が異なるため、仮に未設定の状態で SSR が行われるとスタイルがうまく効かない状態でページが表示されてしまいます。

babel とはJavaScript のコンパイラのこと。 React の JSX や TypeScript から JavaScript へ変換する。

2-8 package.json

package.json の scripts の dev というプロパティの値を変更しましょう。

package.json

 "scripts": {
    "dev": "NODE_OPTIONS='--inspect' next",
    "start": ...,
    "build": ...,
    ...
 }

これはアプリ起動時に使った

npm run dev

のコマンドで実行されるオプションを設定しています。
デバッグサーバが起動し、ブレークポイントを設定して動作確認をすることが可能です。

2-9. CSS リセット

CSS のリセットとは、ブラウザ間での表示差異をなくすために適応させるスタイルのことを言います。方法は２つあり、CSS ファイルを DL してプロジェクトにファイルを配置する、Node のパッケージとしてインストールする方法があります。
今回は後者を採用します。

ターミナルで以下のコマンドを入力します。

npm install --save-dev modern-css-reset

次に pages/_app.tsx で import します。

pages/_app.tsx

import { AppProps } from "next/app";
import "/styles/globals.css";
import "modern-css-reset/dist/reset.min.css"; //CSSをリセット

function MyApp({ Component, pageProps }: AppProps): JSX.Element {
    return <Component {...pageProps} />;
}

export default MyApp;

3 VS Code 共通化設定

下準備として以下のコマンドを実行し、プロジェクトで共通化したい設定フォルダ及びファイルを作成します。

mkdir .vscode; touch .vscode/extensions.json .vscode/launch.json .vscode/settings.json

これらファイルを Git で共有することで開発者間で使用するプラグインの共通化や、新規参加者が円滑に環境構築できるというメリットがあります。.vscode ディレクトリをプロジェクトのルートに配置し、.vscode ディレクトリの配下に３つの設定ファイルを作成します。

3-1 extensions.json

プラグインの共通化の設定できる便利なやつです。

これを配置して再起動をかけると、右下の方に「おすすめプラグインをインストールしますか？」みたいなポップアップが出てくるので、言われるがまま作業を進めましょう。
内容を独断と偏見により以下にまとめましたので、不要なものは適宜削除してください。

.vscode/extensions.json

{
  "recommendations": [
    "dbaeumer.vscode-eslint", // 必須 ESLintプラグイン
    "esbenp.prettier-vscode", // 必須 Prettierプラグイン
    "msjsdiag.debugger-for-chrome", // GoogleChromeでデバッグする人向け
    "eamodio.gitlens", // 高機能のGitプラグイン
    "gruntfuggly.todo-tree", // TODOコメントを強調
    "jpoissonnier.vscode-styled-components", // Styled-Componentsを見やすく
    "mosapride.zenkaku", // 全角スペースの視覚化
    "streetsidesoftware.code-spell-checker", // 英単語のスペルミス確認
    "pkief.material-icon-theme", // vscodeのアイコンをかっこよく
    "coenraads.bracket-pair-colorizer-2", // 括弧の色分け
    "dsznajder.es7-react-js-snippets", // rafceなどとタイプすると便利なスニペットが展開
    "ms-vsliveshare.vsliveshare", // 同一ファイルの共同編集が可能
    "ms-ceintl.vscode-language-pack-ja" // VS Codeを日本語化
  ]
}

3-2 launch.json

デバッグの三角ボタンを押したときの、ブレークポイントを配置してデバッグするときの設定です。

.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      // For server side rendering debug
      "type": "node",
      "request": "launch",
      "name": "Next: Node",
      "runtimeExecutable": "npm",
      "cwd": "${workspaceFolder}/src",
      "runtimeArgs": ["run", "dev"],
      "port": 9229,
      "console": "integratedTerminal"
    },
    {
      // For client side rendering debug
      "type": "chrome",
      "request": "launch",
      "name": "Next: Chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:///./*": "${webRoot}/src/*"
      }
    }
  ]
}

3-3 settings.json

VS Code のエディタとしての設定をプロジェクトで共通化できます。

.vscode/settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true, // ファイル保存時にESLintでフォーマット
    "source.organizeImports": true // 未使用の import文 を削除 & 自動ソート
  },
  "eslint.format.enable": false,
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "javascript.suggest.paths": true, // importやrequireコールの中のパスの提案
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "typescript.suggest.paths": true, // importやrequireコールの中のパスの提案
  "typescript.enablePromptUseWorkspaceTsdk": true
}

設定に関しては好みの分かれる部分も多々あるので必要最小限です。未使用の import文 を削除 & 自動ソートする設定をいれておくと、import宣言部がちらからなくて個人的に便利です。設定項目を追求したい方は以下の公式リンクが参考になるかもしれません。
User and Workspace Settings

4. おわりに

作業としては以上です。ここまで読んでくださりありがとうございました。
ディレクトリ構成はだいたい以下のようになってると思います。

５. 参考文献など

以下のサイト様にはお世話になりました。圧倒的感謝します。

Next.js 日本語翻訳プロジェクト

2020 年師走における Next.js をベースとしたフロントエンドの環境構築

Next.js 超入門 – セットアップから Vercel への公開まで

Homebrew Formulae

Next.js に styled-components を取り込む方法【Babel の設定が必要】

Markdown 記法 チートシート