netlify/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:

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