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.

From netlify-skills
Install
1
Run in your terminal
$
npx claudepluginhub netlify/context-and-tools --plugin netlify-skills
Tool Access

This skill uses the workspace's default tool permissions.

Supporting Assets
View in Repository
references/astro.md
references/nextjs.md
references/tanstack.md
references/vite.md
Skill Content

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

Similar Skills
cache-components

Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.

138.5k
Stats
Stars10
Forks4
Last CommitFeb 11, 2026