JAMSTACKブログのサンプルプロジェクトをNextJSとmicroCMSを使って作りました。

この例はこちらの Static Generation を元に作成した microCMS 用のサンプルプロジェクトです。

Demo

https://cms-microcms.vercel.app/

関連サンプル

• WordPress
• Sanity
• TakeShape
• Prismic
• Contentful
• Strapi
• Agility CMS
• Cosmic
• ButterCMS
• Storyblok
• GraphCMS
• Kontent
• Blog Starter

Deploy your own

Once you have access to the environment variables you'll need, deploy the example using Vercel:

使い方

とりあえずこのレポジトリをcloneして使ってください。 フォークでもいいです。

git clone git@github.com:saniman/cms-microcms.git

Configuration

Step 1. microCMSのアカウントを作ってください。

最初に, microCMSのアカウント作ります.

その後に新しいコンテンツ（API）を作成してください。

Step 2. まずは Author コンテンツ（API）を作ります。

管理画面からコンテンツ（API）を新たに作成します。

• APIのエンドポイントの名前は Author にしてください。

次に下記のAPIスキーマを追加してください。

• Name - テキスト フィールド
• Picture - 画像 フィールド

Step 3. Post コンテンツ（API）を作ります。

管理画面からコンテンツ（API）を新たに作成します。

• APIのエンドポイントの名前は Postにしてください。

次に下記のAPIスキーマを追加してください。

• Title - テキスト フィールド
• Content - テキストエリア フィールド
• Excerpt - テキスト フィールド
• Cover Image - メディア フィールド
• Date - 日時 フィールド
• Author - コンテンツ参照 フィールド

Step 4. コンテンツを入力してみましょう

コンテンツ（API)メニューから先ほど作成したAuthorメニューを選んで内容を入力しましょう。

• ダミーのデータを入れてもいいでしょう
• イメージデータはこのサイトから使ってもいいでしょう Unsplash.

次にコンテンツ（API)メニューから先ほど作成したPostメニューを選んで内容を入力しましょう。

• ダミーのデータを入れてもいいでしょう
• Content フィールドにはマークダウンも使えます。
• イメージデータはこのサイトから使ってもいいでしょう Unsplash.
• Author フィールドには先ほど作成したAuthorコンテンツから選択できます。

重要: 作成した内容をサイトで公開するには公開ボタンを押す必要があります。

Step 5. 環境変数を設定しましょう

コンテンツ（API)メニューを選択した状態で上部に表示される[APIリファレンス]メニューから[ヘッダー]の箇所にある X-API-KEYをコピーしましょう

次に .env.local.exampleをコピーして .env.localを作成します (自動的にGitのコミットからは除外されます):

cp .env.local.example .env.local

環境変数を .env.localに入力します:

• API_KEY X-API-KEYを入力します。
• API_URL mirsoCMSのAPI URLを入力します。(https://xxx.microcms.io/api/v1/)
• SERVICE_ID mirsoCMSのAPIエンドポイントを入力します。(exampleなど)

.env.local ファイルは下記のようになります。

API_KEY=...
API_URL=...
SERVICE_ID=...

Step 6. 開発モードでNextJSを起動します。

npm install
npm run dev

# or

yarn install
yarn dev

[http://localhost:3000]で起動します。(http://localhost:3000)!

Step 7. プレビューモードを試す

microCMSは下書き保存することによって投稿を下書き状態にすることができます。

ローカルで開発をしている場合でも下記のURLで下書きの投稿をプレビューして確認することができます。 下記のURLを[API設定]の画面プレビューに入力フィールドに追加します。

http://localhost:3000/api/preview?id={CONTENT_ID}&draftKey={DRAFT_KEY}

Vercelなどの本番環境にデプロイしたらlocalhostの部分は使っているドメインに直して入力し直しましょう。

http://yourdomain.com/api/preview?id={CONTENT_ID}&draftKey={DRAFT_KEY}

• {CONTENT_ID} はコンテンツのIDが付与されます。
• {DRAFT_KEY} は下書き状態の記事のキーが付与されます。

Step 8. Vercelで公開

プロジェクトの公開はVercelで簡単にできます。 Vercel (Documentation).

ローカルのプロジェクトを公開

ローカルのプロジェクトは GitHub/GitLab/Bitbucket または import to Vercelを使って公開できます.

重要: Vercelを使って公開する場合はVercelのプロジェクト内の Environment Variables（環境変数） に .env.local ファイルと同じ内容の変数をセットする必要があります。.