Next.js から Astro へ。拡張性を捨て、シンプルさを選んだ理由
ブログに「何でもできる」Next.jsは過剰スペックでした。新機能に追いつけず、Web標準APIとの相性に悩んだ末、SSGに特化したAstroへ移行しました。拡張性を捨て、「必要最小限」を選んだ技術選択の記録です。
#Next.js
13 件
ブログのSVGアイコンがチラついてムカついたのでやったこと
Next.jsのImageコンポーネントで発生するSVGアイコンのちらつき問題を、SVGインライン化によって解決した実装記録です。publicフォルダ配置では解消できなかった初回表示時のちらつきを、ビルド時にSVGコードを埋め込むことで無くしました。
Next.js App RouterとPagefindで爆速のサイト内検索を実装する
Next.js (App Router) のブログに Pagefind で全文検索機能を実装する手順を紹介します。public ディレクトリへのインデックス出力設定や、クライアントサイドでの動的インポートなど、実装に必要なポイントをコード付きで解説します。
Next.js + OpenNext.js をdevcontainerで起動しようとしたときにハマったこと
Debian 11 bullseyeベースのdevcontainerでNext.js 15 + OpenNext.jsの開発サーバーが起動せず、Debian 12 bookwormベースに変更して解決した事例。glibcバージョン要件とworkerdの実行互換について整理。
NotoSansJP使ってるのにSafariのフォントが明朝体になる
SafariやiOSのGoogle Chromeだけフォントが明朝体に変わってしまっている件。
住んでいる地域の人口増減を一目でわかるWebサイトをつくった
都道府県と市区町村を選択するだけで、その地域の人口動態を可視化できるWebサイトを作成しました。Next.js、Recharts、shadcn/uiを使用した実装を紹介します。
Next.js AppRouterで動的OGP画像を作成する
Next.js AppRouterでImageResponse()を使用して動的OGP画像を作成する方法を解説します。エンドポイント作成から画像レイアウトの実装までを紹介します。
支離滅裂な文章を生成するアプリ
GASのLanguageAppクラスを使って支離滅裂な文章を生成するアプリ。
Next.js13 デプロイ時にAPIのパスを動的に変えるやり方
Next.js13でデプロイ時にAPIのパスを動的に変更する方法。
ザ・ダークパターンをshadcn/uiで作成する
shadcn/uiを使ってダークパターンを実装する例。
１０％の確率でドオーしか表示されないポケモン生成サイトを作った
PokeAPIを使って10%の確率でドオーしか表示されないポケモン生成サイトを作成。
【個人開発】水瀬いのりさんのライブで聴いたことのない曲を一覧表示するぞ
水瀬いのりさんのライブで聴いたことのない曲を一覧表示するアプリの開発。
自分だけのBookNotionを爆誕させた
KindleのハイライトをNotionにまとめる自分専用BookNotionアプリを開発。