microCMSを使ってNextJSのJAMSTACK BLOGを実装してみた。with Vercel

# NextJSの公式サンプルに出されているBlog-starterをmicroCMSを使って実装してみました。

この例はこちらの [Static Generation](https://nextjs.org/docs/basic-features/pages) を元に作成した [microCMS](https://microcms.io/) 用のサンプルプロジェクトです。
[Github](https://github.com/saniman/cms-microcms)

## 制作の意図

下書き記事のプレビュー機能実装の勉強も含めて作ってみました。ご自由にお使いください。


## Demo

[https://cms-microcms.vercel.app/](https://cms-microcms.vercel.app/)


## 使い方

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

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

## 手順

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

最初に, [microCMSのアカウント作ります](https://microcms.io).

その後に新しいコンテンツ（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](https://unsplash.com/).

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

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

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

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

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

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

```bash
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` ファイルは下記のようになります。

```bash
API_KEY=...
API_URL=...
SERVICE_ID=...
```

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

```bash
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](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

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

ローカルのプロジェクトは GitHub/GitLab/Bitbucket または [import to Vercel](https://vercel.com/import/git?utm_source=github&utm_medium=readme&utm_campaign=next-example)を使って公開できます.

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

### 軽くコードレビュー

今回の実装の一番のポイントはmicroCMSの管理画面から下書き状態の記事のプレビュー表示ができるところですね。
NextJSが内部にAPIサーバーを建てられる機能を有しているのでこのようなことが実現できておりありがたいです。
こちらは[microCMS公式のブログに書かれていたNextjsでのプレビュー実装の記事](https://microcms.io/blog/nextjs-preview-mode/)をみながら簡単にできました。
ポイントとしては下記の`preview.js`の実装でCookieを入れて`[id].js`に渡してあげるところかなと思います。
こちらでCookieを入れることで下書きの状態を判定してプレビュー確認が可能となります。

```javascript:/api/preview.js
...

// Enable Preview Mode by setting the cookies
  res.setPreviewData({
    draftKey: req.query.draftKey
  })

...
```
```javascript:/pages/posts/[id].js
...

export async function getStaticProps({ params, previewData, preview = false }) {
  const data = await getPostByID(params?.id, previewData?.draftKey)
//これで下書きキーを取得して下書き状態の記事の確認が可能となります。

...
```

### 最初やりたかったこと
[公式のブログスタートのサンプルコード](https://github.com/vercel/next.js/tree/canary/examples)（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/