Next.js と microCMS と Vercel が面白い。それぞれ面白いし、組み合わせるとさらに面白い。なにせ、メディアサイトがデプロイも含めて 2 時間で出来る。 Next.js + microCMS + Vercel すごいな。メディアサイト（中身スッカスカだけど）がものの 2 時間でデプロイまでできた。 https://twitter.com/yusukebe/status/1435708770705760256 ということで、メディアサイトを作りながら、Next.js と microCMS と Vercel の面白さをまとめる。 2 時間で作るメディアサイト 例として「ラーメンまとめ！」というメディアサイトを作ってみる。このサイトには ラーメン屋 ラーメン屋のまとめ記事 の 2 つの種類のコンテンツがある。「ラーメン屋」が「名前」「場所」「ラーメン写真」というプロパティを持
microCMSブログをオープンソース化しました
こんにちは、柴田（@shibe97）です。 突然ですが本日、microCMSブログのソースコードをオープンソース化いたしました！ リポジトリはこちら。 https://github.com/microcmsio/microcms-blog 経緯microCMSを利用したJamstack構成のWebサイトはここ1年でだいぶ広まりつつあります。 しかし、Jamstack構成のサイトは一覧画面 / 詳細画面を作成するのは非常に簡単ですが、そこから先を実装しようとすると途端に難易度が上がります。 ネット上にはまだまだ知見は少なく、実案件で投入できるほどの実力を持つエンジニアはそう多くはないという印象です。 そこで、実稼働しているmicroCMSブログのソースコードが参考になるのではということで、今回オープンソース化に踏み切りました。 microCMSブログはデータソースとしてmicroCMS、フロ
microCMS + Gatsby + GitHub Actions + S3 でJamStackのチュートリアル | DevelopersIO
What is Jamstack? ここ数年でよく聞くようになったワード。 Jamstackとはウェブサイトを構築および運用するための、技術の組み合わせです。 JavaScript・API・事前にレンダリングされたMarkupの組み合わせでJamStackとのこと。 (以前はJAMStackといってたけど、最近はJamstackだったりする) Jamstackは、 「ウェブをより速く・より安全に・より簡単に拡張できるように設計されたアーキテクチャ」であり、 生産性を最大化するツールやフレームワーク、ライブラリやワークフローなどを 組み合わせて構築されるもの、とのことです。 ※jamstack.orgより 従来のCMSではアクセスがあったとき動的にページを生成しますが、 Jamstackではデプロイ以前に必要なページを生成します。 具体的には、下記。 Webサイトのフロントエンド全体(HTM
【個人開発】最新のNext.js+NextAuth.js+prisma+microCMSでECサイト作ってみた【フルスタックアプリケーション】 - Qiita
【個人開発】最新のNext.js+NextAuth.js+prisma+microCMSでECサイト作ってみた【フルスタックアプリケーション】TypeScriptフロントエンド個人開発Next.jsprisma はじめに 皆さんこんにちは、mamiなのだ！ 今回はバックエンドは作らずにNextAuth.jsやprisma、microCMSなどを利用してNext.jsでECサイトを作成してみたので、その方法や手順などを公開しつつ、認証周りや大型開発案件でも採用されるstorybookなどについても解説していこうと思うのだ！ フロントを勉強し始めた初学者さんや、フロントがメインではないバックエンドエンジニアの方に向けて、丁寧に解説を挟みながら書いていくので「へ〜フロントってこんな感じのことやってるんだ〜」と思ってくれたら嬉しいのだ！ ちなみにこの記事は丁寧に解説しすぎて死ぬほど長くなってしまっ
はじめにmicroCMSの大西です。microCMSには2022年の5月に入社しました。普段は開発本部長として組織的な業務、エンジニアのサポート、開発全体の大まかなタスクの方向性を決めといった業務を行なっています。 microCMSでは昨年中盤以降にWebフロントエンドの設計パターンを刷新しました。採用した設計パターンはクリーンアーキテクチャです。 2回に分けて大西と森茂（フロントエンドテックリード）がmicroCMSのWebフロントエンドの設計パターンについて紹介します。 前提としてmicroCMSのフロントエンドはReact、状態管理にはuseState/useContextを使用しています。APIのキャッシュにReact Query（TanStack Query）を使用しています。比較的素朴な設計になっています。 背景と課題microCMSはサービス開始から数年が経過しており、バック
React + microCMSで実現するZOZOTOWNキャンペーンページのノーコード化 - ZOZO TECH BLOG
はじめに 2020年新卒入社で、現在ZOZOWEB部所属の武井です。ZOZOTOWNのWebフロントエンド開発を担当しています。私は入社以来オフィスに2度しか出社したことがありませんが、そのうちの1度はスタッフインタビュー記事の撮影のときでした。アートがたくさんある素敵なオフィスですが、それ以降出社できていません。まさか新卒1年目からフルリモート勤務をすると思っていませんでしたが、先輩スタッフが仕組み作りをしてくださっていたおかげで快適に働けています。 さて、本題です。ZOZOTOWNではタイムセール、ショップ限定クーポン、抽選プレゼントなどのキャンペーンを期間限定で実施しています。このキャンペーンをより際立たせるためにキャンペーンページを作成し、ホーム画面やメルマガなどを通じてお客様にお届けしています。しかし、このキャンペーンページの作成が必要になった場合、エンジニアが都度実装しており、
Next.js + microCMS + VercelでJamstackなブログ付き個人サイトを作る - あなたとあなたの話がしたい
妻の歌人としてのブログ付き個人サイトをリリースしたので、技術的な観点をまとめておきたい。 Jamstack これがサイトの構成図で*1、最近流行りのJamstackというアーキテクチャで作ってみた。 Jamstackは、静的サイトジェネレーターを用いてCMS等で管理するコンテンツをビルド時にすべて取得して、ユーザーアクセス前に用意しておいたHTML、CSS、JavaScriptをCDN経由で配信することで、画面遷移が非常に速い優れたパフォーマンスのサイト構築を可能にする。 CMS更新時のWebhook通知で自動デプロイする仕組みを入れることで、開発者がソースコードを触ることなく、サイト編集者で完結したサイト更新を行うことができるため、ビジネスから趣味の活動まで、静的サイト開発・運用の手段として有力な選択肢になるだろう。 静的サイトジェネレーター Next.js, Nuxt.js, Gats
ヘッドレスCMS + S3 静的ウェブページで記事投稿システムをサクッと実装してみた（microCMS + Amazon S3） | DevelopersIO
はじめに みんなが大好きな Amazon S3 の「静的ウェブサイトホスティング」。 サーバー不要でお手軽にウェブページを公開できる便利な機能ですが、HTMLを触らずにちょっとしたお知らせなどを更新できるようにしたい、というケースも多いと思います。 今回はそんな用途にぴったりの「ヘッドレスCMS」を利用して、S3 でホスティングしている静的ウェブページに管理画面から記事を投稿できるシステムを、1 時間ほどの作業でサクッと実装してみました！ ※本記事では「とりあえず動くシステム」をできるだけ簡単に、最短で体験することを目指しているため、セキュリティやフロントエンドの実装技術については掘り下げていません。 ヘッドレスCMSとは？ CMS（Content Management System）とはユーザー管理、記事の投稿、データベースなどがセットになったコンテンツ管理システム全体を指します。 最も
この記事では、ヘッドレスCMSを使ってHTMLコンテンツを生成する手順を紹介します。 前回の記事（MicroCMSと11tyで作るかんたん静的サイト）ではAPIデータの取得とHTMLの生成のみを行いましたが、今回はSassを使うためにビルドツールであるViteを導入して、より実制作に近い環境での検証をします。 ビルドツールであればGulpやWebpack等の選択肢もありましたが、Viteの設定が非常に簡便であるという噂を聞いたので試してみることにしました。 HTML CSS JS GulpやWebpack等のビルドツール利用経験 各ツールの役割 MicroCMS：ヘッドレスCMS。コンテンツのデータを登録できる、APIを提供している。 11ty：ヘッドレスCMSのAPIからコンテンツを取得できる静的サイトジェネレーターで、HTMLを出力することができる。複数のテンプレート形式に対応している
まえがき コロナの影響で食生活がおうち中心になり、どうしても カップラーメン or カップ焼きそば を食べる機会が増えました。 そのなかで、どれぐらい今食べているのかを把握することは大切（健康のために）かと思い、この自分しか得をしないサイトを構築してみました。 こんなことに結構な工数とお金を使った気がしますが、いったん気にしないことにしてます。 これで、栄養や健康について意識するようになっていけると思います。（いいぞ！） アーキテクチャの構想 Next.js（SSG） microCMS（ヘッドレスCMS） MESH（IoT） Github Actions（JAMStack build） Slack（通知用） お名前.com（ドメイン） AWS S3（ファイル配置） CloudFront（ファイルの配置とドメインを紐づけ） Lambda@edge（Edge側にいる JavaScript） A
こんにちはhiro08です。 現在フロントエンドエンジニアとしてmicroCMS本体の開発に携わっていて、日々サービスの新機能開発や改善を行っています。 そして、先日リリースされたmicroCMSのJavaScript、iOS、Android SDKの3つのうち、JavaScript SDKの開発を担当させて頂きました。リリース時のブログはこちらです。 microcms-js-sdkはnpmで配布されていて、GitHubにオープンソースとして公開されています。 ※現在はGetリクエストのみに対応しています。今後、機能追加や改善していく予定です。 SDKを用いて開発するメリットとしては、Fetch APIやXMLHttpRequest等のネットワーク通信に関する処理を隠蔽できることにあります。冗長的になりがちなリクエスト処理を、メソッド化することによって一貫性があり、クリーンなコードを書くこ
はじめに こんにちは、森茂です。 先日公開したmicroCMSのWebフロントエンドにクリーンアーキテクチャを採用した話【前編】に引き続き、今回は後編として前編で紹介させていただいた構成にあわせて、実際にどのような実装とチームへの浸透を行っていったかについて紹介いたします。 なお、記事内に記載している仕様、ソースコードは説明用として省略や変更、部分的な引用を行っています、実際のサービスとは異なる箇所もある点をあらかじめご了承ください。 前編より 前編ではmicroCMSのフロントエンドアーキテクチャをどういった背景、構成で採用したかを紹介しました。実装の段階に進むにあたっては、その中でもとくに責務（関心）の分離と負担なく開発を進めことができるかを意識することにしました。 また、前編でも紹介の通り、クリーンアーキテクチャという概念に振り回されないことも重要と考えています。完璧な設計を求めるこ
以前、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 は
「SmartHRのペーパーレス年末調整」のアンケート画面の文言をmicroCMSで管理して、Storybookでプレビューできるようにした話 - SmartHR Tech Blog
この記事はSmartHR Advent Calendar 2022の19日目です。 こんにちは！ SmartHRのプロダクトエンジニアの@diescakeです！ この記事では、SmartHRが提供している「ペーパーレス年末調整（以降、年末調整機能）」のアンケート画面の文言をmicroCMSで管理してStorybookでプレビューできるようにした話をご紹介します。 前提となる年末調整機能の概要や課題の話を含みますが、技術的に「どういう問題に直面して、どう解決したか？」という手段の話をメインとしています。 同様のユースケースをまるっとなぞりたい場面は少ないかもしれませんが、技術的に工夫した点をピックアップしていくので何かしらの参考になれば幸いです！🙏 前提となる「年末調整機能」について 年末調整機能はSmartHRが提供しているサービスの1つです。大きく分けて以下2つの機能があり、年末調整に
AstroとmicroCMSでつくるブログサイト
=== 更新履歴 2024/1/10: MicroCMSQueriesをインポートするときにType-Only Imports and Exportを使用するように変更しました。 === こんにちは、microCMSの松田です。 今回は2022年8月に1.0バージョンを公開したAstroを使ったチュートリアルをお届けいたします。 Astroとは？Astroは静的サイトジェネレーターの一つです。 そのGitHubリポジトリには2022年9月時点で2万弱のスターが付けられています。 https://astro.build/ 数ある静的サイトジェネレーターの中でなぜAstroを選ぶのか公式のドキュメントで解説されています。 https://docs.astro.build/en/concepts/why-astro/ ここで書かれていることを簡潔にまとめると以下のような内容です。 Astroはウ
国内最大規模のヘッドレスCMSプラットフォーム microCMS社の全株式を取得し、完全子会社化 | 株式会社エイチーム（Ateam）
株式会社エイチーム（本社：愛知県名古屋市、代表取締役社長：林高生）は、2024年5月9日の取締役会において、国内最大規模（*1）のヘッドレスCMSプラットフォーム「microCMS」を運営する株式会社microCMS（本店所在地：東京都千代田区、代表取締役：松田 承一、以下「microCMS社」）の発行済株式の100%を取得し、連結子会社化することを決議いたしました。 ※本株式取得（子会社化）の詳細、今後の見通し等については、当社が本日付けで開示しております適時開示をご参照ください。https://ssl4.eir-parts.net/doc/3662/tdnet/2432064/00.pdf microCMS社の連結子会社化の背景・目的 ＜M＆Aによる成長戦略の遂行＞ 当社は、2023年10月13日に適時開示した「上場維持基準適合に向けた計画の進捗状況及び計画内容の一部変更について」の通
技術構成 API: microCMS(ヘッドレスCMS) Next.js Vercel TypeScript はじめに プレビュー機能は、Next.jsのPreview Modeのおかげで、実装自体は簡単になりました。ですが、「現在どのプロセスを実行中で、どのシステムやサービスに対してどんな操作を行っているのか？」 の把握に少し時間がかかりました。 なのでこの記事では、プレビュー機能を実装する過程を分けて解説し、図解した上で今はどの過程かを示して書くようにしました。特に初めての方が迷わずに進められるように心がけました。 プレビュー機能とは？ プレビュー機能は、コンテンツの公開前に、そのコンテンツがウェブサイト上でどのように見えるかを確認できる機能です。この機能により、下書き状態や編集中の記事を、実際の公開環境と同じ条件下で閲覧することが可能となります。 プレビュー機能をどう実現しているか？
今日は少しだけ未来のWEBサイト開発のお話をします。 ですが、ある程度形になりそうなので、それほど遠くはない未来かもしれません。 Aleph.jsとmicroCMSで簡単なWEBサイトを作成してみました。 開発したサイトは以下のシンプルなサイトになります。 Deno製フレームワークAleph.js 今回はDeno製のSSGフレームワークであるAleph.jsを使用してWEBページを作成してみました。Aleph.jsとはNext.jsにインスパイアを受けたフレームワークであり、ドキュメントの構成もとてもよく似ています(というかNext.jsのドキュメントを引用して作成されています)。 microCMS HeadlessCMSは国産のCMSであるmicroCMSを利用しました。最近ではJavaScriptSDKが開発され、さらに開発がしやすくなりました。 Deno(Aleph.js)の開発は何
Jamstack構成（microCMS × Gatsby × Netlify）で自社サイトをフルリニューアルした話 - NRIネットコムBlog
本記事は NRIネットコム Advent Calendar 2021 22日目の記事です。 🎁 21日目 ▶▶ 本記事 ▶▶ 23日目 🍰 はじめまして、フロントエンドエンジニアの牧と申します。 今回自社サイトのリニューアルをJamstack構成で行ったので、Jamstackとそこで採用したサービスについて書いていきます。 リニューアルの概要について Jamstackとは 今回の採用サービスと採用理由 microCMS（ヘッドレスCMS） Gatsby（静的サイトジェネレーター） Netlify（CDN/ADN） 各サービスを使ってみた所感 microCMS Gatsby Netlify 最後に リニューアルの概要について リニューアルの背景やコンセプトについては別記事にて記載しておりますので、こちらも合わせてご覧いただければと思います。 tech.nri-net.com Jamsta
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
この記事では紹介してないものも載せてます。 既に実装済みなとこは省略 簡単に説明すると、Vercel上のNext.js製のWebアプリを作り、CMSはmicroCMSを利用してAPI経由でデータ（記事）を取得・表示させたWebアプリです。今回は「いいね機能」だけにフォーカスしているのでそれ以外の実装済みの部分は割愛しています。 記事に関する処理や表示に関して 簡単に説明します microCMSを使ってAPI経由でデータを取得 主に記事の一覧ページと詳細ページがある構成 getStaticPathsとgetStaticPropsをつかってSGしてます ルーティングはDynamic Routingを用いています 参考 ディレクトリ 「いいね」機能を実装するにあたって、関連するディレクトリとファイルを以下に示します。 ディレクトリ構成の図解 . ├── src │ ├── component
Headless CMS 軽く触って比較してみた(Contentful / microCMS / strapi / GraphCMS) - Qiita
Headless CMS 軽く触って比較してみた(Contentful / microCMS / strapi / GraphCMS)contentfulstrapiHeadlessCMSGraphCMSmicroCMS Blogを作ろう！ってなったものの、どのHeadless CMSを使えばいいか、全くわからなかったので、とりあえず調査しました。 はじめに この記事はあくまで自分がどのHeadless CMSを使ってblogを作るかを検討するための比較記事です。 欠けている機能説明等も多いと思いますが、ご了承ください。 HeadlessCMS比較記事は圧倒的に下記記事がわかりやすかったです。 4種類のHeadlessCMSを試してみた感想（wordpress/strapi/contentful/microCMS） 特徴 とにかく高機能、細かく設定できる、かゆいところに手が届く 無料枠 2
microCMS+Nuxt+Netlifyでサイトを作りました。 new shitです。みてくれたらうれしいです。。https://t.co/8pouvxCCq8 — ゆ (@uchoco898) October 8, 2019 twitterはじめたてでエンジニアさんをフォローしまくりたいのでよかったらフォローして欲しいです。 使用技術 ・Nuxt.js ・microCMS ・Netlify のJAMstack構成です。 この記事の目的 僕はWordPressが嫌いです。ついでに言うとJQueryも使いたくないです。でも実務ではまだまだ使われているのが現状なのではないでしょうか？僕は使ってますよ（T T） microCMSを触ってみて、クライアントワークでもreactとかvue+ヘッドレスCMSがWordPressに取って代われる可能性を大いに感じたので、それを少しでも応援したいと思い書
この記事は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
iOS でも Web Push が送れる！microCMS と Firebase Cloud Messaging を使った実装方法
iOS でも Web Push が送れる！microCMS と Firebase Cloud Messaging を使った実装方法 お初にお目にかかります(？) chot Inc. で Web エンジニアをしているすてぃんです。 もう 1 ヶ月前ですが iOS Safari でプッシュ通知に対応したバージョンのベータ版が発表されましたね。 Web のプッシュ通知は、シェアの大きい iOS が対応してくれなかったのであまり実用的ではありませんでしたが、これからは Web でも多くのユーザーに能動的に新着情報を伝えることができるようになります。 本記事では Firebase Cloud Messaging(以降 FCM と表記) を用いた Web Push 通知の実装方法を、架空のメディアサイトを実装しながら紹介します。 FCM 以外には microCMS と Next.js を使用します。m
国産ヘッドレスCMSのパイオニア「microCMS」が成長を続ける理由 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGのづやです。 Jamstack構成により表示速度がはやい、コンテンツがHTMLに影響されないという特徴から、今や世界中で大きな注目を集めるヘッドレスCMS。海外で開発されているサービスが多いなか、数少ない国産のヘッドレスCMSが「microCMS」です。私たちLIGもサイト制作に活用しており、そのスゴさを肌で実感しています。 今回は開発会社である株式会社microCMSさんに取材の機会をいただき、どのようにヘッドレスCMSを開発しているのか、なぜ多種多様な企業に選ばれているのか話を聞きました。 ※オンラインにて取材いたしました。 「受託開発の課題」を解決するために辿り着いたプロダクト ―― まずは御社が国内でいち早くヘッドレスCMSを開発した背景を聞かせてください。 柴田 和祈さん 2017年に株式会社microCMSを共同創業し、現在はCXO兼デザイン責任者。元々はWe
RemixでmicroCMSを使ったブログサイトを構築してみた〜OG画像の自動生成〜 | DevelopersIO
はじめに こんにちは、CX事業本部MAD事業部の森茂です。 ブログで記事を書くと欲しくなる機能のひとつにOG画像を自動生成する機能があると思います。今回はRemixを使ってOG画像を自動生成する機能を実装してみました。 RemixでmicroCMSを使ったブログサイトを構築してみた RemixでmicroCMSを使ったブログサイトを構築してみた〜プレビュー画面〜 OG画像を自動生成する方法としては、canvasを利用する方法とヘッドレスブラウザ等でスクリーンショット画像を利用する方法がよく取られますが、今回はPuppeteerを利用してスクリーンショットを撮影しその画像をOG画像として利用する方法を選択しました。 なおデプロイ環境はVercelを想定しています。VercelではRemixはAWS Lambdaの上で動作するためローカルサーバーや他の環境とは少し異なる方法が必要となります。V
はじめに エンジニアになってから、個人ブログでさまざまな記事を書いてきましたが、そろそろリプレイスしたいと考え、Astroでシンプルなブログサイトを作成してみました。その作成手順について記事にしていきます。データ管理はmicroCMSを使用し、サイトのホスティングはVercelで構築しています。 作成したもの 作成した記事を一覧で表示するシンプルなデザインにしました。 Github 作成したサンプルデータは下記リポジトリに格納しています。 バージョン情報 今回使用したNodeと主なパッケージのバージョン情報です。 Node.js - v18.14.2 Astro - v2.3.0 microcms-js-sdk - v2.3.3 技術概要 Astro Astroは静的サイト生成ツールとして使用されるフレームワークです。 最大の特徴は、サーバーファーストであることです。JavaScriptを
[Next.js+Vercel+microCMS] microCMS と Next.js でブログを作る | DevelopersIO
ブログのコンテンツになります。 リッチエディタを使用すると、API から HTML が戻されます。ただ改行がそのまま <br> で出力されたり、画像にひと手間加えたくなるケースはありそうなので、こだわりがあるのであればテキストエリアを選択する必要がありそうです。今回はこだわらないのでリッチエディタを選択しています。 また、記事から登録済みのタグを登録できるようにしています。一記事に複数個の登録可能なタグなので、複数コンテンツ参照から参照コンテンツとしてタグを選択しました。 slug のようなフィールドはエンドポイントとなるコンテンツ ID で持つことになるため、フィールド ID として別途用意する必要はりません。 Next.js でブログを作っていく Next.js については 公式サイト と、公式のリポジトリに含まれている examples が非常に参考になります。こちらでもざっくりと導
![[Next.js+Vercel+microCMS] microCMS と Next.js でブログを作る | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/406d924d7d4c6327201a8281e75820982243f551/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F01%2Freact.jpg)
追記: Next.js v9.3以降SSGに関するAPIの変更や、環境変数の扱い方が変わったので、対応した記事に書き換えました。 はじめに この記事はJAMstack Advent Calendar 2019 7日目の記事です。 こんにちはかみむらです。最近は、Twitter上でJAMstackアーキテクチャーについての情報をシェアしています。 先日、個人のポートフォリオをJAMstackアーキテクチャーな構成で立ち上げました。このサイトの技術スタックはNext.js(静的サイト) + microCMSでホスティングサービスにNetlifyを利用しています。 JAMstackは静的なJavaScript、独立したAPI、ビルド済みのマークアップを総称したアーキテクチャーで、今回作成したウェブサイトはこれらの要件を満たしていることになります。もしJAMstackアーキテクチャーをもっと詳しく
いきなりですが。 運営して間もないJAMstack構成な当ブログですが CMSをmicroCMSに乗り換えました！👏 （正確に言うとNetlifyCMSも併用していますが。笑） そこで今回、NetlifyCMSで感じた課題、microCMSの便利な点、microCMSでの課題など 観点ごとに思った事をまとめてみました。 HeadlessCMSを導入する際の参考になれば良いかなと思います！ まず、それぞれのCMSに関して簡単にまとめます。 NetlifyCMSとはNetlifyCMS（https://www.netlifycms.org/） アメリカのNetlify社が運営する静的ホスティングサービス、「Netlify」のひとつの機能として搭載されたCMSです。 設定ファイル(ymlファイル)一つで管理画面をカスタマイズする事ができ、非常に簡単に管理画面を構築できます。入稿した記事はGit
Nuxt.js + microCMSでヘッダのまとめサイトを作ってみた
Jamstackでどんな生徒でもアクセスできるサイトを作りたい(Next.js,microCMSでサイトを作った話) | Ryusou Blog
Jamstackでどんな生徒でもアクセスできるサイトを作りたい(Next.js,microCMSでサイトを作った話)JamstackNext.jsmicroCMS この記事はJamstack Advent Calender 5日目の記事です。 はじめまして。りゅーそう(@ryusou_mtkh)です。 現在、埼玉県の高校で地歴科の教員をしています。教員の業務軽減や生徒の学びの場や手段を増やすためにプログラミングを勉強しています。 先日、WEBサイトで歴史について学べるHisTubeというメディアサイト的なものを公開しました。 このサイトは以下のような技術を使って制作しています。 Next.js(TypeScript)storybookstyled-componentsmicroCMS 今回はそのサイトを作って得た知見を共有できたらと思います。 なぜHisTubeを作ったのか？ まずはじめに
4種類のHeadlessCMSを試してみた感想（wordpress/strapi/contentful/microCMS） - Qiita
4種類のHeadlessCMSを試してみた感想（wordpress/strapi/contentful/microCMS）JavaScriptJAMstackHeadlessCMS この記事はJAMstack Advent Calendar 24日目の記事です。 前提 本投稿にはJAMStackとヘッドレスCMS自体の説明は省きます。 JAMStackとは何か、ヘッドレスCMSとは何かといった所については、JAMstack Advent Calendarの主催者であるshibe97さんが大変分かりやすい日本語記事を幾つか投稿してくださっているので、是非見てみてください。 JAMstackとは何を指すのか今一度考えてみる Jamstack公式ページの和訳 + 考察記事 ヘッドレスCMSとは何か？従来CMSとの違いやメリデメを解説！ GitベースのCMSとAPIベースのCMSの比較 はじめに
Next.js + tailwindcss + microCMS + Vercelで写真のポートフォリオサイト作ってみた - RX100で撮り歩くブログ
年末の技術の勉強もかねて簡単な写真のサイト作ってみました。 photo.mismith.me 作った理由 Next.js + microCMS next/imageが便利 tailwindcss Next.jsでtailwindcssを使う チートシート Components hover ブレイクポイント 独自のUtilityを追加 アイコン Vercel ホスティング 独自ドメイン Google Analytics さいごに 作った理由 個人の写真まとめサイトとして500pxを使っていたが、純粋に写真だけ一覧できるようなサイトが欲しかった（500pxはSNSなのでいろいろと余計なものが表示される） Next.jsやtailwindcss、Vercelなどを使いたかった（今年まったく技術追ってなかったので...） 実はWordPressで写真サイト作ってたけど、レンタルサーバー解約してコス
Nuxt.jsとmicroCMSで採用ページを作成してみよう！
はじめにこんにちはかみむらです。この記事はNuxt.js + microCMSで採用ページを作成するチュートリアルです。 microCMSの最大の特徴は、APIを部分的に扱えることです。なので、さまざまなユースケースが考えられます。例えば、企業のWEBサイトを作成すると仮定してください。CMSで管理する機能は、お知らせやブログが挙げられます。しかし、運用していくと採用情報やヘルプページなど、CMSで管理したい項目が増える可能性があります。 そこで、ヘッドレスCMSを使えば、フロントエンドとAPIを分離して部分的にCMS化することができます。なので、設計を一から見直すことなく、部分的な変更が可能になります。無理な工数を割くことなく、拡張性の高いWEBサイトを構築することができます。 今回は上記で上げた例の一つ、採用ページをNuxt.js + microCMSを使って実装していきます。 最終的
microCMSは日本発のヘッドレスCMSで、世界で通用するプロダクトを目指して日々開発しています。 バックエンドエンジニアの役割は新機能の開発からシステム設計、安定性やパフォーマンスの向上など多岐に渡ります。 技術でサービスを支え、一緒にプロダクト価値を最大化してくれる方を募集しています。 -------- キーワード: 「AWS」「Go」「Terraform」「サーバレス」 -------- 開発企業である株式会社microCMSは2017年にヤフー出身のエンジニア・デザイナーの2名で創業しました。 microCMSの開発・運用を行なっており、現在では8,000社を超える企業様にご利用いただくようになっております。 ■ミッション エンジニアの武器を作り出し世界の進歩を後押しする ■職務内容 ・新機能の開発や既存機能の改修 ・システムの安定稼働のための設計 / 構築 ・システムのパフォー
microCMSはAPIベースの日本製のヘッドレスCMSです。もう社内向け編集/管理画面を自作する必要はありません。開発・運用コストを大きく下げることでビジネスを加速させます。
Offersデジタル人材総研を支える技術 ー Astro、Svelte、Amplify、microCMS｜Offers Tech Blog
Offers を運営している株式会社 overflow の あほむ でございます。今回は 弊社の新規メディア の開発にご参画いただいた、どせいさんのアイコンでお馴染みの(?) leader22 さんに技術スタック解説をご寄稿いただいたテックブログです。 はじめに こんにちは。ランチをご馳走するとそれなりに働く副業エンジニアの、りぃ (Twitter, Blog) です。 この記事では、先日リリースされた、Offers デジタル人材総研 の裏側、つまりはサイトを支える技術スタックについて紹介していきます。 要件の整理 技術選定をするにあたり、まずは要件を整理しました。そうして洗い出された要件は、だいたい次のようなものでした。 パブリックで静的なウェブサイトである 更新頻度はそれほど高くない API などを使って動的に表示する要素はない ログインなどもない JavaScript を使った UI
使えばわかる！Jamstackの前に microCMS × PHP から始めてみる
という選択肢 | 東京都・駒込のWeb制作 ペンタプログラム
佐藤あゆみ（旧姓:古庄）屋号Pentaprogram／Web制作者／著書「Webページ高速化超入門」／計算メモ帳アプリ「Kanau」制作／Mastodon:@ayumisato@hachyderm.io
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.js+microCMS+Vercel面白い - ゆーすけべー日記
microCMSのWebフロントエンドにクリーンアーキテクチャを採用した話【前編】
MicroCMSとViteで作るかんたん静的サイト | DevelopersIO
Next.jsとmicroCMSでカップラーメン食べた回数カウンターを作る
microCMS SDK + Next.jsを用いた開発手順
microCMSのWebフロントエンドにクリーンアーキテクチャを採用した話【後編】
microCMS と Next.js でブログを作る（SDK 版） | DevelopersIO
Next.jsのPreview Modeを使ってmicroCMSのプレビュー機能を実装してみた
microCMSとDeno(Aleph.js)で少し未来のWEBサイト開発
microCMS + Next.jsでJamstackブログを作ってみよう
Next.jsとFirestoreを用いたmicroCMS記事の「いいね」機能の設計と実装
最近話題のヘッドレスCMS「microCMS」+Nuxtでサイトを作った話 - Qiita
microCMS + Next.jsでJamstackブログを作ってみよう
Astro × microCMS × Vercelで構築するモダンブログの作り方 完全ガイド
Next.js + microCMS + NetlifyでJAMstackな世界に入門する - Qiita
【CMS比較】NetlifyCMSからmicroCMSへ乗り換えたら幸せになった話
システムの安定稼働を支えるバックエンドエンジニアを募集！ - 株式会社microCMS
料金プラン｜microCMS｜APIベースの日本製ヘッドレスCMS