m's blog

備忘録とかメモとか

Next.js テンプレートを作ってみました | with TypeScript, Jest, Cypress, Sentry, GTM, ESLint, etc.

Next.js テンプレートを作ってみました / with TypeScript, Jest, Cypress, Sentry, GTM, ESLint, etc.

Next.js 用のテンプレート を作ってみたので、テンプレートの内容について、簡単に解説したいと思います。

2020/06/02 時点でテンプレートに含まれる内容は以下の通りです。

  • Next.js
  • TypeScript
  • Googleタグマネージャー
  • CI/CD (GitHub Actions + Netlify)
  • Jest (+ Enzyme)
  • Cypress
  • ESLint
  • Prettier
  • stylelint
  • EditorConfig
  • husky
  • Material-UI
  • styled-components
  • Sentry

※ 上記以外の項目については、テンプレート中の package.json などを参考にしてください。

目次

はじめに

現時点では、静的コンテンツを Netlify で公開することを前提にした構成 となっています。

SSR や API 機能の利用は考慮していないため、動作しない場合があります。

SSR や API 機能を利用する場合は、個別で調整して利用をお願いします。

ベース

以下の公式サンプルをベースに使用しています。

TypeScript Next.js example

構成

プロジェクトルート

他のファイルの import 時に ~をプロジェクトルートのように指定できます

例えば、プロジェクトルートから見て、src/sample/Sample.ts にあるファイルを import する場合は、以下のようにパスを指定することができます。

import Sample from '~/src/sample/Sample'

環境変数

環境変数の使用については、以下のページを参考にしてください。

Google タグマネージャー

Google タグマネージャーを使用する場合は、環境変数 GTM_CONTAINER_ID に対象コンテナのコンテナ ID を設定 してください。

ローカル環境では .env.development.local などで定義してください。

デプロイ環境では、GitHub リポジトリの Secret などで定義してください。

Google アナリティクス

Google アナリティクスを利用する場合は、Google タグマネージャーで設定を追加してください。

テスト

Jest (+ Enzyme)

以下のコマンドで、テストの実行してください。

# カバレッジなし
yarn test

# カバレッジあり
yarn test:coverage

Cypress

テストランナーを起動する場合は、以下のコマンドを実行してください。

# テストランナーの起動
yarn cypress:open

テストを実行するには、以下のコマンドを実行してください。

# テストの実行
yarn cypress run

テストを実施する前に、yarn dev コマンドなどによりアプリの起動が必要です。

デプロイ時の E2E テストについて

レコード機能を使用する場合

GitHubリポジトリページ > Settings > Secrets で、以下の2つの secret を追加してください。

  • CYPRESS_PROJECT_ID : Cypress の対象プロジェクトの「Project ID」
  • CYPRESS_RECORD_KEY : Cypress の対象プロジェクトの「Record Key」

「Project ID」と「Record Key」は Cypress ダッシュボード > 対象プロジェクト > Project settings から確認できます。

cypress.jsonprojectID を指定している場合はテストランナーの Settings ページからも確認可能です。

より詳細な内容は、以下のページを参照してください。

公式ドキュメント Projects#Identification

レコード機能を使用しない場合

各ワークフローの cypress run コマンドから、--record フラグを削除してください。

※ 2020/06/02 時点では、stagingproduction ワークフローで --record フラグを使用。

E2E テストを実施しない場合

各ワークフローから、E2E テスト実施部分をコメントアウト、または削除してください。

自動整形

ESLint

以下のコマンドでコードチェックを実行してください。

# 自動修正なし
yarn lint

# 自動修正あり
yarn lint:fix

pre-push でコードチェック(自動修正なし)が実行されるように設定しています。

コードチェックが原因でプッシュに失敗した場合は、yarn lints:fix で修正して、再プッシュしてください。

Prettier

ESLint と連携しています。特に設定する内容はありません。

stylelint

以下のコマンドでコードチェックを実行してください。

# 自動修正なし
yarn stylelint

# 自動修正あり
yarn stylelint:fix

ESLint と同様に、pre-push でコードチェック(自動修正なし)が実行されるように設定しています。

コードチェックが原因でプッシュに失敗した場合は、yarn lints:fix で修正して、再プッシュしてください。

editorconfig

ESLint、Prettier、sytlelint の設定に合わせて随時調整しています。

Fix all

コードチェックでエラーが発生した場合は、以下のコマンドで修正してください。

yarn lints:fix

エラーレポート

Sentry

Sentry を使用する場合は、環境変数 NEXT_PUBLIC_SENTRY_DSN に対象Sentryプロジェクトの DSN の値を設定 してください。

ローカル環境では .env.development.local などで定義してください。

デプロイ環境では、GitHub リポジトリの Secret などで定義してください。

ビルド & デプロイ

アプリ起動

development モード

development モードでアプリを起動する場合は、以下のコマンドを実行してください。

yarn dev

ホットリロードやエラーレポートなどが含まれます。

デフォルトだと http://localhost:3000 で起動します。

production モード

production モードでアプリを起動する場合は、以下のコマンドを実行してください。

yarn start

production モードで起動する場合、起動前にビルドが必要です。

起動の前にyarn build コマンドでビルドを行ってください。

development モードと同様に、デフォルトだとhttp://localhost:3000 で起動します。

静的コンテンツの生成

静的コンテンツの生成は、以下のコマンドで行ってください。

yarn export

静的コンテンツの生成の前にビルドが必要です。

生成前に yarn build コマンドでビルドを行ってください。

Netlify 公開用ワークフロー

「Netlify 公開用ワークフロー」には、以下の記事で紹介している「Netlify 向けデプロイテンプレート」を活用しています。

ワークフローの設定の詳細については、以下の記事を参照してください。

※ ビルド工程など、上記記事で紹介しているテンプレートから一部調整しています。

その他

その他、テンプレートには以下の内容が含まれています。

  • Material-UI
  • styled-components

不要な場合はパッケージなどから削除するなどして、調整してください。

まとめ

以上、作成した Next.js 用のテンプレートについて、簡単に解説してみました。

不具合や改善案などがあれば、コメントなどから教えてもらえると助かります(*´▽`*)ノシ