Back to Details

netlify-frameworks

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Frameworks on Netlify

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.
Netlify 支持任何可生成静态输出的框架。对于具备服务端能力（SSR、API 路由、中间件）的框架，适配器或插件会自动将框架的服务端代码转换为 Netlify Functions 和 Edge Functions。

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.
构建过程中，框架适配器会将函数、边缘函数、重定向规则和配置文件写入 
.netlify/v1/
目录。Netlify 会读取这些内容完成站点部署。当你使用框架适配器实现服务端功能时，无需手动编写 Netlify Functions。

Detecting Your Framework

检测你的框架

Check these files to determine the framework:
FileFramework
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
你可以通过检查以下文件判断使用的框架：
文件框架
astro.config.*
Astro
next.config.*
Next.js
nuxt.config.*
Nuxt
vite.config.*
+ 
react-router
Vite + React（SPA 或 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
每个框架都有特定的适配器/插件要求和本地开发模式：
  • Vite + React（SPA 或带服务端路由）：参考 references/vite.md
  • Astro：参考 references/astro.md
  • TanStack Start：参考 references/tanstack.md
  • Next.js：参考 references/nextjs.md

General Patterns

通用模式

Client-Side Routing (SPA)

客户端路由（SPA）

For single-page apps with client-side routing, add a catch-all redirect:
toml
undefined
对于使用客户端路由的单页应用，需要添加一条兜底重定向规则：
toml
undefined

netlify.toml

netlify.toml

[[redirects]] from = "/*" to = "/index.html" status = 200
undefined
[[redirects]] from = "/*" to = "/index.html" status = 200
undefined

Custom 404 Pages

自定义404页面

  • 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).
  • 静态站点：在你的发布目录下创建 
    404.html
    文件，Netlify 会自动为未匹配的路由提供该页面。
  • SSR 框架：在框架的路由逻辑中处理404（适配器会将其映射到 Netlify 的函数路由）。

Environment Variables in Frameworks

框架中的环境变量

Each framework exposes environment variables to client-side code differently:
FrameworkClient prefixAccess 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")
.
不同框架向客户端代码暴露环境变量的方式不同：
框架客户端前缀访问方式
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
所有框架的服务端代码都可以通过 
process.env.VAR
或 
Netlify.env.get("VAR")
访问环境变量。