microCMSとNext.jsでブログ作成

Next.jsプロジェクトの立ち上げ

npx create-next-app プロジェクト名

microCMS＋Next.jsの構成について→特定構成名はあるのか？

code .とは

ディレクトリの作業タブとして開いた？

ローカルサーバ立ち上がるか確認

npm run dev　→　OK

microCMSのSDKが必要

SDKのインストール

npm install microcms-js-sdk

npx create-next-app プロジェクト名後にSDKをインストールすると、

package-lock.json

package.json

が追加されました。しかしnpx create-next-app プロジェクト名

でも同盟ファイルが追加されたということは、インストールで追加されるライブラリ？などはここに保存される？

microCMSとNext.jsを結びつける工程

libs/client.js ディレクトリとファイル作成

pagesディレクトリ→app/page.tsx　最新版ではこのようなディレクトリ構成となっている模様

Next.jsのバージョン13から利用可能となった最新の構築方法

//SSGとは

型定義の追加 (TypeScript独自の作業)

microCMSの管理画面で作った「APIスキーマ（項目）」に合わせて、コード上に「型」を書く必要がある？

スキーマとはFastAPI；Pydanticで学習したスキーマと同じ？モデリングの一部？→FastAPIのPydanticモデルで「どんなデータを受け取るか」を定義したのと同じ。

”書く場所”と”見せる場所”を切り離して管理する→ヘッドレスCMSという構造

ブログ記事一覧を表示する

import { client } from "@/libs/client";

import { Blog } from "@/types/blog";