netlify-frameworks

このスキルでフレームワーク固有の詳細な作業を進めるには、次のガイドを参照してください：references/astro.md、references/nextjs.md、references/nuxt.md、references/sveltekit.md、references/tanstack.md、references/vite.md。

環境変数：最新のルール（最初にお読みください）

環境変数の値はビルド時に注入されます。値を変更するたびに（クライアント側・サーバー側を問わず）、再デプロイが必要です。UI／CLI で値を編集しても、新しいビルドを実行するまでは、公開中のサイトやデプロイ済みの関数には反映されません。

シークレットにクライアント用プレフィックスを使用しないでください。 クライアント用プレフィックスが付いた変数は、ブラウザーのバンドルにインライン化されます： VITE_、NEXT_PUBLIC_、PUBLIC_、NUXT_PUBLIC_、REACT_APP_、GATSBY_、VUE_APP_。

フレームワーク別のクライアント埋め込み用プレフィックス：CRA REACT_APP_、Gatsby GATSBY_、Next NEXT_PUBLIC_、Nuxt NUXT_ENV_、Vue CLI VUE_APP_。

スコープ： ビルド時のアクセスには Builds スコープが必要です。SSR／DSG の実行時アクセスには Functions と Builds の両方が必要です。netlify.toml はビルド時にのみ読み込まれ、関数は実行時にこのファイルを読み込めません。実行時の変数は UI／CLI／API で設定してください。

Netlify のビルド変数は、UI や netlify.toml の env セクションで値として使用できません。ビルドコマンドの前にインラインで設定してください：

[build]
  command = "REACT_APP_CONTEXT=$CONTEXT npm run build"

SPA のリダイレクトと SSR のキャッチオールに関する落とし穴

SPA（React、Vue CLI、Vite、SPA モードの Nuxt）では、pushState に対応するため、index.html を配信するリライトが必要です：

