microCMS × Next.js14(App Router)でブログ構築 3 ~microCMSとの接続設定~

2024/06/08

# Next.js

# microCMS

microcms-js-sdkのインストール

初回の記事で作成したmicroCMSのAPIと接続するため、microCMS公式が公開しているmicrocms-js-sdkのインストールを行います。

$ npm i microcms-js-sdk

package.jsonのdependenciesに追加されていれば完了です。

{
  .
  .
  "dependencies": {
    "microcms-js-sdk": "^3.1.1", // 追加
    "next": "14.2.3",
    "react": "^18",
    "react-dom": "^18"
  },
  .
  .
}

microCMSのAPIとの接続確認

試しに前回の記事で作成したブログAPIを取得して接続確認を行います。

src配下にlibsフォルダを作成し、libsフォルダ内にclient.tsファイルを作成します。

$ mkdir libs
$ touch libs/client.ts

client.ts内にmicroCMSの接続用クライアントを定義します。

import { createClient } from 'microcms-js-sdk'

export const client = createClient({
  serviceDomain: 'サービスドメイン',
  apiKey: 'APIキー',
})

サービスドメインには初回の記事で作成したサービスのドメインを設定します。

APIキーは権限管理→N個のAPIキーから確認できます。

クライアントを定義したら試しにAPIに接続してみます。
page.tsxファイルを編集します。

import { client } from '@/libs/client'

export default async function Home() {
  const { contents } = await client.get({
    endpoint: 'blogs',
  })
  return (
    <div>
      {contents.map((blog) => (
        <article key={blog.id}>{blog.title}</article>
      ))}
    </div>
  )
}

編集内容について軽く説明します。

const { contents } = await client.get({
  endpoint: 'blogs',
})

ここでは先ほど作成したclientを使ってblogsの一覧を取得する処理を作成しています。
endpointには取得したいAPIのエンドポイントを指定します。

エンドポイントは対象のAPI→API設定→基本情報から確認できます。

{contents.map((blog) => (
  <article key={blog.id}>{blog.title}</article>
))}

ここでは配列で渡ってきたブログ一覧をmapメソッドで一件ずつ取り出し、タイトルを表示しています。

vscode上でblogの型エラーが表示されていますが、今回は接続確認が目的なので無視します。

編集が完了したら、プロジェクトを立ち上げてlocalhost:3000にアクセスします。

$ npm run dev

ブログAPI作成時に作られたサンプル記事のタイトルが表示されていれば接続確認は完了です。

表示されない、エラーが出る場合はサービスドメイン、APIキーが間違っていないか再度確認してみてください。

環境変数の設定

サービスドメイン、APIキーは外部に公開したくないので環境変数の設定を行います。
プロジェクトのルートに.env.localファイルを作成して、環境変数を定義します。　

MICROCMS_SERVICE_DOMAIN=サービスドメイン
MICROCMS_API_KEY=APIキー

先ほどサービスドメイン、APIキーを直書きしていた箇所を環境変数を参照するように変更します。

import { createClient } from 'microcms-js-sdk'

export const client = createClient({
  serviceDomain: process.env.MICROCMS_SERVICE_DOMAIN!,
  apiKey: process.env.MICROCMS_API_KEY!,
})

これでNext.jsとmicroCMSの接続設定は完了です。
次回はブログのレイアウト作成を行います。

share on