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 / Expr

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: 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 : 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 Replace @sveltejs/adapter auto with the specific import. SSR routes → a render function. split: true → one function per route. Incompatible with Edge Functions ( edge: false or omit). edge: true → SSR in a Deno edge function; can't combine with split . Redirects NOT supported in netlify.toml — use redirects . Edge functions don't work locally with netlify dev for SvelteKit. React Router (7+) New: npx create react router@latest template netlify/react router template . Existing: 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 : 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): 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/image auto uses Netlify Image CDN; set remote domains in nuxt.config.ts . SolidStart SolidStart 2 builds on Vite — no SolidStart specific adapter . Install @netlify/vite plugin : 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. 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 functions SSR , DSG . No Essential Gatsby plugin needed. 5.11.0 or earlier (Essential Gatsby plugin): auto installs @netlify/plugin gatsby ; also manually install gatsby plugin netlify (required for SSR, Gatsby redirects, asset caching). Generates api , ssr , dsg , ipx . Skip via NETLIFY 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 BUNDLE to 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+. StaticImage and gatsby transformer sharp don'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 redirects or netlify.toml redirects — SSR uses Edge Functions that run before redirects. Use Angular's built in redirects. Access Request / Context in SSR via netlify.request / netlify.context providers (from @netlify/edge functions ); unavailable client side or during prerendering. Test locally with netlify serve . NgOptimizedImage auto uses Image CDN; set remote images (array of regex) under [images] in netlify.toml . Express Node 18.14.0+. Deploy as a Netlify Function via serverless http : 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: 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) 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. 1. 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. 2. Next.js: modern runtime (v5, Next ≥13.5) only — treat the legacy adapter as read only history, never a recommendation. 3. 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 static index.html for SSR pages and API routes. 4. 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. 5. netlify dev with both a custom command and a targetPort requires framework = " custom" in the [dev] block — otherwise the detector runs and the custom command is silently ignored. 6. 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. 7. Next.js skew protection is version conditional: below Next 14.1.4 the NETLIFY NEXT SKEW PROTECTION env var is not sufficient on its own — experimental.useDeploymentId (plus useDeploymentIdServerActions when server actions are used) must also go in next.config.js . Always ask for or state the version condition; never present the env var as the whole setup.

netlify-frameworks