microCMS

Getting Started

こちらのドキュメントでは、microCMSをNext.jsで利用するための最短手順を示します。
初めてNext.jsからmicroCMSをご利用される場合にはまずはこちらの手順をお試しください。

事前に確認が必要なこと

  • microCMSのアカウント登録やサービス作成、API作成の仕方を理解している必要があります。操作マニュアルなどをご確認ください。
  • Next.jsで開発するためにNodeとnpmが必要になります。ご自身の開発環境にインストールしてください。


はじめに
https://document.microcms.io/manual/getting-started
GitHub - microcmsio/microcms-js-sdk: microCMS JavaScript SDK.
https://github.com/microcmsio/microcms-js-sdk

microCMSのセットアップ

まずはmicroCMSで非常に単純なAPIを作成します。

  • オブジェクト形式
  • テキストフィールド1つ


設定例を以下に示していきます。APIの作成の詳細手順についてはAPIの作成もご参照ください。

APIの作成
https://document.microcms.io/manual/create-api

APIの作成画面で適当なAPI名とエンドポイントを入力します。



次にオブジェクト形式を選択します。



最後にフィールドを設定します。今回はテキストフィールドを一つのみ設定します。



上記設定でAPIを作成すると非常にシンプルな入稿画面ができあがるため値を入稿して公開します。



以下のようなcurlコマンドでJSONを取得できることも確認しておきましょう。(ターミナル等を開かなくても、上記画面内の「APIプレビュー」で即座に確認可能です)

curl "https://YOUR_SERVICE.microcms.io/api/v1/YOUR_ENDPOINT" -H "X-API-KEY: XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"

Next.jsプロジェクトの準備

次にNext.jsのプロジェクトを作成します。Next.jsが公式で公開しているCLIを使います。下記のコマンドを実行してみましょう。

npx create-next-app next-microcms

プロジェクト作成が完了後、開発サーバーを立ち上げてみましょう。devコマンドを使います。

cd next-microcms
npm run dev

そして、localhost:3000にアクセスします。作成に成功してる場合下記のような画面がブラウザにでます。

microcms-js-sdkの初期化

最初に公式で提供しているmicrocms-js-sdkをインストールします。

$ npm install microcms-js-sdk

そして、libsフォルダの中にclient.jsを作成してSDKの初期化を行います。API_KEYはサービス設定 > API-KEYから確認可能です。service-domain api-Keyを設定してください。

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

export const client = createClient({
  serviceDomain: 'service-domain',  // service-domain は XXXX.microcms.io の XXXX 部分
  apiKey: 'api-key',
});

microCMSから情報を取得して表示

次に先ほど作成したmicroCMSのAPIから情報を取得して画面に表示を行います。pages/index.jsを編集しましょう。

import Head from "next/head";
import styles from "../styles/Home.module.css";
import { client } from '../libs/client';

export default function Home({ data }) {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>{data.text}</h1>
        <p className={styles.description}>
          Get started by editing <code className={styles.code}>pages/index.js</code>
        </p>
      </main>
    </div>
  );
}

export const getStaticProps = async () => {
  const data = await client.get({
    endpoint: 'hello',
  });

  return {
    props: {
      data,
    },
  };
};

ここでは、getStaticPropsを使ってmicroCMSのデータを取得しています。これは、ビルド時にサーバー側で呼ばれる関数です。この部分の処理は最終的にバンドルJSに含まれません。ビルド時にデータを取得し静的なHTMLを出力するために必要です。今回は、dataとしてmicroCMSで取得したデータを渡しています。

この状態でlocalhost:3000にアクセスしてみましょう。


microCMSの入稿内容を変更して画面表示される内容が変わることも合わせてご確認ください。