国産ヘッドレスCMSとして注目されているmicroCMSとNext.jsを使用したWebサイトのモダンな制作方法を学べる解説書 -モダンWebサイト制作入門
※本ページは、アフィリエイト広告を利用しています。 国産ヘッドレスCMSとして注目されている「microCMS」とJavaScriptフレームワーク「Next.js」を使ったモダンWebサイトの制作について初心者でも分かりやすく解説した入門書を紹介します。 当ブログはWordPressですが、ここ数年ヘッドレスCMSに注目が集まってきています。ヘッドレスCMSって何？という人からNext.jsは使ったことがないという人でも本書でしっかりと学ぶことができます。 著者陣は非常に豪華で、microCMSの開発陣です。開発者と聞くと開発側の目線なのでは？と心配になるかもしれませんが、実装者目線のステップバイステップで架空のコーポーレートサイトを実装しながらmicroCMSとNext.jsを用いたWebサイトのモダンな制作方法を学べます。 WordPressは使ったことがあるけどヘッドレスCMSは初
microCMSを導入してみた
私が通っている学校の課題でmicroCMSを利用して飲食店サイトを1ページ作成する課題が出た為、 課題を作成しつつ紹介していきたいと思います。 成果物 私が個人的に大好きなパンケーキ屋さんをゴールとして作成しました。 利用した部分
microCMSのWebフロントエンドにクリーンアーキテクチャを採用した話【前編】
はじめにmicroCMSの大西です。microCMSには2022年の5月に入社しました。普段は開発本部長として組織的な業務、エンジニアのサポート、開発全体の大まかなタスクの方向性を決めといった業務を行なっています。 microCMSでは昨年中盤以降にWebフロントエンドの設計パターンを刷新しました。採用した設計パターンはクリーンアーキテクチャです。 2回に分けて大西と森茂（フロントエンドテックリード）がmicroCMSのWebフロントエンドの設計パターンについて紹介します。 前提としてmicroCMSのフロントエンドはReact、状態管理にはuseState/useContextを使用しています。APIのキャッシュにReact Query（TanStack Query）を使用しています。比較的素朴な設計になっています。 背景と課題microCMSはサービス開始から数年が経過しており、バック
Next.jsとmicroCMSを用いたプレビューページ作成
JSフレームワークでWeb制作をする際に問題となるのがプレビュー環境です。 他のCMSなどと異なり一から自前で実装することになります。 この複雑さ解消を目的に、本記事ではNext.jsとmicroCMSを組み合わせたプレビュー環境の実装例を紹介します。 対象 Next.jsで簡単な開発・デプロイ経験がある方 microCMSに少しでも触ったことがある方 全体像と流れ 前提として、「JSフレームワークを用いたWebサイト制作におけるプレビューページ」はCSRなアプリケーションを作成する感覚と似ていると捉えましょう。 該当ページにアクセスする fetchが飛ぶ 情報が埋め込まれる 表示される といった流れです。（そもそもCSRなどレンダリング手法が曖昧な方はコチラやコチラを参照ください） SSGであれば別途CSRのページを用意して、SSRであればそのままSSRかCSRのページを用意することとな
microCMS + Next.jsでJamstackブログを作ってみよう
microCMSとNext.jsを組み合わせて、Jamstackなブログを作成することができるチュートリアルです。 前提利用サービス本記事では以下の2つのウェブサービスを利用します。どちらのサービスも個人開発においては無料の範囲で十分な機能を備えており、実績豊富なサービスです。最初にそれぞれのサイトトップより登録を済ませておきましょう。 microCMS：特に日本において市場をリードするヘッドレスCMSです。ブログのコンテンツ管理を担います。Vercel：フロントエンド開発向けのプラットフォームです。サイト公開におけるインフラやCI/CDを担います。 ソフトウェアバージョン下記のバージョンで開発を行なっています。バージョンの差異によって若干機能が異なる可能性があります。 Next 13.1.1react 18.2.0react-dom 18.2.0microcms-js-sdk 2.3.2
microCMS と Next.js でブログを作る（SDK 版） | DevelopersIO
以前、microCMS と Next.js でブログを作るというブログを書いたのですが、microCMS から公式の SDK が提供されていたので書き換えてみました。 前回と比べ、大きく異なる点は以下の 2 点になります。 microCMS JavaScript SDKを使うため、aspidaは未使用 Next.js のバージョンを 10 から 11 にアップデート ここではこれら変更点についてのみ扱います。それほど変わらない点については、前回の記事をご参照ください。microCMS の API はまったく同じものを使用しています。 完成したコードのリポジトリは下記になります。 https://github.com/hbsnow-sandbox/nextjs-micro-cms-sdk-example インストール まずは Next.js をインストールしましょう。TypeScript は
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
