og-image-generation について
Next.js のファイル規約と next/og を使い、動的なソーシャルプレビュー画像を生成するスキルです。JSX 画像をサーバー側でレンダリングし、ビルド時にキャッシュします。
主な機能
- 01Next.js のファイル規約による画像生成
- 02next/og による JSX レンダリング
- 03プレビュー画像のサーバー側レンダリング
- 04ビルド時の画像キャッシュ
活用シーン
- 01ページ用の動的なソーシャルプレビュー作成
- 02ビルド時のプレビュー画像のレンダリングとキャッシュ
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/og-image-generationを入力して読み込まれたか確認します。
詳細
OG 画像の生成
Next.js のファイル規約と next/og ライブラリを使用して、動的なソーシャルプレビュー画像を生成します。サーバーでレンダリングされた JSX 画像はビルド時にキャッシュされます。
curl https://fullstackrecipes.com/recipes/og-image-generation.md
コメント
Markdown 対応