netlify-frameworks

netlify-frameworks スキルの概要

netlify-frameworks は、Vite/React、Astro、TanStack Start、Next.js、Nuxt、SvelteKit、Remix などのモダンな Web フレームワークを Netlify で正しく動かすためのデプロイガイドです。汎用的なプロンプトで試行錯誤するよりも、少ない回り道で必要な設定にたどり着けます。各フレームワークで Netlify が何を期待しているかを知りたいとき、特にデプロイ中やトラブルシューティング中に役立ちます。

どんな問題を解決するか

この netlify-frameworks skill が扱うのは、実際の作業である「フレームワークのプロジェクトを、Netlify で動くデプロイに変えること」です。とくに SSR、API Routes、middleware、プラットフォーム固有の primitives が関わる場面で効果を発揮します。adapter が必要なのか、plugin で足りるのか、それとも静的ホスティングでよいのかを判断する助けになります。

どんなときに向いているか

netlify-frameworks for Deployment が必要なとき、フレームワーク固有の config、ローカル開発との挙動一致、あるいはフレームワークの server 機能を Netlify Functions や Edge Functions にどう置き換えるかを知りたいときに使います。フレームワーク自体はよく分かっているのに、Netlify 側の配線をどう組むべきか迷っている場合に特に向いています。

何が違うのか

このスキルの価値は、抽象的なプラットフォーム理論ではなく、実用的な互換性ガイドにあります。フレームワークの判別ポイント、adapter/plugin のパターン、参照すべきパスが用意されているので、「デプロイできるはず」から「試すべき Netlify 設定はこれだ」へ素早く移れます。

netlify-frameworks スキルの使い方

正しくインストールして読み込む

netlify-frameworks install を行うときは、まず skills ワークフローにこの skill を追加し、最初に SKILL.md を開いてください。参考ファイルは任意の読み物ではなく実装メモとして扱うのが重要です。フレームワーク別のファイルには、結果を左右するセットアップ詳細が含まれていることが多いからです。

デプロイ前提の入力を与える

netlify-frameworks usage をうまく使うには、フレームワーク名、出力モード、そして何が失敗しているのか、まだ未設定なのかの3点を最初に伝えるのが基本です。たとえば「Next.js App Router アプリを Netlify にデプロイしたい。画像最適化と middleware も使っている」のように書くと、「Next.js をデプロイしたい」よりずっと有効です。

最初に読むべきファイルを見極める

まず SKILL.md を読み、そのあと references/nextjs.md、references/astro.md、references/tanstack.md、references/vite.md のような該当する参照ファイルに進みます。repo は高速にフレームワークを引ける構成なので、最初の流れは「フレームワークを特定する → その参照を読む → 自分のプロジェクトの build や routing の詳細を確認する」です。

ざっくりした目的を強いプロンプトに変える

この skill に出す prompt は、フレームワーク名、repo の形、デプロイ上の制約を含めるのが理想です。たとえば「Vite + React の SPA で、React Router と /api/hello function が1つあります。Netlify config、redirect rules、ローカル開発の設定を示してください」のようにします。これなら、幅広い説明ではなく、実際にデプロイ可能な答えを返しやすくなります。

netlify-frameworks スキル FAQ

SSR のあるフレームワークアプリだけが対象ですか？

いいえ。netlify-frameworks は静的出力も server-enabled なフレームワークも両方カバーします。アプリが完全な静的サイトなら、追加の Netlify runtime 部品が不要だと確認できること自体に価値があります。

Netlify の docs を読めるなら、この skill は不要ですか？

すでにフレームワークと Netlify のデプロイモデルを理解しているなら、必ずしも必要ではありません。netlify-frameworks guide が特に役立つのは、フレームワーク選定から動く構成までをより速く判断したいときです。adapter の流儀が異なる複数のフレームワークをまたぐ場合は、なおさら有効です。

初心者向けですか？

はい。フレームワーク名と build command が分かれば使えます。ただし、アプリが SPA なのか、SSR なのか、ハイブリッドなのか、edge-aware なのか分からない場合は少し難しくなります。これらの判断で、どの参照パスを見るべきかが変わるからです。

どんなときに使わないほうがいいですか？

フレームワーク固有の挙動がない単純な静的サイトをデプロイする場合や、content pipeline、CMS schema、一般的な JavaScript バグのように、フレームワーク統合とは無関係な問題には netlify-frameworks を使わないでください。

netlify-frameworks スキルを改善するには

アプリの正確な形を伝える

品質を最も大きく上げるのは、アプリが static、SSR、hybrid、API-heavy のどれかを明示することです。たとえば「Astro の hybrid mode で、API route が1つあり、マーケティングサイトは1つ prerender している」のほうが、「Astro を Netlify に置いている」よりずっと実用的です。

build と routing の制約を含める

デプロイが redirects、画像処理、forms、特定の publish directory に依存するなら、最初にそれを伝えてください。SPA fallback が必要か、function routing が必要か、adapter の出力確認が必要かが分かると、より良い提案ができます。

本当に欲しい成果物を指定する

repo にそのまま貼れる出力が欲しいなら、netlify.toml、フレームワーク設定、最小限のコード変更を求めてください。診断が欲しいなら、まず起こりやすい失敗箇所を尋ねてください。こうすると、次にやるべきことに答えが絞られます。

最初のデプロイ結果をもとに反復する

最初の試行が終わったら、build log のエラー、route の欠落、SSR の不一致、function not found など、実際の症状をそのまま返してください。それが netlify-frameworks usage を最も速く改善する方法です。次の応答では、セットアップ全体の話から、特定の adapter や config の境界条件まで絞り込めます。