[B! Jamstack] satoyan419のブックマーク

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

satoyan419 2020/11/08

リンク

JAMstack 完全入門ハイパフォーマンス Web サイト構築 - soussune Shop - BOOTH

技術同人誌（PDF） / 58ページ / ￥1000 新しいWeb開発アーキテクチャ SPAとSSRを超えるJAMstackの仕組み ※この商品はPDFの「ダウンロード販売」です！ ------------------------------------------------------- ● 本書のポイント！・NetlifyのCEOが提唱・サイトの読み込みが10倍高速化・サーバー代$5000/月が$5/月に！・マイクロサービスの活用・GatsbyJS、Nuxt.jsを使ったモダンフロントエンド開発 ------------------------------------------------------- ● 本書の概要フロントエンドやその周辺技術はこの10年ほどで大きく変化しました。昔は片手間であったものが、いまや複雑なものになっています。また、流行した技術がほんの1

satoyan419 2020/09/27

Jamstack

リンク

microCMSとNuxtでプレビュー画面を作成する

satoyan419 2020/09/13

リンク

NuxtのJamstack構成におけるAPIキーの隠蔽方法について

こんにちは、柴田です。 Nuxt.jsはv2.13よりFull Static Generationが出来るようになり、益々便利になりました。全てを静的化し、Jamstack構成にしている方も多いと思います。 Jamstack構成であれば、ブラウザからAPIをコールされる心配はなくなりますが、実はAPIキーがソースコードの中に残っているケースが多いです。（検索したところ、間違った情報を発信しているサイトも多いです）ちなみに良く見かける以下の方法ではAPIキーの隠蔽ができていません。 NG1: process.env経由での利用環境変数としてAPIキーを定義し、APIリクエスト時にprocess.env.API_KEYで参照する方法です。こちらは一見正しそうに見えますが、サーバでのビルド時にWebpackにてprocess.env.API_KEYの値は定数に変換されてしまいます。よって