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.
- License 许可
- Apache-2.0
- 最近更新
- 2026-06-08
- Stars
- ★ 0
- Forks
- 0
01 前言 Front Matter
- 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.
02 资源文件 8
- 参考文档agents/openai.yaml353 B
- 资产文件assets/netlify-small.svg1.3 KB
- 资产文件assets/netlify.png2.6 KB
- 许可证LICENSE.txt10.5 KB
- 参考文档references/astro.md3.0 KB
- 参考文档references/nextjs.md2.4 KB
- 参考文档references/tanstack.md1.4 KB
- 参考文档references/vite.md2.3 KB
03 SKILL.md 正文
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").
Bundled References (Load As Needed)
04 同仓库更多 Skills
webapp-testing
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
web-artifacts-builder
Suite of tools for creating elaborate, multi-component Codex.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
visual-explainer
Generate beautiful, self-contained HTML pages that visually explain systems, code changes, plans, and data. Use when the user asks for a diagram, architecture overview, diff review, plan review, project recap, comparison table, or any visual explanation of technical concepts. Also use proactively when you are about to render a complex ASCII table (4+ rows or 3+ columns) — present it as a styled HTML page instead.
transloadit-media-processing
Process media files (video, audio, images, documents) using Transloadit. Use when asked to encode video to HLS/MP4, generate thumbnails, resize or watermark images, extract audio, concatenate clips, add subtitles, OCR documents, or run any media processing pipeline. Covers 86+ processing robots for file transformation at scale.
theme-factory
Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.
terraform-azurerm-set-diff-analyzer
Analyze Terraform plan JSON output for AzureRM Provider to distinguish between false-positive diffs (order-only changes in Set-type attributes) and actual resource changes. Use when reviewing terraform plan output for Azure resources like Application Gateway, Load Balancer, Firewall, Front Door, NSG, and other resources with Set-type attributes that cause spurious diffs due to internal ordering changes.