
netlify-frameworks
Deploy and configure web frameworks on Netlify — build settings and SSR/edge adapters plus local platform emulation and env vars. Use when setting up or fixing a framework deploy (Next.js / Astro / Nuxt / SvelteKit / Remix / React Router / TanStack Start / SolidStart / Gatsby / Angular / Vite / Express / Hydrogen / Hugo / Eleventy / Vue / React), adding SSR or edge functions or middleware wired to Netlify context, fixing SPA redirect and catch-all rules, setting a build command or publish directory, or debugging "why isn't my env var updating" and framework build failures.
- Installs
- 3.2K
- Last 24h
- +27
- Trending rank
- #4724
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/netlify/context-and-tools --skill netlify-frameworks- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads netlify-frameworks automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Route framework-specific deep work to the guides in this skill: references/astro.md, references/nextjs.md, references/nuxt.md, references/sveltekit.md, references/tanstack.md, references/vite.md.
Env vars: modern rules (read first)
Env values are injected at build time. Any change (client- or server-side) requires a redeploy — editing a var in the UI/CLI does NOT reach the live site or already-deployed functions until a new build runs.
Never use a client prefix for secrets. Client-prefixed vars are inlined into the browser bundle:
VITE_, NEXT_PUBLIC_, PUBLIC_, NUXT_PUBLIC_, REACT_APP_, GATSBY_, VUE_APP_.
Client-embed prefixes by framework: CRA REACT_APP_, Gatsby GATSBY_, Next NEXT_PUBLIC_, Nuxt NUXT_ENV_, Vue CLI VUE_APP_.
Scopes: build-time access needs Builds scope; SSR/DSG runtime access needs both Functions and Builds. netlify.toml is read only during build — functions cannot read it at runtime; set runtime vars in UI/CLI/API.
Netlify build variables can't be used as values in the UI or netlify.toml env sections. Set them inline before the build command:
[build]
command = "REACT_APP_CONTEXT=$CONTEXT npm run build"
SPA redirects and the SSR catch-all footgun
SPAs (React, Vue CLI, Vite, Nuxt in SPA mode) need a rewrite to serve index.html for pushState:
/* /index.html 200
Remove any SPA catch-all when adopting an SSR adapter. A leftover /* → /index.html 200 silently serves static index.html for SSR pages and API routes — user redirects beat adapter-generated routes.
Local dev with platform emulation (no Netlify CLI)
Vite-based frameworks emulate Netlify primitives (functions, edge functions, blobs, Netlify Database, Cache API, Image CDN, redirects/rewrites, headers, env vars, AI Gateway) in the dev server:
| Framework | Plugin/module | Run |
|---|---|---|
| Astro (5.12+) | built-in (Netlify Vite plugin auto-loaded) | 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 |
Still need netlify dev (Netlify CLI) for: Gatsby generated functions (run netlify build first), Angular SSR local test (netlify serve), and frameworks without a Vite plugin.
netlify dev gotcha: with both a custom command and a targetPort in [dev], you must set framework = "#custom" — otherwise the detector runs and your custom command is silently ignored.
Build settings by framework
| Framework | Build command | Publish |
|---|---|---|
| Angular (standard) | 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/hybrid) | next build | .next |
| Next.js (static export) | 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 plugin) | 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 |
Detection suggests these; override in netlify.toml or UI (project configuration > Build & deploy > Continuous deployment > Build settings).
SSR / adapter setup
Astro
npx astro add netlify installs the adapter and edits astro.config.mjs. Adapter needed for SSR and out-of-the-box Image CDN for <Image />. SSR → Netlify Functions; middleware → Edge Functions. Adapter-less deploy only if no server features and no Image CDN need. Skew protection from 5.15.0.
Next.js (13.5+ only)
Zero-config via the OpenNext adapter (@netlify/plugin-nextjs). Do NOT pin the version — Netlify auto-updates each build. Treat the legacy adapter as read-only history, never a recommendation.
Adapter provisions: serverless function for SSR/ISR/PPR/route handlers/Server Actions; Edge Function for Middleware; Full Route + Data Cache; Image CDN with next/image.
Skew protection is opt-in: set NETLIFY_NEXT_SKEW_PROTECTION=true, redeploy. No automatic support for client fetch — direct calls with x-deployment-id: process.env.NEXT_DEPLOYMENT_ID. Details in references/nextjs.md.
SvelteKit
npm install -D @sveltejs/adapter-netlify
import adapter from '@sveltejs/adapter-netlify';
export default { kit: { adapter: adapter() } };
Replace @sveltejs/adapter-auto with the specific import. SSR routes → a render function.
split: true→ one function per route. Incompatible with Edge Functions (edge: falseor omit).edge: true→ SSR in a Deno edge function; can't combine withsplit.- Redirects NOT supported in
netlify.toml— use_redirects. - Edge functions don't work locally with
netlify devfor SvelteKit.
React Router (7+)
New: npx create-react-router@latest --template netlify/react-router-template. Existing:
npm install @netlify/vite-plugin-react-router
Add netlifyReactRouter() to Vite plugins. Default target = Serverless Functions.
Edge (Deno): needs plugin v2.1.1+, set edge: true, and you must create app/entry.server.tsx:
export { default } from 'virtual:netlify-server-entry'
Exclude your own function paths: netlifyReactRouter({ edge: true, excludedPaths: ['/api/*'] }).
Moving back to Serverless: remove edge: true AND delete app/entry.server.tsx.
Middleware (React Router v7.9.0+, plugin v2.0.0+): opt in via future.v8_middleware; import netlifyRouterContext from @netlify/vite-plugin-react-router/serverless (or /edge when edge: true); access context.get(netlifyRouterContext).
Remix
New: npx create-remix@latest --template netlify/remix-template (CLI prompts functions vs Edge Functions). Manual (Remix Vite required):
npm install --save-dev @netlify/remix-adapter
Add netlifyPlugin() from @netlify/remix-adapter/plugin to Vite plugins.
Nuxt
SSR via Nitro, automatic on Nuxt 3. Local parity via @netlify/nuxt (npx nuxi module add @netlify/nuxt).
- SSR on Edge Functions requires a different Nitro deployment preset (not auto-detected).
- pnpm + Nuxt 3: set
PNPM_FLAGS=--shamefully-hoist. nuxt/imageauto-uses Netlify Image CDN; set remote domains innuxt.config.ts.
SolidStart
SolidStart 2 builds on Vite — no SolidStart-specific adapter. Install @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 } })],
});
Publish dist/client. SSR routes, server functions, middleware → Netlify Functions, zero extra config.
Nitro alternative: add nitro(), use plain netlify() (no build.enabled), publish dist.
SolidStart 1: Nitro auto-configures; optionally set preset: "netlify" in app.config.ts; vinxi build / dist.
TanStack Start
React (and Solid.js) full-stack; SSR/Server Routes/Server Functions/middleware → serverless functions.
npm install -D @netlify/vite-plugin-tanstack-start
Add netlify() to Vite plugins alongside tanstackStart(); vite build / dist/client (1.132.0+). Netlify CLI deploys require netlify-cli 17.31+. Older versions: see references/tanstack.md.
Gatsby
- 5.12.0+ (adapter): auto-detects and installs
gatsby-adapter-netlify(zero-config). Generates functionsSSR,DSG. No Essential Gatsby plugin needed. - 5.11.0 or earlier (Essential Gatsby plugin): auto-installs
@netlify/plugin-gatsby; also manually installgatsby-plugin-netlify(required for SSR, Gatsby redirects, asset caching). Generates__api,__ssr,__dsg,__ipx. Skip viaNETLIFY_SKIP_GATSBY_FUNCTIONS(all) /NETLIFY_SKIP_API_FUNCTION/NETLIFY_SKIP_SSR_FUNCTION/NETLIFY_SKIP_DSG_FUNCTION. - Gatsby 5 requires Node 18.
- Large sites: set
GATSBY_EXCLUDE_DATASTORE_FROM_BUNDLEto load datastore from CDN (avoids max function deploy size; slower first SSR/DSG load). - Image CDN: set
NETLIFY_IMAGE_CDN=true(Contentful/Drupal/WordPress source plugins). Not supported on 5.12.x with adapter — upgrade to 5.13.0+. StaticImageandgatsby-transformer-sharpdon't work for SSR/DSG — host images on a CDN.
Angular
SSR auto-configured via an Edge Function. Suggested dev: ng serve / 4200.
- SSR pages are NOT subject to
_redirectsornetlify.tomlredirects — SSR uses Edge Functions that run before redirects. Use Angular's built-in redirects. - Access
Request/Contextin SSR vianetlify.request/netlify.contextproviders (from@netlify/edge-functions); unavailable client-side or during prerendering. Test locally withnetlify serve. NgOptimizedImageauto-uses Image CDN; setremote_images(array of regex) under[images]innetlify.toml.
Express
Node 18.14.0+. Deploy as a Netlify Function via serverless-http:
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"
No frontend: set a placeholder build command (e.g. echo Building Functions). All Function limits apply; not recommended as background/scheduled functions.
Hydrogen
Shopify stack on React Router 7. SSR only on Netlify Edge Functions — Netlify Functions NOT officially supported. Node 24+. Use the starter:
npm create @shopify/hydrogen@latest -- --template https://github.com/netlify/hydrogen-template
cp .env.example .env && npm run dev
Static-site gotchas
Hugo
Set HUGO_VERSION (any release after 0.19) in [build.environment] — a missing/mismatched version causes exit code: 255. Install themes as git submodules (git submodule add ...), not git clone.
Eleventy
eleventy / _site. Build plugins require editing .gitignore: change node_modules to **/node_modules/** — otherwise Netlify plugins and Eleventy collide on .netlify/plugins/node_modules/ and the build errors.
Vite meta-framework support matrix
Astro (auto on 5.12+), Nuxt (via @netlify/nuxt), TanStack Start (via @netlify/vite-plugin-tanstack-start), React Router, SolidStart — all full. SvelteKit — experimental.
Deploy via CLI (Express, Nuxt, React, Vite)
npm install netlify-cli -g
netlify init
Follow prompts to create/link the site and set build settings.
<!-- Node version floors (18.14.0+) are stated per-framework where documented; no cross-framework build-image default is given in sources. --> <!-- system: agent-context/frameworks/system.md — human-owned, merged by ctx-gen; edit system.md, not this section -->Netlify house rules (frameworks)
These are org conventions, not docs facts — merged into the rendered skill by ctx-gen and never generated. Owned by the skills maintainer.
- Per-framework deep guides live in this skill:
references/astro.md,references/nextjs.md,references/nuxt.md,references/sveltekit.md,references/tanstack.md,references/vite.md— route framework-specific work there before improvising. - Next.js: modern runtime (v5, Next ≥13.5) only — treat the legacy adapter as read-only history, never a recommendation.
- Remove any SPA catch-all (
/* → /index.html 200) when adopting an SSR adapter — user redirects beat adapter-generated routes, so a leftover catch-all silently serves staticindex.htmlfor SSR pages and API routes. - Any env var change — client- or server-side — requires a redeploy. Values are injected at build time; editing one in the UI/CLI does not reach the live site or already-deployed functions until a new build runs.
netlify devwith both a customcommandand atargetPortrequiresframework = "#custom"in the[dev]block — otherwise the detector runs and the custom command is silently ignored.- Never use a client prefix (
VITE_,NEXT_PUBLIC_,PUBLIC_,NUXT_PUBLIC_,REACT_APP_,GATSBY_,VUE_APP_) for secrets — client-prefixed vars are inlined into the browser bundle. - Next.js skew protection is version-conditional: below Next 14.1.4 the
NETLIFY_NEXT_SKEW_PROTECTIONenv var is not sufficient on its own —experimental.useDeploymentId(plususeDeploymentIdServerActionswhen server actions are used) must also go innext.config.js. Always ask for or state the version condition; never present the env var as the whole setup. - Client
fetchcalls are not covered by Next.js skew protection by default. Give both options. Next.js 15.4+ has an experimentaluseSkewCookieflag that carries the deployment identifier in a cookie so it rides along on clientfetchcalls; Netlify supports it, but say it is not production-ready and that it holds visitors on the older deploy until the cookie clears. The other option, on any version, is addingx-deployment-idwithprocess.env.NEXT_DEPLOYMENT_IDper call.
FAQ
What does the netlify-frameworks skill do?
Deploy and configure web frameworks on Netlify — build settings and SSR/edge adapters plus local platform emulation and env vars. Use when setting up or fixing a framework deploy (Next.js / Astro / Nuxt / SvelteKit / Remix / React Router / TanStack Start / SolidStart / Gatsby / Angular / Vite / Express / Hydrogen / Hugo / Eleventy / Vue / React), adding SSR or edge functions or middleware wired to Netlify context, fixing SPA redirect and catch-all rules, setting a build command or publish directory, or debugging "why isn't my env var updating" and framework build failures.
How do I install netlify-frameworks?
Run npx skills add https://github.com/netlify/context-and-tools --skill netlify-frameworks in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/netlify-frameworks/ (personal) or .claude/skills/netlify-frameworks/ (project).
Which AI agents can use netlify-frameworks?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is netlify-frameworks safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains netlify-frameworks?
It is published by netlify in netlify/context-and-tools. It has 3,198 recorded installs.
More from netlify/context-and-tools
netlify-deploy
netlify/context-and-tools
Create, configure, and manage Netlify deploys from code — reach for this when setting up Git continuous deployment, running netlify deploy or netlify deploy --prod from the CLI, writing netlify.toml deploy contexts, adding a Deploy to Netlify button, wiring build hooks, configuring Deploy Previews or branch deploys, locking or skipping deploys, fixing a failed or secrets-scanning deploy, or when someone asks to "deploy my site", "set up preview deploys", "add per-branch build config", "keep staging out of Google", or "add a deploy button to my README".
netlify-config
netlify/context-and-tools
Configure Netlify builds and routing via netlify.toml, redirects, and headers. Use when setting a build command or publish directory, adding redirects or rewrites or proxies, adding an SPA fallback rewrite, setting custom response headers or basic auth, managing environment variables and secrets, scoping vars per deploy context, marking a var as secret, disabling secret scanning, configuring functions bundling, ignoring builds, or wiring up a monorepo or JavaScript SPA on Netlify.
netlify-functions
netlify/context-and-tools
Write, configure, and deploy Netlify serverless functions in TypeScript, JavaScript, or Go. Use this when adding an API endpoint or backend route, adding a contact form handler, wiring auth or Identity signup/login hooks, identifying which Netlify user is calling a private or team-login-protected app, building streaming or AI-proxy responses, scheduling cron jobs, running long background jobs (batch processing/scraping), reacting to deploy or form events, setting up rate limiting or region/memory config, or reading environment variables and secrets inside a function. Covers file locations, the Request/Context/Response handler shape, path routing, config options, and local testing with netlify dev.
netlify-edge-functions
netlify/context-and-tools
Write, route, cache, and debug Netlify Edge Functions, the Deno-based TypeScript or JavaScript handlers in netlify/edge-functions that run at the network edge in front of static files and serverless functions. Activate this skill whenever someone wants to add auth middleware or a login gate, redirect or rewrite visitors by country or cookie, localize or personalize a page with geolocation, run A/B testing, transform or inject HTML into a response, stream server-side rendering at the edge, or cache an edge response. Also use it when an edge function silently does nothing, runs in the wrong order, ignores its Cache-Control headers, or cannot read an environment variable.
netlify-forms
netlify/context-and-tools
Serverless form handling on Netlify-hosted sites — detects HTML forms at deploy time, stores submissions, filters spam, and sends notifications. Use when adding a contact form, lead-capture form, file-upload form, or newsletter signup to a Netlify site; wiring AJAX form submission; setting up a custom thank-you page; adding a honeypot or reCAPTCHA to a form; getting forms working in Next.js, Nuxt, SvelteKit, Astro, or Gatsby; reading form submissions via the Netlify API; setting up submission notifications or ChatGPT automations on form submission events; or debugging missing submissions and forms that silently fail to register.
netlify-caching
netlify/context-and-tools
Cache dynamic and static responses on Netlify's CDN from Functions, Edge Functions, and proxies. Use when you add caching or cache-control headers to a function response, tune cache TTL or stale-while-revalidate, set up the durable cache, vary a cache key by query/header/cookie/country/language, purge or invalidate the cache by site or cache tag, use the programmatic Cache API (caches.open/match/put) or @netlify/cache helpers (fetchWithCache/cacheHeaders/getCacheStatus), speed up an expensive API call, add ISR or on-demand revalidation, or debug why a response is or isn't cached via the Cache-Status header.
Popular devops & cloud skills
microsoft-foundry
microsoft/azure-skills
Build, deploy, evaluate, optimize, fine-tune, and manage Microsoft Foundry agents, models, and resources end to end. USE FOR: foundry, azd ai agent, azd provision/deploy, hosted agent scaffold/develop/run/deploy/troubleshoot, prompt agent create, managed harness agent create, GitHub Copilot harness agent, create agent, update agent, add tool to agent, invoke agent, agent insights, evaluate agent, batch eval, continuous eval, continuous monitoring, agent CI/CD, optimize prompt, improve prompt, optimize agent instructions, Agent Optimizer scaffold, dataset curation from traces, deploy model, model fine-tuning (SFT/DPO/RFT), Foundry project, RBAC, role assignment, permissions, quota, capacity, region, deployment failure, AI Services, create Foundry resource, knowledge index, customize deployment, onboard, availability, training-data, grader, distillation, large file upload. DO NOT USE FOR: Azure Functions, App Service, general Azure deploy (use azure-deploy), general Azure prep (use azure
azure-diagnostics
microsoft/azure-skills
Debug Azure production issues on Azure using AppLens, Azure Monitor, resource health, and safe triage. WHEN: debug production issues, troubleshoot app service, app service high CPU, app service deployment failure, troubleshoot container apps, container app 503 or target port mismatch, troubleshoot functions, function telemetry missing or stopped after a config/connection-string change, troubleshoot AKS, VM RDP, Linux SSH, VM black screen, can't connect to VM, reset VM password, NSG or firewall blocking, kubectl cannot connect, kube-system/CoreDNS failures, pod pending, crashloop, node not ready, upgrade failures, analyze logs, KQL, insights, image pull failures, cold start issues, health probe failures, resource health, root cause of errors, troubleshoot event hubs, troubleshoot service bus, messaging SDK error, AMQP connection failure, message lock lost, lock renewal during long-running processing, service bus dead letter.
azure-prepare
microsoft/azure-skills
Prepare azd-based Azure projects for deployment: generates azure.yaml, infrastructure (Bicep/Terraform), and Dockerfiles for the Azure Developer CLI (azd) workflow. USE ONLY when the user explicitly wants to use azd as the deployment tool, or the project already has an azure.yaml file. DO NOT USE FOR: non-azd deployments, Python App Service code-only deploys (use python-appservice-deploy), or cross-cloud migration (use azure-cloud-migrate). WHEN: prepare app for azd, create azure.yaml, set up azd infrastructure, modernize app for Azure with azd, deploy with azd, function app, timer trigger, service bus trigger, event-driven function, managed identity, generate Bicep, generate Terraform, create and deploy to Azure.
azure-ai
microsoft/azure-skills
Use for Azure AI: Search, Speech, OpenAI, Document Intelligence. Helps with search, vector/hybrid search, speech-to-text, text-to-speech, transcription, OCR. WHEN: AI Search, query search, vector search, hybrid search, semantic search, speech-to-text, text-to-speech, transcribe, OCR, convert text to speech.
azure-deploy
microsoft/azure-skills
Execute Azure deployments for ALREADY-PREPARED applications that have existing .azure/deployment-plan.md and infrastructure files. DO NOT use this skill when the user asks to CREATE a new application — use azure-prepare instead. This skill runs azd up, azd deploy, terraform apply, and az deployment commands with built-in error recovery. Requires .azure/deployment-plan.md from azure-prepare and validated status from azure-validate. WHEN: "run azd up", "run azd deploy", "execute deployment", "push to production", "push to cloud", "go live", "ship it", "bicep deploy", "terraform apply", "publish to Azure", "launch on Azure". DO NOT USE WHEN: "create and deploy", "build and deploy", "create a new app", "set up infrastructure", "create and deploy to Azure using Terraform" — use azure-prepare for these.
azure-validate
microsoft/azure-skills
Pre-deployment validation for Azure readiness. Run deep checks on configuration, infrastructure (Bicep or Terraform), RBAC role assignments, managed identity permissions, and prerequisites before deploying. WHEN: validate my app, check deployment readiness, run preflight checks, verify configuration, check if ready to deploy, validate azure.yaml, validate Bicep, test before deploying, troubleshoot deployment errors, validate Azure Functions, validate function app, validate serverless deployment, verify RBAC roles, check role assignments, review managed identity permissions, what-if analysis, validate Container Apps deployment.