AstroとmicroCMSでつくるブログサイト
=== 更新履歴 2024/11/28: src/library/microcms.tsをアップデートしました。 2024/1/10: MicroCMSQueriesのインポートに関して、Type-Only Imports and Exportを使用するように変更しました。 === こんにちは、microCMSの松田です。 今回は2022年8月に1.0バージョンを公開したAstroを使ったチュートリアルをお届けいたします。 【2025/10/9 追記】💡Astro 5以降で利用できるコンテンツローダー（Content Loader）に対応したチュートリアルは、以下の記事をご参照ください： AstroとmicroCMSでブログサイトを作ってみよう（Astro 5以降のコンテンツローダー対応版） | microCMSブログ Astroとは？Astroは多機能で効率的な静的サイトジェネレーター
microCMS + Next.js + TypeScript + Chakra UIでブログを構築した
タイトルの通り、microCMS + Next.js + TypeScript + Chakra UIでブログを構築した。ここでは本ブログの運営方針や、今ブログ構築の際に考慮した点を挙げていきたい。 ベースは以下のmicroCMS公式記事を参考にした。Next.jsにはあまり慣れていない身ではあったが、たいへん分かりやすい内容で本当に助かった。 microCMS + Next.jsでJamstackブログを作ってみよう | microCMSブログmicroCMSブログNext.jsを使用した開発に関する記事の一覧microCMSとNext.jsを用いたブログ環境のセットアップに関しては、上記の公式ブログを始めとしてさまざまな記事がすでにネット上に点在している。 本記事では具体的な導入方法やコードの説明、固有名詞の説明は行わず、どのような機能を用意した（これから用意する）のかを列挙していく。
Markdownのサイト内リンクをNext.jsの<Link>にしたい
先日、Next.js+microCMS+VercelのJAMStack構成で、自分のブログを作成しました。 ブログ記事のデータは、microCMSからMarkdown形式で入稿するようにしているのですが、記事の中でブログ内の別の記事へのリンクを貼る時に、Next.jsの<Link>を使えたら便利だな、と思いました。 この記事ではそれをどうすれば実現できるのか、あれこれ試行錯誤した経緯を含めてご紹介したいと思います。 まずはMDXを使ってみた まず最初に考えたのはMDXを使う方法でした。MDXとは、簡単に説明するとJSXをそのまま埋め込めるMarkdown記法です。 ↓以下は公式サイトからの例ですが、こんな感じで.mdx拡張子のファイルに記述できます。Markdownの記法で文章を書きつつ、別ファイルからエクスポートされているReactコンポーネントをインポートし、それをそのまま使うこともで
Next.jsヘッドレスCMS構成でNetlifyにデプロイしてみる
概要 Next.js でヘッドレス CMS 構成で開発したアプリケーションを、Netlify に自動デプロイしてみます。 コンテンツ更新経路（やりたい運用）は次のようになります。 通常は高速にビルド済みの静的サイトが表示されている。 運用者（業務部門）が microCMS でニュースを更新すると、Netlify で自動ビルドが走りサイト（ニュースリリース部分）が更新される。 開発者（制作・システム部門）が GitHub にソースを PUSH すると、Netlify で自動ビルドが走りサイト（テンプレート部分や個別ページ部分）が更新される。 準備 Next.js でヘッドレス CMS 構成でアプリケーションを作成しておきます。 環境構築や、簡単なアプリケーションのつくり方は以下を参考にしてみて頂ければと思います。 ヘッドレス CMS は microCMS を用いますが、contentful
imgixで動的画像・OGPを作成する
こんにちは。野崎です。 前回は、imgixの入門記事「pictureタグでレスポンシブ対応を行う」を書かせていただきました。 https://blog.microcms.io/imgix-picture/ 今回は少し発展させて、imgixを用いて動的に画像を生成する方法を紹介します。この手法を用いることで、動的なOGP画像を生成することができます。 なお今回はSSGフレームワークとしてNext.jsを使用します。 Next.jsの使用方法について詳しく知りたい方は、以下の記事をご覧ください。 https://blog.microcms.io/microcms-next-jamstack-blog/ https://blog.microcms.io/next-pagination/ フレームワークに依存する部分はほとんどありませんので、Next.js以外のフレームワークにも転用できるかと思い
microCMS SDK と Next.js で Vercel を使ったプレビューを実装したメモ | 東京都のウェブサイト制作 Pentaprogram
microCMSにはSDKが用意されており、さまざまなプラットフォームで GET API を手軽に扱えるようになっています。今日は microCMS JavaScript SDKを使い、ブログ記事のプレビュー機能を実装してみました。 実装にあたっては、下記の２つの記事がとても参考になりました。 Next.jsのPreview Mode＋Vercelでプレビュー機能を実現する[Next.js+Vercel+microCMS] microCMS と Next.js でブログを作るとても詳しく丁寧に解説されているので、まず、上記2つの記事をご覧いただくことを強くお勧めします。読んだ前提で書きます。 上記の記事の方法を用いればパーフェクトなのですが、これらの記事中ではSDKを使わない方法が紹介されているので、この記事ではSDKを使う場合の書き方を忘備録として残しておきます。 ※すでに記事の公開機能
【Next.js】microCMSからデータを取得してRSS2.0を実装する
Next.js + microCMS を使った RSS2.0 の 実装方法です。 api/rss.tsx に記述 import { NextApiRequest, NextApiResponse } from "next" export default async (req: NextApiRequest, res: NextApiResponse) => { const data = await fetch(`https://xxxxx.microcms.io/api/v1/post`, { headers: { "X-API-KEY": process.env.NEXT_PUBLIC_API_KEY || "" }, }) .then(res => res.json()) .catch(error => null) if (!data) { return res.status(401)
microCMS SDK + Next.jsを用いた開発手順
こんにちはhiro08です。 現在フロントエンドエンジニアとしてmicroCMS本体の開発に携わっていて、日々サービスの新機能開発や改善を行っています。 そして、先日リリースされたmicroCMSのJavaScript、iOS、Android SDKの3つのうち、JavaScript SDKの開発を担当させて頂きました。リリース時のブログはこちらです。 microcms-js-sdkはnpmで配布されていて、GitHubにオープンソースとして公開されています。 ※現在はGetリクエストのみに対応しています。今後、機能追加や改善していく予定です。 SDKを用いて開発するメリットとしては、Fetch APIやXMLHttpRequest等のネットワーク通信に関する処理を隠蔽できることにあります。冗長的になりがちなリクエスト処理を、メソッド化することによって一貫性があり、クリーンなコードを書くこ
microCMS + Next.jsでJamstackブログを作ってみよう
この記事は10月1日に行われたJamstackオンラインワークショップ #4「microCMS × Next編」の内容を記事にしたものです。 microCMSとNext.jsを組み合わせて、Jamstackなブログを作成することができます。 こちらが本ワークショップのイベントページです。 Jamstackオンラインワークショップ #4「microCMS × Next編」 前提下記のバージョンで開発を行っています。バージョンの差異によって若干機能が異なる可能性があります。 Next 10.0.1react 17.0.1react-dom 17.0.11. Next.jsプロジェクトを用意するまずは、Next.jsのプロジェクトを作成していきます。プロジェクトの雛形を作成するCLIがあるので、コマンドを入力して作成していきましょう。 $ npx create-next-app microcms
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
microCMSでimgixに入門する
next.js+microcmsでシンタックスハイライトの導入 - Qiita