Next.js 14 と microCMSで作る俺得RSSリーダー：開発編その1, microCMS接続テストまで

## 前回のお話し

前回の記事

https://qiita.com/unotame/items/50a7fedfc0f2c4589aea


設計完了・開発するぞ〜〜

## 開発環境セットアップ

### Nextプロジェクトの作成

```
$ npx create-next-app@latest .
nextjs version:14.2.3

use typescript / yes
use eslint / yes
use 'src' directory / yes
use tailwind / no
use App router / yes
use import ailas / yes (@/*)
```


### gitプロジェクトの初期化・初回プッシュ
```
$ git init
$ git pull
 // 特にエラーがなければ↓
$ git add -A
$ git commit -m "create next app 14.2.3"
$ git push origin main
```

初回プッシュはこちら

https://github.com/mkrms/rss-reader/commit/6666bf725540513c5d346597bdbad5effad6232f

### テストRUN

デフォルトのポート番号が3000番なので変更
2024年5月スタートなので2405番に。

```diff:package.json
{
"scripts": {
-   "dev": "next dev",
+   "dev": "next dev -p 2405",
  },
}
```

起動
```
$ npm run dev

> rss-reader@0.1.0 dev
> next dev -p 2405

  ▲ Next.js 14.2.3
  - Local:        http://localhost:2405
```

localhost:2405で起動確認

![スクリーンショット 2024-05-20 3.28.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2531585/be03783d-4f02-33a9-88a7-ce64b4608364.png)

OK.

## microCMSプロジェクトの作成

microCMSにログイン後、サービス追加。
「1から作成」を選択。

![スクリーンショット 2024-05-20 3.29.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2531585/23f0fff1-b1e9-29c5-bb0e-5b904c7fca5c.png)

サービス名・サービスIDを決めて作成。
![スクリーンショット 2024-05-20 3.30.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2531585/ff9c2abf-21c8-8b0d-0149-560ed286e42c.png)

![スクリーンショット 2024-05-20 3.30.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2531585/127fadfd-e7e0-273a-7c8f-45e2576f7789.png)

完了。

### APIの準備
「自分で決める」から作成
![スクリーンショット 2024-05-20 3.32.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2531585/aa3a355b-8c4c-0448-2777-08a385bf103a.png)

先にカテゴリのAPIを作成（後ほどRSSAPIで参照する必要があるため）
![スクリーンショット 2024-05-20 3.33.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2531585/64365c15-3e2a-149d-c32d-cb06f002b801.png)

リスト形式で
![スクリーンショット 2024-05-20 3.32.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2531585/30d63623-a25a-5cd2-12e9-43d1c5288a4d.png)

APIスキーマの定義。
![スクリーンショット 2024-05-20 3.34.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2531585/b0bce82d-d602-5259-7adc-20cfd1f01b7e.png)

RSSのAPIを作成。
![スクリーンショット 2024-05-20 3.32.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2531585/cc29be84-003f-fbaf-d6ea-ab80278011cb.png)

内容はこんな感じ。
![スクリーンショット 2024-05-20 3.35.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2531585/c9310df0-f8b5-19b4-d392-58d146f2d8bb.png)

このままではコンテンツが何もなく開発がしづらいので、テストデータを作成。
![スクリーンショット 2024-05-20 3.35.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2531585/7086a95f-ff0d-8064-de68-4f4962f2072f.png)

カテゴリの作成。
- コンテンツありカテゴリ（お気に入り）
- コンテンツありカテゴリ
- コンテンツなしカテゴリ

出力のテストをしたいので上記のようにいくつかパターン分けして作成していく。
![スクリーンショット 2024-05-20 3.35.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2531585/18761f25-3b23-e6f0-715f-9ed1b818a765.png)

今回用いるテストデータはzennのRSSとnoteのRSS。

気になる方はぜひフォローしてね。
[Zenn](https://zenn.dev/niiyama_k)
[note](https://note.com/unotame)
![スクリーンショット 2024-05-20 3.36.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2531585/90a05e29-1401-c78d-0c47-144d224f042b.png)

これでmicroCMS側のセットアップは完了。

## microCMS SDKのインストール & 初期化

下記チュートリアルを見ながら進めます

https://document.microcms.io/tutorial/next/next-app-router-getting-started

### SDKのインストール
```
$ npm i microcms-js-sdk
```

### SDKの初期化

src/　直下にlibsディレクトリを配置し、```client.ts```ファイルを作成。
中身を記述。

```
$ cd src
$ mkdir libs
$ cd libs
$ touch client.ts
```

```client.ts
import { createClient } from 'microcms-js-sdk';

export const client = createClient({
  serviceDomain: 'service-domain', 
  apiKey: 'api-key',
});
```

このままだとgit上にプッシュした際にAPIキーが丸見えなので、環境変数を用意。
プロジェクトルートに```.env```ファイルを作成。（今回は```.env.devlopment.local```で作成。）
環境変数を書いていく。

```.env.devlopment.local
MICROCMS_SERVICE_DOMAIN=rssreader
MICROCMS_API_KEY=xxxxxxxxxxxxx
```

### client.tsの編集
（.envファイルに置いた変数は ```process.env.{変数名}```で取得できる）

```client.ts
//追加 undifinedの型を定義するために記述。
if (!process.env.MICROCMS_SERVICE_DOMAIN) {
  throw new Error("MICROCMS_SERVICE_DOMAIN is required");
}

if (!process.env.MICROCMS_API_KEY) {
  throw new Error("MICROCMS_API_KEY is required");
}

//環境変数に変更
export const client = createClient({
  serviceDomain: process.env.MICROCMS_SERVICE_DOMAIN,
  apiKey: process.env.MICROCMS_API_KEY,
});
```

これで初期化OK。

### 接続チェック
きちんと接続されているかを調べるために、TOPページで表示テスト。

```tsx:src/page.tsx
import { client } from '@/libs/client'

type RSS = {
    title:string
}

export default async function Home() {
  const data = await client.get({
    endpoint: 'rss',
  })

  return (
    <main>
      <ul>
        {data.contents.map((rss) => {
          return (
            rss.title
          )
        })}
      </ul>
    </main>
  )
}
```

表示されれば成功。
![スクリーンショット 2024-05-20 4.18.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2531585/fde65db3-1062-22b9-e858-3e2096c8e7f3.png)

:::note warn
チュートリアルのコードではAPIがオブジェクトになっているため```data.text```のような形で取得できますが、今回はすべてリスト形式のためmap関数で取得する必要があります。
:::

今回はここまで。

リアルタイムでコードを書きながらQiitaに書いているので、コミットを追いながら一緒に開発することもできます。
今回までのコミットは↓

https://github.com/mkrms/rss-reader/commit/b304f0c3efa7bc90fee62fd0bbdcdc941da45421


## 次回予告
次回はSassの開発環境構築とディレクトリを全て揃えるところまで行います。
（これが意外と時間かかるんだよなぁ...）

## 案件のご依頼やご相談について

ワタシが運営するUNOTAMEでは、制作案件やPM業務の外部委託案件などを承っております。
少しでも興味のある方はぜひカジュアルにお話しさせていただけますと嬉しいです。

[Twitter(X)](https://x.com/NiiyamaKeisuke)のDMや下記ポートフォリオサイトからのお問い合わせ、お待ちしております。

https://unotame.com