How to install netlify-frameworks
npx skills add https://github.com/netlify/context-and-tools --skill netlify-frameworksFull instructions (SKILL.md)
Source of truth, from netlify/context-and-tools.
name: netlify-frameworks description: Guide for deploying web frameworks on Netlify. Use when setting up a framework project (Vite/React, Astro, TanStack Start, Next.js, Nuxt, SvelteKit, Remix) for Netlify deployment, configuring adapters or plugins, or troubleshooting framework-specific Netlify integration. Covers what Netlify needs from each framework and how adapters handle server-side rendering.
Frameworks on Netlify
Netlify supports any framework that produces static output. For frameworks with server-side capabilities (SSR, API routes, middleware), an adapter or plugin translates the framework's server-side code into Netlify Functions and Edge Functions automatically.
How It Works
During build, the framework adapter writes files to .netlify/v1/ — functions, edge functions, redirects, and configuration. Netlify reads these to deploy the site. You do not need to write Netlify Functions manually when using a framework adapter for server-side features.
Detecting Your Framework
Check these files to determine the framework:
| File | Framework |
|---|---|
astro.config.* | Astro |
next.config.* | Next.js |
nuxt.config.* | Nuxt |
vite.config.* + react-router | Vite + React (SPA or Remix) |
app.config.* + @tanstack/react-start | TanStack Start |
svelte.config.* | SvelteKit |
Framework Reference Guides
Each framework has specific adapter/plugin requirements and local dev patterns:
- Vite + React (SPA or with server routes): See references/vite.md
- Astro: See references/astro.md
- TanStack Start: See references/tanstack.md
- Next.js: See references/nextjs.md
General Patterns
Client-Side Routing (SPA)
For single-page apps with client-side routing, add a catch-all redirect:
# netlify.toml
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
Custom 404 Pages
- Static sites: Create a
404.htmlin your publish directory. Netlify serves it automatically for unmatched routes. - SSR frameworks: Handle 404s in the framework's routing (the adapter maps this to Netlify's function routing).
Environment Variables in Frameworks
Each framework exposes environment variables to client-side code differently:
| Framework | Client prefix | Access pattern |
|---|---|---|
| Vite / React | VITE_ | import.meta.env.VITE_VAR |
| Astro | PUBLIC_ | import.meta.env.PUBLIC_VAR |
| Next.js | NEXT_PUBLIC_ | process.env.NEXT_PUBLIC_VAR |
| Nuxt | NUXT_PUBLIC_ | useRuntimeConfig().public.var |
Server-side code in all frameworks can access variables via process.env.VAR or Netlify.env.get("VAR").
Related skills
More from netlify/context-and-tools and the wider catalog.
netlify-functions
Guide for writing Netlify serverless functions. Use when creating API endpoints, background processing, scheduled tasks, or any server-side logic using Netlify Functions. Covers modern syntax (default export + Config), TypeScript, path routing, background functions, scheduled functions, streaming, and method routing.
netlify-identity
Use when the task involves authentication, user signups, logins, password recovery, OAuth providers, role-based access control, or protecting routes and functions. Always use `@netlify/identity`. Never use `netlify-identity-widget` or `gotrue-js` — they are deprecated.
netlify-image-cdn
Guide for using Netlify Image CDN for image optimization and transformation. Use when serving optimized images, creating responsive image markup, setting up user-uploaded image pipelines, or configuring image transformations. Covers the /.netlify/images endpoint, query parameters, remote image allowlisting, clean URL rewrites, and composing uploads with Functions + Blobs.
netlify-ai-gateway
Reference for Netlify AI Gateway — the managed proxy that routes calls to OpenAI, Anthropic, and Google Gemini SDKs without provider API keys. Use this skill any time the user wants to add AI on a Netlify site (chat, completion, reasoning, image generation, image-to-image edit/stylize), choose or change a model, wire up the OpenAI / Anthropic / @google/genai SDK, decide which provider to use for an image-gen feature (it's Gemini-only on the gateway), or debug "model not found" / "API key missing" against the gateway. Required reading before pinning a model — the gateway exposes a curated subset, not every provider model.
context7
Use when looking up library documentation, API references, framework patterns, or code examples for ANY library (React, Next.js, Vue, Django, Laravel, etc.). Fetches current docs via Context7 REST API. Triggers on: how to use library, API docs, framework pattern, import usage, library example.
android-testing
Comprehensive testing strategy involving Unit, Integration, Hilt, and Screenshot tests.