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 機能を利用する場合は、個別で調整して利用をお願いします。
ベース
以下の公式サンプルをベースに使用しています。
構成
プロジェクトルート
他のファイルの 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.json
で projectID
を指定している場合はテストランナーの Settings
ページからも確認可能です。
より詳細な内容は、以下のページを参照してください。
公式ドキュメント Projects#Identification
レコード機能を使用しない場合
各ワークフローの cypress run
コマンドから、--record
フラグを削除してください。
※ 2020/06/02 時点では、staging
と production
ワークフローで --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 用のテンプレートについて、簡単に解説してみました。
不具合や改善案などがあれば、コメントなどから教えてもらえると助かります(*´▽`*)ノシ