netlify-frameworks

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.

Safety Notice

This listing is imported from skills.sh public index metadata. Review upstream SKILL.md and repository scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "netlify-frameworks" with this command: npx skills add netlify/context-and-tools/netlify-context-and-tools-netlify-frameworks

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:

FileFramework
astro.config.*Astro
next.config.*Next.js
nuxt.config.*Nuxt
vite.config.* + react-routerVite + React (SPA or Remix)
app.config.* + @tanstack/react-startTanStack Start
svelte.config.*SvelteKit

Framework Reference Guides

Each framework has specific adapter/plugin requirements and local dev patterns:

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:

FrameworkClient prefixAccess pattern
Vite / ReactVITE_import.meta.env.VITE_VAR
AstroPUBLIC_import.meta.env.PUBLIC_VAR
Next.jsNEXT_PUBLIC_process.env.NEXT_PUBLIC_VAR
NuxtNUXT_PUBLIC_useRuntimeConfig().public.var

Server-side code in all frameworks can access variables via process.env.VAR or Netlify.env.get("VAR").

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Related Skills

Related by shared tags or category signals.

General

netlify-functions

No summary provided by upstream source.

Repository SourceNeeds Review
General

netlify-image-cdn

No summary provided by upstream source.

Repository SourceNeeds Review
General

netlify-config

No summary provided by upstream source.

Repository SourceNeeds Review
General

netlify-db

No summary provided by upstream source.

Repository SourceNeeds Review