microCMS 公式の企業メディア向けテンプレートです。 下記の機能があります。
- 記事ランキングの自動生成（GitHub Actions の cron を利用）
- サイトマップ自動生成
- 記事のピックアップ機能
- 広告の挿入機能
- Google Tag Manager
- もっと見る機能
- タグ、カテゴリー機能
Node.js 18 以上
複数サービスと連携して動作させる必要があるため、各種登録作業が多いですがお付き合いください。
microCMS の設定をご覧下さい。
Google Analytics の設定をご覧下さい。
Google Tag Manager の設定をご覧下さい。
Google Cloud Platform の設定をご覧下さい。
ルート直下に.env.localファイルを作成し、下記の情報を入力してください。
NEXT_PUBLIC_MICROCMS_GET_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
NEXT_PUBLIC_MICROCMS_SERVICE_DOMAIN=xxxxxxxx
BASE_URL=xxxxxxxx
NEXT_PUBLIC_GTM_ID=GTM-xxxxxxxx
NEXT_PUBLIC_MICROCMS_GET_API_KEY
microCMS 管理画面の「サービス設定 > API キー」から確認することができます。
記事一覧ページの「もっと見る」ボタン押下時にクライアントサイドからデータ取得を行うする必要があるため、NEXT_PUBLIC_をつけています。
メソッドは GET に限定している前提です。
NEXT_PUBLIC_MICROCMS_SERVICE_DOMAIN
microCMS 管理画面の URL（ https://xxxxxxxx.microcms.io ）の xxxxxxxx の部分です。
BASE_URL
デプロイ先の URL です。プロトコルから記載してください。
例）
開発環境 → http://localhost:3000
本番環境 → https://xxxxxxxx.vercel.app/ など
NEXT_PUBLIC_GTM_ID
Google Tag Manager の ID
記事ランキングの自動生成するために、GitHub Actions にて下記の処理を行います。
- Google Analytics からのデータ取得
- API 経由で microCMS のコンテンツ更新
その際に外部公開してはならない値を扱うため、GitHub の Repository secrets に下記の値を登録します。
GA_PROPERTY_ID
Google Analytis のプロパティ ID
GOOGLE_SERVICE_ACCOUNT_KEY
Google Cloud Platform のサービスアカウントキー（長い JSON をそのまま登録）
{"type": "service_account", /* 省略... */,"universe_domain": "googleapis.com"}
MICROCMS_PATCH_API_KEY
microCMS 管理画面の「サービス設定 > API キー」から確認することができます。
メソッドは PATCH に限定してください。（GET 用のキーとは別で用意する）
MICROCMS_SERVICE_DOMAIN
microCMS 管理画面の URL（https://xxxxxxxx.microcms.io）の xxxxxxxx の部分です。
- パッケージのインストール
npm install- 開発環境の起動
npm run dev- 開発環境へのアクセス
http://localhost:3000にアクセス
本テンプレートでは記事ランキングの自動更新のために GitHub Actions の cron を利用しています。 Google Analytics や Google Cloud Platform などの各設定が完了しないと正常に動作しないため、cron 処理が行われるたびにエラーが発生してしまう可能性があります。
エラーが気になる場合は、.github/workflows/ranking.ymlの下記コードをコメントアウトしてください。
schedule:
- cron: '0 0 * * *'本テンプレートでは Google Adsense にも対応しています。 （広告掲載には審査が必要です。デフォルトでは該当コードをコメントアウトしてあります。）
オンにしたい場合はapp/layout.tsx内のスクリプト読み込み部分と、app/_components/Ad/index.tsx内のコメントアウトを解除してください。
その際には、data-ad-clientなどの値は Adsense から取得してきた値に適宜変更してください。