前回のお話し
前回の記事
設計完了・開発するぞ〜〜
開発環境セットアップ
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番に。
{
"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から作成」を選択。
完了。
APIの準備
先にカテゴリのAPIを作成(後ほどRSSAPIで参照する必要があるため)
このままではコンテンツが何もなく開発がしづらいので、テストデータを作成。
カテゴリの作成。
- コンテンツありカテゴリ(お気に入り)
- コンテンツありカテゴリ
- コンテンツなしカテゴリ
出力のテストをしたいので上記のようにいくつかパターン分けして作成していく。
今回用いるテストデータはzennのRSSとnoteのRSS。
これでmicroCMS側のセットアップは完了。
microCMS SDKのインストール & 初期化
下記チュートリアルを見ながら進めます
SDKのインストール
$ npm i microcms-js-sdk
SDKの初期化
src/ 直下にlibsディレクトリを配置し、client.ts
ファイルを作成。
中身を記述。
$ cd src
$ mkdir libs
$ cd libs
$ touch client.ts
import { createClient } from 'microcms-js-sdk';
export const client = createClient({
serviceDomain: 'service-domain',
apiKey: 'api-key',
});
このままだとgit上にプッシュした際にAPIキーが丸見えなので、環境変数を用意。
プロジェクトルートに.env
ファイルを作成。(今回は.env.devlopment.local
で作成。)
環境変数を書いていく。
MICROCMS_SERVICE_DOMAIN=rssreader
MICROCMS_API_KEY=xxxxxxxxxxxxx
client.tsの編集
(.envファイルに置いた変数は process.env.{変数名}
で取得できる)
//追加 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ページで表示テスト。
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や下記ポートフォリオサイトからのお問い合わせ、お待ちしております。