export const getStaticPaths = async() =>{ // dataにエンドポイントblogの情報を取得する const data = await client.get({endpoint: "blog"}); // pathsにdataから取り出したidをURLとして代入する const paths = data.contents.map((content) => `/blog/${content.id}`); // fallbackをfalseにするとpathsで返したURL以外404に return {paths, fallback: false}; } getStaticPropsの引用 contextパラメータは次のキーを含むオブジェクトです: paramsはページが動的ルートを利用するためのルートパラメータを持ちます。たとえば、ページ名が [id]
タイトルの通り、Next.js で Google Fonts を使用する方法についての備忘録をまとめます。 Google Fonts 使用したフォントは Noto Sans Japanese です。 日本語対応フォントで細字から太字まで対応している見やすいフリーフォントが欲しかったので、こちらにたどり着きました。 手順 Google Fonts にアクセスして画像のようにいい感じに絞り込みをしつつ検索します。 フォントの太さをそれぞれリストに追加していきますと、ページ右の欄にあるラジオボタン（<link>と@import ）で<link>を選択します。 タグが表示されているので、選択部分をコピーしておきます。 Next.js つづいて Next.js の設定です Vercel - Font Optimization まずプロジェクトの page ディレクトリ配下に_document.js
Font Optimization next/font will automatically optimize your fonts (including custom fonts) and remove external network requests for improved privacy and performance. 🎥 Watch: Learn more about using next/font → YouTube (6 minutes). next/font includes built-in automatic self-hosting for any font file. This means you can optimally load web fonts with zero layout shift, thanks to the underlying CSS
日付が2023-01-29T00:30:00.000Zこんな感じなんだけど、見やすく整えれないかな。 今回はDay.jsを使った方法を紹介します。 2023年01月29日←こんな感じに変換していきましょう。 React Next.jsでmicroCMSからブログ記事を取得しているようなケースを想定して解説しています。 全体像 プロジェクトにDay.jsをインストールする 日付変換用のコンポーネントを作成する フォーマットしたいページでの記述方法 やることはざっくりとこんな感じです。 答えが分かっていると早いのですが、自分でゼロから対応すると時間かかりますよね。。 Day.jsをインストールする
みなさんこんにちは。 株式会社BeatFitでCTOをしている、飯塚と申します。 私達は2021年4月から、microCMSをReact Nativeアプリに導入しました。 詳細につきましては、こちらの記事をご覧ください。 今回開発をしていく中で、いろいろな場所でハマってしまいました。 Jamstackの知見不足や、write要件を要する複雑な設計に難渋したことが主な理由ですが、そもそも困った時に参照する資料が少なかったことが辛いところでした。 ReactやVueと違い、React Native自体がそこまで広く普及していないこと、国産CMSのため海外事例がほとんど見当たらないためと考えられました。 本記事が、今後 React NativeにmicroCMSを導入しようと考えている開発者の皆さまに、少しでもお役になれば幸いです。 前提下記のバージョンで開発を行っています。バージョンの差異に
こんにちは。 本日のmicroCMSの更新情報をお知らせします。 変更内容リッチエディタのレスポンス形式としてオブジェクト型がご利用いただけるようになりました。 リッチエディタのレスポンスはこれまでHTMLでの返却でしたが、これを構造化されたオブジェクト形式で取得できるようになります。 モバイルアプリなどでHTMLドキュメントではハンドリングしにくい場合や、入稿した内容を高度に扱いたい（一部だけ独自のスタイルを当てるなど）場合に便利です。 ※現状ベータ版としてのご提供となります。本リリースまでに仕様が変更される可能性があります。 ご利用方法APIリクエスト時のパラメータに richEditorFormat を指定することでご利用いただけます。 html を指定（デフォルト）richEditorFormatに html を指定した場合、これまで通りHTMLとして取得できます。 デフォルトの設
概要microCMS ではブログなどの記事データをリッチエディタで入稿することが可能です。ただ、APIではそれらが生HTMLで返ってきます。 dangerouslySetInnerHTML に渡せばレンダリングされますが、以下のようなケースもあると思います。 Chakra UI などの定義されているコンポーネントを利用したいclass指定してグローバルCSSを書きたくないXSSの危険性があるからdangerouslySetInnerHTMLを利用したくない 今回はこれらを解決するhtml-react-parserを利用していきます。サンプルコードはこちら。microCMSの取得処理は省略しています。 実行環境サンプルとして、Next.js と Chakra UI を利用します。 html-react-parserとはhtml-react-parser はReactで生HTMLを自由に加工す
Error: Objects are not valid as a React child (found: object with keys {id, name, slug}). If you meant to render a collection of children, use an array instead. 和訳すると「オブジェクトはReactのChildとして相応しくないよ。keyが{id, name, slug}であるオブジェクトが見つかったんだ。もしchildrenのコレクションとしてレンダーしたいんだったら、Arrayを代わりに使ってね」という感じか。 自分の場合この{id, name, slug}とはproductが持つ参照プロパティbrand: DocumentRefferenceのValueのことなんですが、結論から言うと、フロント側のコードで name ではなく
1. 概要 microCMSは国産のヘッドレスCMSです。 WordPressの管理画面側のみの機能を提供しているようなサービスで、データを管理するための管理画面と登録したデータを取得するためのAPIを提供しており、JamstackやSSGでWebサイトを制作する際によく利用されています。 microCMS｜APIベースの日本製ヘッドレスCMS 2. APIを作成してみる アカウントの登録やプロジェクトの作成については、画面の手順通り進めればよいので省略。 アカウントを作成した後、管理画面にアクセスすると以下のように表示されると思います。 microCMSでは2022年4月にリリースされたAPIテンプレート機能を使用して、用途に合ったAPIを簡単に生成することができます。 APIを1クリックで生成できる「APIテンプレート」機能をリリースしました 今年は個人の技術ブログでも作ろうかと思って
概要 こんにちは、都内でフロントエンドエンジニアをしてますかめぽんです。先日、便利なツールしか開発しないことで有名なあのZEITの名前が変わりVercelになった、というニュースは記憶に新しいかと思います。どんどん使い勝手がよくなっていくということで注目していきたいわけですが、昨今ではjavascrptあるいはtypescriptを中心としたアプリケーションが主流になっている中で、jamstackと呼ばれるアーキテクチャが注目されていると思います。jamstack自体は過去に執筆した記事でも紹介していて、基礎的な内容はそちらで確認してみてください。 以前はNuxt.js + Contentful + Netlifyの組み合わせでやってみましたが、今回はVercelのプロダクトと国産のヘッドレスCMSで有名なmicro CMSを使って、jamstackなブログサイトを作ってみたいと思います。
わたしがウェブサイト制作を学び始めた頃は、CMSが必要なウェブサイトの制作手段といえばWordPressが第一選択という印象でした。 しかし近頃はヘッドレスCMSの登場やJamstackの普及によって、CMSもウェブサイトを作るフレームワークも選択肢がより豊富になってきています。 neccoではモダンな実装方法を取り入れていく方針であり、最近はNext.jsなどを使って開発する機会が増えてきました。そこで今回「microCMS + Next.jsでJamstackブログを作ってみよう」に挑戦してみました。 この記事を読んでいる方も、一度はNext.jsやmicroCMSを利用して構築されたサイトを見かけたことがあるのではないでしょうか。 Next.jsはNode.jsなどの開発環境があれば簡単に始められるのでやってみましょう！ 今回作ったサイトの構成 チュートリアルのタイトルにもあるように
概要 microCMS、Next.js（TypeScript）を使ってブログサイトを作成した手順と、追加で実装した機能について、またその過程で学んだことの備忘録記事です。 基本的には公式のチュートリアル通りに進めていますが、TypeScriptの型付けや記事内のコードブロックのハイライトなど詰まった箇所もあったので、まとめておきたいと思います。 デプロイURL GitHub ※この記事ではスタイリングについては解説しません。 MaterialUIを主に使用してスタイリングを行っているので、詳しいコードはGitHubをご覧いただければと思います。 使用技術 Next.js 12.0.10 React 17.0.2 TypeScript 4.5.5 ESLint 8.8.0 prettier 2.5.1 全体の流れ microCMSの準備（アカウント作成・記事コンテンツのAPI作成） Next
こんにちはhiro08です。 現在フロントエンドエンジニアとしてmicroCMS本体の開発に携わっていて、日々サービスの新機能開発や改善を行っています。 そして、先日リリースされたmicroCMSのJavaScript、iOS、Android SDKの3つのうち、JavaScript SDKの開発を担当させて頂きました。リリース時のブログはこちらです。 microcms-js-sdkはnpmで配布されていて、GitHubにオープンソースとして公開されています。 ※現在はGetリクエストのみに対応しています。今後、機能追加や改善していく予定です。 SDKを用いて開発するメリットとしては、Fetch APIやXMLHttpRequest等のネットワーク通信に関する処理を隠蔽できることにあります。冗長的になりがちなリクエスト処理を、メソッド化することによって一貫性があり、クリーンなコードを書くこ
このnoteの対象者： - Headless CMSというのを聞いたことがある（あるいは勉強したい） - エンジニアではないので、専門用語難しい - 簡単にHeadless CMSの使い方を知りたい。 【注意】 このnoteの情報は古い可能性があります。正確なMicro CMSの情報は、Micro CMSの公式ドキュメントをご確認ください。 『Headless CMSとは？』『Micro CMSとは？』『Micro CMSの利用方法』- Headless CMSとは Headless CMSとは何か、Micro CMSの方が書いているこちらのブログがわかりやすかったです。 Micro CMSは日本語であることと、ある程度マニュアルがまとまっているので、ドキュメント確認していただければ基本的には理解できると思います。 ここからは、使っていて気になったり、私自身が止まってしまった箇所を細く入れ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
