NextJSの公式サンプルに出されているBlog-starterをmicroCMSを使って実装してみました。
この例はこちらの Static Generation を元に作成した microCMS 用のサンプルプロジェクトです。
Github
制作の意図
下書き記事のプレビュー機能実装の勉強も含めて作ってみました。ご自由にお使いください。
Demo
https://cms-microcms.vercel.app/
使い方
とりあえずこのレポジトリをcloneして使ってください。
フォークでもいいです。
git clone git@github.com:saniman/cms-microcms.git
手順
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_KEYX-API-KEYを入力します。 -
API_URLmirsoCMSのAPI URLを入力します。(https://xxx.microcms.io/api/v1/) -
SERVICE_IDmirsoCMSの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 ファイルと同じ内容の変数をセットする必要があります。.
軽くコードレビュー
今回の実装の一番のポイントはmicroCMSの管理画面から下書き状態の記事のプレビュー表示ができるところですね。
NextJSが内部にAPIサーバーを建てられる機能を有しているのでこのようなことが実現できておりありがたいです。
こちらはmicroCMS公式のブログに書かれていたNextjsでのプレビュー実装の記事をみながら簡単にできました。
ポイントとしては下記のpreview.jsの実装でCookieを入れて[id].jsに渡してあげるところかなと思います。
こちらでCookieを入れることで下書きの状態を判定してプレビュー確認が可能となります。
...
// Enable Preview Mode by setting the cookies
res.setPreviewData({
draftKey: req.query.draftKey
})
...
...
export async function getStaticProps({ params, previewData, preview = false }) {
const data = await getPostByID(params?.id, previewData?.draftKey)
//これで下書きキーを取得して下書き状態の記事の確認が可能となります。
...
最初やりたかったこと
公式のブログスタートのサンプルコード（cms-xxxってなってるやつ）はほとんどがGraphQLサーバーからデータを引っ張ってきてデータを表示させえているものだったので最初はGraphQLの勉強がてらmicroCMSのREST APIからローカルでapollo-serverとかを使ってGraphQLサーバを建ててやろうと思ってたのですがSSRとかと組み合わせるとうまくできなかったのでとりあえずRestAPIから取得するやり方で実装しました。
技術的に参考にしたURL
https://microcms.io/blog/nextjs-preview-mode/
https://github.com/wantainc/gatsby-source-microcms/