Next.jsのgetStaticPropsとgetStaticPaths を使ってmicroCMSのデータを取得して、静的にビルドするサンプル。
- Next.js 11.1.0
- React 17.0.1
- ReactDOM 17.0.1
まず最初にmicroCMS側でコンテンツモデルを作成する必要があります。
API名 - ブログ
エンドポイント - blogs
- title -> テキストフィールド
$ yarn install
.env.development.localを作成。
$ touch .env.development.local
microCMSで取得しAPIキーとエンドポイントをenvファイルに記述。
API_KEY=xxxxx
ENDPOINT=https://your.microcms.io/api/v1
アプリケーションの立ち上げ
$ yarn dev
$ yarn export