前回のお話し

前回の記事

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

開発環境セットアップ

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

初回プッシュはこちら

テストRUN

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

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で起動確認

OK.

microCMSプロジェクトの作成

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

サービス名・サービスIDを決めて作成。

完了。

APIの準備

「自分で決める」から作成

先にカテゴリのAPIを作成（後ほどRSSAPIで参照する必要があるため）

リスト形式で

APIスキーマの定義。

RSSのAPIを作成。

内容はこんな感じ。

このままではコンテンツが何もなく開発がしづらいので、テストデータを作成。

カテゴリの作成。

コンテンツありカテゴリ（お気に入り）
コンテンツありカテゴリ
コンテンツなしカテゴリ

出力のテストをしたいので上記のようにいくつかパターン分けして作成していく。

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

気になる方はぜひフォローしてね。
Zenn
note

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

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

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

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ページで表示テスト。

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>
  )
}

表示されれば成功。

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

今回はここまで。

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

次回予告

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

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

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

Twitter(X)のDMや下記ポートフォリオサイトからのお問い合わせ、お待ちしております。