Next.js と TypeScript で、microCMS を導入する流れ - コムテブログ
microCMS の基本 microCMS とは、ヘッドレス CMS（Content Management System）の一つです。ヘッドレス CMS とは、フロントエンドとバックエンドが完全に分離された CMS のことを指します。これにより、データの入力と表示が分離され、任意のフロントエンドでデータを表示することができます。 microCMS は API によるデータの取得が可能で、これにより JavaScript のフレームワークである Next.js からデータを取得し、ウェブサイト上に表示することが可能となります。 microCMS でブログを作成する microCMS の管理画面に入ります。 管理画面の左 > コンテンツ（API）の「＋」をクリック > 「カテゴリ API」を作成 API 名 > 「ブログ」、エンドポイント名を「blog」と指定 API スキーマ > フィールド
microCMSとNext.jsを用いて、自分の記事まとめてみた
概要 以下動画のように私のポートフォリオで、Zennで私がどのような記事を投稿しているかを表示し、タグで絞り込みができるようにしています。クリックすればZennの対象記事のページに遷移することができます。興味のある人は実際のサイトで見てみてください（ポートフォリオ ブログページ）。 最新の記事の情報を反映させるために、記事をZennで投稿した後に、microCMSで記事のタイトルやリンク等を含んだコンテンツを1つ作成して公開するといった一手間は必要になってきますが、労力的には最小限に抑えられていると思います！ 今回の機能を作るに至った経緯 Zennは非常に使いやすいと思いながら利用させていただいているのですが、個人の記事を検索で絞るといったことができないので、個人のページで記事の数が増えてきたときに、この人がどのような内容の記事を書いているかがわかりづらくなってしまうと思いました。自分がど
microCMSを導入してみた
私が通っている学校の課題でmicroCMSを利用して飲食店サイトを1ページ作成する課題が出た為、 課題を作成しつつ紹介していきたいと思います。 成果物 私が個人的に大好きなパンケーキ屋さんをゴールとして作成しました。 利用した部分
Next.jsとmicroCMSを用いたプレビューページ作成
JSフレームワークでWeb制作をする際に問題となるのがプレビュー環境です。 他のCMSなどと異なり一から自前で実装することになります。 この複雑さ解消を目的に、本記事ではNext.jsとmicroCMSを組み合わせたプレビュー環境の実装例を紹介します。 対象 Next.jsで簡単な開発・デプロイ経験がある方 microCMSに少しでも触ったことがある方 全体像と流れ 前提として、「JSフレームワークを用いたWebサイト制作におけるプレビューページ」はCSRなアプリケーションを作成する感覚と似ていると捉えましょう。 該当ページにアクセスする fetchが飛ぶ 情報が埋め込まれる 表示される といった流れです。（そもそもCSRなどレンダリング手法が曖昧な方はコチラやコチラを参照ください） SSGであれば別途CSRのページを用意して、SSRであればそのままSSRかCSRのページを用意することとな
Next.js+microCMS+Vercel面白い - ゆーすけべー日記
Next.js と microCMS と Vercel が面白い。それぞれ面白いし、組み合わせるとさらに面白い。なにせ、メディアサイトがデプロイも含めて 2 時間で出来る。 Next.js + microCMS + Vercel すごいな。メディアサイト（中身スッカスカだけど）がものの 2 時間でデプロイまでできた。 https://twitter.com/yusukebe/status/1435708770705760256 ということで、メディアサイトを作りながら、Next.js と microCMS と Vercel の面白さをまとめる。 2 時間で作るメディアサイト 例として「ラーメンまとめ！」というメディアサイトを作ってみる。このサイトには ラーメン屋 ラーメン屋のまとめ記事 の 2 つの種類のコンテンツがある。「ラーメン屋」が「名前」「場所」「ラーメン写真」というプロパティを持
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ページを開く
Amazon.co.jp: Next.js＋ヘッドレスCMSではじめる！ かんたんモダンWebサイト制作入門 高速で、安全で、運用しやすいサイトのつくりかた: 柴田和祈, 森茂洋, 野崎洋平, 千葉大輔: 本