🏃
microCMS × Next.js App Router での開発セットアップ手順
🎯 目的
microCMS と Next.js (App Router) で開発する際に、型やクライアントライブラリをセットアップし、開発速度を向上させる
💡前提
🏃手順
🏃 1. ライブラリのインストール
cd path/to/your/project
npm install microcms-js-sdk # クライアントライブラリ
npm install microcms-lib # 型定義
npm install -D microcms-typescript
🏃 2. type を生成
microCMS の管理画面にアクセスし、API の設定をエクスポートしてください。エクスポートされたファイル名は api-〇〇-202405xxxx.json みたいな名前です。
# 設定ファイルを移動
mkdir schema
mv ~/download/api-〇〇-202405xxxx.json path/to/your/project/schema
mv ~/download/api-□□-202405xxxx.json path/to/your/project/schema
# type コードを生成
mkdir types
microcms-typescript schema types/microcms.ts
🏃 3. クライアントコードを作成
詳しくはこちらを参照してください。
.env.local
MICROCMS_SERVICE_DOMAIN=xxxx
MICROCMS_API_KEY=xxxx
参考コード
import { createClient } from 'microcms-js-sdk';
import {items, recipes} from "@/types/microcms";
const client = createClient({
serviceDomain: process.env.MICROCMS_SERVICE_DOMAIN!,
apiKey: process.env.MICROCMS_API_KEY!,
});
export async function getRecipeList(): Promise<recipes<'gets'>> {
return await client.get({
endpoint: "recipes"
});
}
export async function getItemList(): Promise<items<'gets'>> {
return await client.get({
endpoint: "items"
})
}
🔗 Appendix
Discussion