Skill

netlify-frameworks

Guides deploying frameworks (Vite/React, Astro, TanStack Start, Next.js, Nuxt, SvelteKit, Remix) to Netlify using adapters for SSR, Edge Functions, redirects, 404s, and env vars.

Netlify

React

npx claudepluginhub netlify/context-and-tools --plugin netlify-skills

Tool Access

This skill uses the workspace's default tool permissions.

Preview

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.

Supporting Assets

references/astro.mdreferences/nextjs.mdreferences/tanstack.mdreferences/vite.md

SKILL.md

Similar Skills

memstack-deployment-netlify-deploy

323

Deploys static/SPA sites and serverless functions to Netlify, validating build config, redirects, headers, environment variables, and deployment readiness.

memstack

netlify-cli-and-deploy

Guides Netlify CLI for installation, authentication, site linking, Git-based and manual deploys, local dev with netlify dev or Vite plugin, and environment variables.

netlify-skills

openai-netlify-deploy

394

Deploys web projects to Netlify using Netlify CLI. Handles authentication, site linking or creation via Git remote, and production/preview deployments.

3 files6 tools

openai-netlify-deploy

Stats

Stars17

Forks4

Last CommitFeb 11, 2026

Actions

View Source View Plugin View on GitHub View README

Help us improve

Share bugs, ideas, or general feedback.

Frameworks on Netlify

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.html in 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").