Next.jsの画像周りのキャッシュ戦略について調べる
import Image from "next/image"; import stinCatJpg from "./stin_cat.jpg"; // 画像をJavaScriptモジュールのように扱い、指定する形式 <Image src={stinCatJpg} alt="stin cat" />; // img要素同様に文字列を指定する形式 <Image src="/stin_cat.jpg" alt="stin cat" width="300" height="300" />; 本記事では、画像をJavaScriptモジュールのように扱う形式を「モジュール読み込み」と呼び、文字列を指定する形式を「文字列読み込み」と呼ぶことにします。 モジュール読み込み形式だとビルド時に画像サイズを計測して自動でwidth, heightを指定してくれます。 これらは単にwidth,heightの指定を
Next.jsのPreview Modeを使ってmicroCMSのプレビュー機能を実装してみた
技術構成 API: microCMS(ヘッドレスCMS) Next.js Vercel TypeScript はじめに プレビュー機能は、Next.jsのPreview Modeのおかげで、実装自体は簡単になりました。ですが、「現在どのプロセスを実行中で、どのシステムやサービスに対してどんな操作を行っているのか？」 の把握に少し時間がかかりました。 なのでこの記事では、プレビュー機能を実装する過程を分けて解説し、図解した上で今はどの過程かを示して書くようにしました。特に初めての方が迷わずに進められるように心がけました。 プレビュー機能とは？ プレビュー機能は、コンテンツの公開前に、そのコンテンツがウェブサイト上でどのように見えるかを確認できる機能です。この機能により、下書き状態や編集中の記事を、実際の公開環境と同じ条件下で閲覧することが可能となります。 プレビュー機能をどう実現しているか？
【Next.js】Google Analytics も YouTube iframe 埋め込みも公式ライブラリでいけるようになるぞ
【Next.js】Google Analytics も YouTube iframe 埋め込みも公式ライブラリでいけるようになるぞ ちょっと株式会社 Advent Calendar 2023 12 月 24 日の記事です。 みなさんこんにちは、chot Inc. の Web エンジニアです。 Next.js で Google Analytics を導入するとき、どうしていますか？僕は毎度「nextjs google analytics」でググって「こうやるのか〜」と適当に作っています。本当にちゃんと計測されているのか疑心暗鬼です。 また、YouTube の iframe 埋め込みはどうでしょう。普通に iframe を埋め込むと PageSpeed Insights のスコアをごっそり奪っていきます。恐ろしいですね。 これらのサードパーティリソースを SPA である Next.js に導入
Next.jsのIntercepting Routesを使ってみた
こんにちは、hanetsukiです。 今回は、Next.js v13.3のAppRouterで利用できるようになっているIntercepting Routesを使って、モーダルと詳細画面を別々に作成できるようになりました。 本記事では、実際に作成したサイトを元にIntercepting RoutesとParallel Routesについてお話しします。 今回作ったもの Interceptiong RoutesとParallel Routesの試験用に、簡単なWebサイトを作成しました。 リポジトリも公開しているので、詳細な実装が気になる方はそちらをご覧ください。 主な利用技術 Node.js(v18.18.2) Next.js(v14.0.2) React(v18.2.0) スクリーンショット画面 TOP画面 https://midjourney.tsuki-lab.net/ 詳細モーダル
Result型のライブラリを作りました【TypeScript】
Rust, Kotlin, Swiftなどのモダンな言語ではいわゆるResult型が標準で提供されていますがTypeScriptにはありません。 なので既に何人もの開発者がResult型のnpmパッケージを公開しているのですが、自分好みのものが見当たらなかったので自作しました。 設計上の工夫 TypeScriptでは型と同名の名前空間を両立して定義できます。 この仕様を使って型（export type Result）と名前空間（export namespace Result）の両方を定義し、ヘルパー関数などは全て名前空間の中に配置しました。 そのおかげでResultだけをimportすれば済みますし、関数名などを覚えていなくてもエディターの候補表示から全てのユーティリティを辿れるようになっています。 こういう設計にするとTree shakingが効かなくなってしまうのですが、Result型
空でない配列を型で表現する正しい方法【TypeScript】
TypeScriptでは配列が空でないことを型レベルで表現できます。 この記事ではその型をNonEmptyArray<T>と書くことにします。 結論だけ先に書くと、次のように定義するのが正しいです。 export type NonEmptyArray<T> = [T, ...T[]] | [...T[], T] 現在ネット上では上記とは異なる、少し不具合のある型定義が紹介されているので要注意です。 それらも含めて簡単に解説します。 よくある間違いその1：T[] & { 0: T } ２つあるうち最初に紹介するのはこの型定義です。[1]
GitHubのREADMEの見た目をイケてる感じにする
どうも、hanetsukiです。 GitHubにはアカウントそれぞれにREADMEを乗せられるリポジトリがついているのはご存知でしょうか？ 以前から簡易的なプロフィールは掲載していたのですが、訪問していただいた方に「おっ！」っと思わせるようなREADMEにしたいと思い更新することにしました。 今回更新するにあたって何を使ったのかというのを忘備録的に残していきます。 これが今回完成したREADME 詳しいソースコードは、リポジトリをご覧ください。 Skill Icons 自分が持っているスキルなどを表示するときに便利。 他にもお気に入りの言語や、今学習の言語という使い方もできそうですね！ 詳しい利用方法は、https://github.com/tandpfun/skill-icons#readme をご覧ください Badge Generator Zennのフォロワー数の記載に利用しています。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
