タグ
#Next.js
Next.jsに関する記事を公開しています。
小さな Workers アプリなら TanStack Start
一覧・詳細・フォームの同じアプリを TanStack Start 1.0 と Next.js（vinext と OpenNext）で作り、Cloudflare Workers に載せるならどれを選ぶかを比べました。新しく作るなら Start、Next.js のコードがあるならまず vinext で動かし、動かない物だけ OpenNext にします。
Remix 3 を Next.js と比べたら、DB 同梱は本当で圧縮は自分で入れる
Remix 3 と Next.js 16 で同じ問い合わせフォームを作って比べました。DB の同梱と DB を読むページの速さは本当でした。圧縮は既定で切れていて、入れると JS は Next.js の 3分の1 になりますが、既定の強さのままだと処理量が落ちます。
Next/ImageはCloudflare Pagesの無料プランで使えない
Next.jsには、画像をキャッシュして各デバイスサイズに最適化して配信するNext/Imageコンポーネントがあり、通常は面倒な画像最適化を簡単に実現できますが、Cloudflare Pagesの無料プランでは使えません。
WhisperとNext.js(Edge Runtime)で文字起こし
OpenAIのサービスの1つであるWhisperのAPIを使い、Next.jsのアプリケーションで文字起こしをする実践的な手順をご紹介します。
Next.jsのnext exportで生成された動的ページをLaravelで表示する
Next.jsのnext exportコマンドは通常、getStaticPropsとgetStaticPathsの返り値を設定し、静的ページ（例：slug.html）を生成しますが、この際、返り値を空にして、クライアントサイドの値で内容が変化するような静的ページ（例：[slug].html）を生成することもできます。
Next.jsで環境変数を使うには
Next.jsで環境変数を使うには、ルートフォルダに.env.localファイルを作成します。next.config.jsへの記述などは不要です。process.env.変数名で、どのファイルからも参照できます。
Gatsby.jsとNext.jsとNuxt.jsを比較する
ReactフレームワークのGatsby.jsとNext.js、VueフレームワークのNuxt.js、これらの主要なJSフレームワークで静的サイトを構築して得た気づきをご紹介します。