/* /index.html 200

SSR アダプターを導入する際は、SPA のキャッチオールを削除してください。 /* → /index.html 200 が残っていると、SSR ページや API ルートに対して静的な index.html が暗黙的に配信されます。ユーザー定義のリダイレクトは、アダプターが生成するルートより優先されます。

プラットフォームのエミュレーションを使ったローカル開発（Netlify CLI 不要）

Vite ベースのフレームワークでは、開発サーバー内で Netlify のプリミティブ（関数、エッジ関数、Blob、Netlify Database、Cache API、Image CDN、リダイレクト／リライト、ヘッダー、環境変数、AI Gateway）をエミュレートできます：

フレームワーク	プラグイン／モジュール	実行
Astro（5.12 以降）	組み込み（Netlify Vite プラグインが自動読み込み）	astro dev
Nuxt	@netlify/nuxt	nuxt dev
React Router	@netlify/vite-plugin	react-router dev
SolidStart 2	@netlify/vite-plugin	vite dev
TanStack Start	@netlify/vite-plugin-tanstack-start	（vite）
Vite	@netlify/vite-plugin	npx vite

次の場合は、引き続き netlify dev（Netlify CLI）が必要です：Gatsby で生成された関数（最初に netlify build を実行）、Angular SSR のローカルテスト（netlify serve）、および Vite プラグインのないフレームワーク。

netlify dev の注意点： [dev] にカスタムの command と targetPort の両方を設定している場合は、framework = "#custom" も設定する必要があります。設定しないと検出処理が実行され、カスタムコマンドが暗黙的に無視されます。

フレームワーク別のビルド設定

フレームワーク	ビルドコマンド	公開ディレクトリ
Angular（標準）	ng build --prod	dist/YOUR_PROJECT_NAME
Astro	astro build	dist
Create React App	react-scripts build	build
Eleventy	eleventy	_site
Gatsby	gatsby build	public
Hugo	hugo	public
Hydrogen	remix vite:build	dist/client
Next.js（SSR／ハイブリッド）	next build	.next
Next.js（静的エクスポート）	next build && next export	out（NETLIFY_NEXT_PLUGIN_SKIP=true）
Nuxt 3	nuxt build	dist
Nuxt 2	nuxt generate	dist
React Router	react-router build	build/client
Remix（Vite）	remix vite:build	build/client
SolidStart 2（Vite プラグイン）	vite build	dist/client
SolidStart 2（Nitro）	vite build	dist
SolidStart 1.x	vinxi build	dist
SvelteKit	vite build	build
TanStack Start（1.132.0 以降）	vite build	dist/client
Vite	vite build	dist
Vue CLI	vue-cli-service build	dist

検出機能はこれらの設定を提案します。netlify.toml または UI（プロジェクト設定 > Build & deploy > Continuous deployment > Build settings）で上書きできます。

SSR／アダプターの設定

Astro

npx astro add netlify を実行すると、アダプターがインストールされ、astro.config.mjs が編集されます。SSR と <Image /> の標準での Image CDN 利用には、アダプターが必要です。SSR → Netlify Functions、ミドルウェア → Edge Functions です。サーバー機能も Image CDN も必要ない場合に限り、アダプターなしでデプロイできます。バージョン 5.15.0 以降ではスキュー保護に対応しています。

Next.js（13.5 以降のみ）

OpenNext アダプター（@netlify/plugin-nextjs）を使えば、設定不要で利用できます。バージョンは固定しないでください。Netlify がビルドごとに自動更新します。レガシーアダプターは読み取り専用の履歴として扱い、推奨しないでください。 アダプターは、SSR／ISR／PPR／ルートハンドラー／Server Actions 用のサーバーレス関数、Middleware 用の Edge Function、Full Route + Data Cache、next/image 用の Image CDN をプロビジョニングします。 スキュー保護はオプトインです。NETLIFY_NEXT_SKEW_PROTECTION=true を設定して再デプロイしてください。クライアントの fetch は自動ではサポートされません。x-deployment-id: process.env.NEXT_DEPLOYMENT_ID を指定して直接呼び出してください。詳細は references/nextjs.md を参照してください。

SvelteKit

npm install -D @sveltejs/adapter-netlify

import adapter from '@sveltejs/adapter-netlify';
export default { kit: { adapter: adapter() } };

@sveltejs/adapter-auto を、特定のアダプターのインポートに置き換えてください。SSR ルート → render 関数です。

• split: true → ルートごとに関数を 1 つ作成します。Edge Functions とは互換性がありません（edge: false を指定するか、省略してください）。
• edge: true → Deno のエッジ関数で SSR を実行します。split とは併用できません。
• netlify.toml ではリダイレクトをサポートしていません — _redirects を使用してください。
• SvelteKit では、netlify dev を使ったローカル環境で Edge Functions は動作しません。

React Router（7 以降）

新規の場合：npx create-react-router@latest --template netlify/react-router-template。既存の場合：

npm install @netlify/vite-plugin-react-router

Vite プラグインに netlifyReactRouter() を追加してください。デフォルトのターゲットは Serverless Functions です。 Edge（Deno）： プラグイン v2.1.1 以降が必要です。edge: true を設定し、app/entry.server.tsx を必ず作成してください。

export { default } from 'virtual:netlify-server-entry'

独自の関数パスを除外します：netlifyReactRouter({ edge: true, excludedPaths: ['/api/*'] })。 Serverless に戻す場合： edge: true を削除し、app/entry.server.tsx も削除してください。 Middleware（React Router v7.9.0 以降、プラグイン v2.0.0 以降）：future.v8_middleware でオプトインします。@netlify/vite-plugin-react-router/serverless（edge: true の場合は /edge）から netlifyRouterContext をインポートし、context.get(netlifyRouterContext) でアクセスしてください。

Remix

新規の場合：npx create-remix@latest --template netlify/remix-template（CLI で Functions と Edge Functions のどちらを使うか選択します）。手動で設定する場合（Remix Vite が必要）：

npm install --save-dev @netlify/remix-adapter

Vite プラグインに @netlify/remix-adapter/plugin の netlifyPlugin() を追加してください。

Nuxt

Nuxt 3 では Nitro 経由の SSR が自動で設定されます。@netlify/nuxt を使うとローカル環境との動作を合わせられます（npx nuxi module add @netlify/nuxt）。

• Edge Functions で SSR を実行するには、別の Nitro デプロイプリセットが必要です（自動検出されません）。
• pnpm と Nuxt 3 を使う場合：PNPM_FLAGS=--shamefully-hoist を設定してください。
• nuxt/image は Netlify Image CDN を自動で使用します。リモートドメインは nuxt.config.ts で設定してください。

SolidStart

SolidStart 2 は Vite を基盤としており、SolidStart 専用のアダプターはありません。@netlify/vite-plugin をインストールしてください。

import netlify from "@netlify/vite-plugin";
import { solidStart } from "@solidjs/start/config";
import { defineConfig } from "vite";
export default defineConfig({
  plugins: [solidStart(), netlify({ build: { enabled: true } })],
});

dist/client を公開します。SSR ルート、サーバー関数、ミドルウェア → 追加設定なしで Netlify Functions を使用します。 Nitro の代替設定： nitro() を追加し、通常の netlify()（build.enabled なし）を使用して、dist を公開してください。 SolidStart 1：Nitro が自動設定されます。必要に応じて app.config.ts で preset: "netlify" を設定してください。vinxi build を実行し、dist を使用します。

TanStack Start

React（および Solid.js）向けのフルスタックフレームワークです。SSR／Server Routes／Server Functions／ミドルウェア → サーバーレス関数です。

npm install -D @netlify/vite-plugin-tanstack-start

tanstackStart() と合わせて、Vite プラグインに netlify() を追加してください。vite build を実行し、dist/client を使用します（1.132.0 以降）。Netlify CLI でデプロイするには netlify-cli 17.31 以降が必要です。それ以前のバージョンについては、references/tanstack.md を参照してください。

Gatsby

• 5.12.0+（アダプター）： gatsby-adapter-netlify を自動検出してインストールします（設定不要）。SSR、DSG 関数を生成します。Essential Gatsby プラグインは不要です。
• 5.11.0 以前（Essential Gatsby プラグイン）： @netlify/plugin-gatsby を自動インストールします。さらに、gatsby-plugin-netlify を手動でインストールします（SSR、Gatsby のリダイレクト、アセットのキャッシュに必要）。__api、__ssr、__dsg、__ipx を生成します。NETLIFY_SKIP_GATSBY_FUNCTIONS（すべて）／NETLIFY_SKIP_API_FUNCTION／NETLIFY_SKIP_SSR_FUNCTION／NETLIFY_SKIP_DSG_FUNCTION でスキップできます。
• Gatsby 5 には Node 18 が必要です。
• 大規模なサイト：GATSBY_EXCLUDE_DATASTORE_FROM_BUNDLE を設定して、データストアを CDN から読み込みます（関数のデプロイサイズ上限を回避できますが、最初の SSR／DSG の読み込みが遅くなります）。
• 画像 CDN：NETLIFY_IMAGE_CDN=true を設定します（Contentful／Drupal／WordPress のソースプラグイン）。アダプターを使用する 5.12.x ではサポートされていません。5.13.0 以降にアップグレードしてください。
• StaticImage と gatsby-transformer-sharp は SSR／DSG では動作しません。画像は CDN でホストしてください。

Angular

Edge Function を介して SSR が自動設定されます。推奨する開発方法：ng serve／4200。

• SSR ページには _redirects または netlify.toml のリダイレクトは適用されません — SSR はリダイレクトより前に実行される Edge Functions を使用します。Angular に組み込まれたリダイレクトを使用してください。
• SSR では @netlify/edge-functions のプロバイダーである netlify.request／netlify.context を介して Request／Context にアクセスできます。クライアント側またはプリレンダリング中は利用できません。netlify serve でローカルテストしてください。
• NgOptimizedImage は Image CDN を自動的に使用します。netlify.toml の [images] の下に remote_images（正規表現の配列）を設定してください。

Express

Node 18.14.0 以降。serverless-http を介して Netlify Function としてデプロイします：

npm i express serverless-http @netlify/functions @types/express

// netlify/functions/api.ts
import express, { Router } from "express";
import serverless from "serverless-http";
const api = express();
const router = Router();
router.get("/hello", (req, res) => res.send("Hello World!"));
api.use("/api/", router);
export const handler = serverless(api);

[functions]
  external_node_modules = ["express"]
  node_bundler = "esbuild"
[[redirects]]
  force = true
  from = "/api/*"
  status = 200
  to = "/.netlify/functions/api/:splat"

フロントエンドがない場合は、プレースホルダーのビルドコマンド（例：echo Building Functions）を設定してください。すべての Function の制限が適用されます。バックグラウンド関数やスケジュール関数としての使用は推奨されません。

Hydrogen

React Router 7 上に構築された Shopify スタックです。SSR は Netlify Edge Functions でのみ利用可能です — Netlify Functions は公式にはサポートされていません。 Node 24 以降。スターターを使用します：

npm create @shopify/hydrogen@latest -- --template https://github.com/netlify/hydrogen-template
cp .env.example .env && npm run dev

静的サイトに関する注意点

Hugo

[build.environment] で HUGO_VERSION（0.19 より後の任意のリリース）を設定してください。バージョンが指定されていない、または一致しない場合は exit code: 255 が発生します。テーマは git clone ではなく、git submodule（git submodule add ...）としてインストールしてください。

Eleventy

eleventy／_site。ビルドプラグインを使用するには、.gitignore を編集し、node_modules を **/node_modules/** に変更する必要があります — そうしないと、Netlify プラグインと Eleventy が .netlify/plugins/node_modules/ で競合し、ビルドエラーが発生します。

Vite メタフレームワークのサポート状況

Astro（5.12+ で自動対応）、Nuxt（@netlify/nuxt を介して対応）、TanStack Start（@netlify/vite-plugin-tanstack-start を介して対応）、React Router、SolidStart — すべて 完全対応。SvelteKit — 実験的。

CLI からデプロイ（Express、Nuxt、React、Vite）

npm install netlify-cli -g
netlify init

プロンプトに従ってサイトを作成またはリンクし、ビルド設定を行ってください。

Netlify のハウスルール（フレームワーク）

これらはドキュメント上の事実ではなく、組織内の規約です。ctx-gen によってレンダリング済みのスキルに統合され、生成されることはありません。スキルのメンテナーが管理しています。

1. フレームワークごとの詳細ガイドはこのスキル内にあります：references/astro.md、 references/nextjs.md、references/nuxt.md、references/sveltekit.md、 references/tanstack.md、references/vite.md — 即興で対応する前に、 フレームワーク固有の作業は該当するガイドを参照してください。
2. Next.js：最新のランタイム（v5、Next ≥13.5）のみを対象とします — レガシーアダプターは 読み取り専用の履歴として扱い、推奨しないでください。
3. SSR アダプターを導入する場合は、SPA のキャッチオール（/* → /index.html 200）を 削除してください — ユーザー定義のリダイレクトはアダプターが生成するルートより優先されるため、 キャッチオールが残っていると、SSR ページや API ルートに静的な index.html が 気づかれないまま配信されます。
4. 環境変数を変更する場合（クライアント側・サーバー側を問わず）は、再デプロイが必要です。値は ビルド時に注入されます。UI／CLI で値を編集しても、新しいビルドが実行されるまでは、 ライブサイトやデプロイ済みの関数に反映されません。
5. カスタムの command と targetPort の両方を指定して netlify dev を実行する場合は、 [dev] ブロックに framework = "#custom" が必要です — そうしないと検出処理が実行され、 カスタムコマンドが気づかれないまま無視されます。
6. シークレットにクライアント用プレフィックス（VITE_、NEXT_PUBLIC_、PUBLIC_、 NUXT_PUBLIC_、REACT_APP_、GATSBY_、VUE_APP_）を絶対に使わないでください — クライアント用プレフィックス付きの変数はブラウザーバンドルにインライン化されます。
7. Next.js のスキュー保護はバージョンによって条件が異なります。Next 14.1.4 より前では、 NETLIFY_NEXT_SKEW_PROTECTION 環境変数だけでは不十分です — experimental.useDeploymentId（サーバーアクションを使用する場合は useDeploymentIdServerActions も）を next.config.js に設定する必要があります。 バージョンの条件は必ず確認または明示し、環境変数だけで設定が完了するかのように 説明しないでください。
8. クライアントの fetch 呼び出しは、デフォルトでは Next.js のスキュー保護の対象外です。 両方の選択肢を説明してください。Next.js 15.4+ には、デプロイ識別子を Cookie に格納し、 クライアントの fetch 呼び出しに付随させる実験的な useSkewCookie フラグがあります。 Netlify はこれをサポートしていますが、本番環境での使用にはまだ適しておらず、Cookie が クリアされるまで訪問者が古いデプロイに留まることを伝えてください。もう一つの選択肢は、 バージョンを問わず、呼び出しごとに process.env.NEXT_DEPLOYMENT_ID を使って x-deployment-id を追加することです。