【Next.js,microCMS】で作るブログ(公式チュートリアル補足編)

IT
2022.12.04

少しづつ、Next.jsやmicroCMSについて理解を深めようということで、何回かに分けて書いていこうと思います。今回は下２つのリンクを参考に、自分が躓いたポイントについてを自分の備忘録として書いていきます。

こちらがmicroCMSが公開している記事

microCMS + Next.jsでJamstackブログを作ってみよう
本記事はmicroCMSとNext.jsを組み合わせてJamstackブログを構築するチュートリアルです。microCMSでAPIを作成し、Next.jsでデータを取得して静的なブログページを生成する方法、Vercelを用いたデプロイと、Webhookによる自動ビルド設定などを紹介しています。初心者でも取り組みやすくな...
blog.microcms.io

こちらが上のリンクだけでは躓いたため参考になった記事

microCMS × Next.js（TypeScript）で個人ブログを作る - Qiita
概要microCMS、Next.js（TypeScript）を使ってブログサイトを作成した手順と、追加で実装した機能について、またその過程で学んだことの備忘録記事です。基本的には公式のチュートリ…
qiita.com

前提条件

  • Next.jsのプロジェクトがコマンドで立ち上がる状況になっていること
    ※Node.jsのインストールなど
  • MicroCMSのアカウント登録を済ませていること

躓きポイント解説

SERVICE_DOMAINとAPI_KEYについて

１つ目のリンク先だとSERVICE_DOMAINについてが、(個人的に)ふわっと書かれていたので、２つ目のリンクで補完しました。.envファイルにはSERVICE_DOMAINとAPI_KEYの二つの情報を載せておく方が管理もしやすくて便利かなと思います。

具体的には、まず作成したプロジェクトのトップに「.env.development.local」ファイルを作成します。その中のファイルに下のように記述しましょう。※xx〜の部分は該当するサービスドメインやAPIKEYの情報を入力してください。

SERVICE_DOMAIN=xxxxxxxxxxx
API_KEY=xxxxxxxxxxxx

また、「microcms-js-sdkの準備」の部分も２つ目のリンク先を参考に「serviceDomain:」以降と「apiKey:」以降を書き換えましょう。

具体的には、「microcms-js-sdk」をnpmのコマンドでインストールしたのち、 libsフォルダの下に「client.js」ファイルを新しく作成します。その後、「client.js」のファイルを以下のように記述します。

import { createClient } from “microcms-js-sdk”;

export const client = createClient({
serviceDomain: process.env.SERVICE_DOMAIN || “”,
apiKey: process.env.API_KEY || “”,
});

タイトルのリストが表示できたら、一旦目標達成とします。

まとめ

以上、掻い摘んでの解説になりますが、タイトルの表示まで終えました。今回Next.jsは初めて触るので、次回はNext.jsの基本的な知識について触れていきたいと思います。

タイトルとURLをコピーしました