Next.jsとmicroCMSを用いたプレビューページ作成

JSフレームワークでWeb制作をする際に問題となるのがプレビュー環境です。 他のCMSなどと異なり一から自前で実装することになります。 この複雑さ解消を目的に、本記事ではNext.jsとmicroCMSを組み合わせたプレビュー環境の実装例を紹介します。 対象 Next.jsで簡単な開発・デプロイ経験がある方 microCMSに少しでも触ったことがある方 全体像と流れ 前提として、「JSフレームワークを用いたWebサイト制作におけるプレビューページ」はCSRなアプリケーションを作成する感覚と似ていると捉えましょう。 該当ページにアクセスする fetchが飛ぶ 情報が埋め込まれる 表示される といった流れです。（そもそもCSRなどレンダリング手法が曖昧な方はコチラやコチラを参照ください） SSGであれば別途CSRのページを用意して、SSRであればそのままSSRかCSRのページを用意することとな