Getting Started
こちらのドキュメントでは、microCMSをGatsbyで利用するための最短手順を示します。
初めてGatsbyからmicroCMSをご利用される場合にはまずはこちらの手順をお試しください。
事前に確認が必要なこと
- microCMSのアカウント登録やサービス作成、API作成の仕方を理解している必要があります。操作マニュアルなどをご確認ください。
- Gatsbyで開発するためにNodeとnpmが必要になります。ご自身の開発環境にインストールしてください。

- はじめに
- https://document.microcms.io/manual/getting-started
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"
Gatsbyプロジェクトの準備
次にGatsbyのプロジェクトを作成します。Gatsbyが公式で公開しているCLIを使います。下記のコマンドを実行してみましょう。
npx gatsby new gatsby-microcms
プロジェクト作成が完了後、開発サーバーを立ち上げてみましょう。develop
コマンドを使います。
cd gatsby-microcms
npm run develop
そして、localhost:8000
にアクセスします。作成に成功してる場合下記のような画面がブラウザにでます。
microCMSから情報を取得して表示
次に先ほど作成したmicroCMSのAPIから情報を取得して画面に表示を行います。
Gatsbyでデータを取得するために、gatsby-source-microcms
をインストールします。
npm install gatsby-source-microcms
- GitHub - microcmsio/gatsby-source-microcms: Source plugin for Gatsby from microCMS.
- https://github.com/microcmsio/gatsby-source-microcms
そして、gatsby-config.js
にmicroCMSのデータを取得するための設定を追加します。API_KEYはサービス設定 > API-KEYから確認可能です。serviceId
はご自身が設定したものを設定してください。今回はオブジェクト形式なので、format
にobject
を指定します。
module.exports = {
plugins: [
{
resolve: 'gatsby-source-microcms',
options: {
apiKey: 'API_KEY',
serviceId: 'example',
apis: [{
endpoint: 'hello',
format: 'object',
}],
},
},
],
};
そして、src/pages
の中にhello.jsを作成しましょう。
// hello.js
import * as React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"
const Hello = ({ data: { microcmsHello } }) => (
<Layout>
<SEO title="Hello, microCMS!!" />
<h1>{microcmsHello.text}</h1>
</Layout>
)
export default Hello
export const query = graphql`
query {
microcmsHello {
text
}
}
`
ここではGraphQLのクエリを使ってデータを取得しています。microcmsHello.text
で先程入稿したデータを取得できます。
この状態でlocalhost:8000/hello
にアクセスしてみましょう。
microCMSの入稿内容を変更して、再度開発サーバーを立ち上げると画面表示される内容が変わることも合わせてご確認ください。