AGENT SKILL

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-05-09
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 资源文件 7

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:

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

Bundled References (Load As Needed)

04 同仓库更多 Skills

ilderaj
ilderaj/agent-plugin-marketplace

android-emulator-qa

Use when validating Android feature flows in an emulator with adb-driven launch, input, UI-tree inspection, screenshots, and logcat capture.

★ 0
ilderaj
ilderaj/agent-plugin-marketplace

supabase-postgres-best-practices

Postgres performance optimization and best practices from Supabase. Use this skill when writing, reviewing, or optimizing Postgres queries, schema designs, or database configurations.

后端与接口
★ 0
ilderaj
ilderaj/agent-plugin-marketplace

sentry

Use when the user asks to inspect Sentry issues or events, summarize recent production errors, or pull basic Sentry health data via the Sentry API; perform read-only queries with the bundled script and require `SENTRY_AUTH_TOKEN`.

后端与接口
★ 0
ilderaj
ilderaj/agent-plugin-marketplace

render-workflows

Sets up, develops, tests, and deploys Render Workflows. Covers first-time scaffolding (via CLI or manual), SDK installation (Python or TypeScript), task patterns (retries, subtasks, fan-out), local development, Dashboard deployment, and troubleshooting. Use when a user wants to set up Render Workflows for the first time, scaffold a workflow service, add or modify workflow tasks, test workflows locally, or deploy workflows to Render.

数据分析师运维与部署分析与可视化
★ 0
ilderaj
ilderaj/agent-plugin-marketplace

render-monitor

Monitor Render services in real-time. Check health, performance metrics, logs, and resource usage. Use when users want to check service status, view metrics, monitor performance, or verify deployments are healthy.

Skill与智能体开发
★ 0
ilderaj
ilderaj/agent-plugin-marketplace

render-migrate-from-heroku

Migrate from Heroku to Render by reading local project files and generating equivalent Render services. Triggers: any mention of migrating from Heroku, moving off Heroku, Heroku to Render migration, or switching from Heroku. Reads Procfile, dependency files, and app config from the local repo. Optionally uses Heroku MCP to enrich with live config vars, add-on details, and dyno sizes. Uses Render MCP or Blueprint YAML to create services.

Skill与智能体开发
★ 0