next/imageにおいてmicroCMSで登録した画像を使う
1月22日にmicroCMSのAPIレスポンスに画像のwidthとheightが含まれるようになりました!これによって、今までは動的に画像を差し込む際に、imgタグにwidthとheightを指定できなかったのが、できるようになりました。それを有効活用できるものとして、next/imageがあると思...Read more
2021/01/28 - 更新日 2021/08/05
1月22日にmicroCMSのAPIレスポンスに画像のwidthとheightが含まれるようになりました!これによって、今までは動的に画像を差し込む際に、imgタグにwidthとheightを指定できなかったのが、できるようになりました。それを有効活用できるものとして、next/imageがあると思...Read more
2021/01/28 - 更新日 2021/08/05
web制作における2021年6月時点でのwebpack構成を考えたので、紹介したいと思います。...Read more
2021/06/19 - 更新日 2021/06/22
Linkコンポーネントではなくnext/router から提供されるuseRouterを使ってrouter.push()で遷移させる時があるかと思います。こちらの方法でも prefetch するには、router.prefetch()を行う必要があります。これをLinkコンポーネントと同様の方法で、...Read more
2021/03/17 - 更新日 2021/03/17
Nuxt.jsで作ったこちらのブログをNext.jsで作り直しました!デザインも一新して、雰囲気もガラリと変えました!前回はVuetifyを使っていたのですが、今回はTailwnd cssを使ってスタイリングしてます。デザインに関しては、XDのデザインテンプレートを参考に自分で組んでいます。この記事...Read more
2021/01/23 - 更新日 2021/01/23
今回書いていくのは、Nuxt.jsのgenerateによって静的ファイル出力する時にビルド時にしかしない処理を、どうやったら出力ファイルに含めずにgenerateするか、についてです。色々と試行錯誤したので、まとめておこうと思います。そもそもなぜこのようなことをしようかと思ったかというと、このブログ...Read more
2020/10/21 - 更新日 2021/01/16
Firebase Hostingを使ったSPAコンテンツのデプロイ方法についてまとめていこうと思います。先日のNuxt.jsを使ったプレビュー画面を表示させるSPAサイトをアップしていきます。今回はベーシック認証にFirebase Functionsを使う関係で料金プランを無料のプランではなくて従量...Read more
2020/08/23 - 更新日 2021/01/16
今回は前回の記事で作ったブログのプレビュー画面をNuxt.jsで作ったのでまとめておきます。ヘッドレスCMSにおけるプレビュー画面は、どうするのか完全に自由なのでこちらを一つの参考にしてください。ヘッドレスCMSのデメリットとして、プレビュー画面がないことが挙げられます。これはビューがないヘッドレス...Read more
2020/08/14 - 更新日 2021/01/20
こんにちは、でぃーすけです。今回はヘッドレスCMSを用いたブログサイト(本サイト)をJamstackな構成で作ってみたので、それについてまとめておこうと思います。実際にブログ作成の過程をまとめる前にJamStackについて簡単に触れておこうと思います。JamStackは一言で言うとwebサーバーに依...Read more
2020/08/07 - 更新日 2021/01/20