框架预设支持 #

┌─────────────────────────────────────────┐
│        Vercel 支持的框架                 │
├─────────────────────────────────────────┤
│  React 生态   →  Next.js, CRA, Remix    │
│  Vue 生态     →  Nuxt, Vue CLI          │
│  Angular      →  Angular CLI            │
│  Svelte       →  SvelteKit              │
│  静态站点     →  Hugo, Jekyll, etc.     │
│  其他         →  Astro, Gatsby, etc.    │
└─────────────────────────────────────────┘

nextjs-app/
├── app/                    # App Router (Next.js 13+)
│   ├── layout.tsx
│   ├── page.tsx
│   └── api/
│       └── route.ts
├── pages/                  # Pages Router
│   ├── _app.tsx
│   ├── index.tsx
│   └── api/
│       └── hello.ts
├── public/
├── next.config.js
└── package.json

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'standalone',
  images: {
    domains: ['example.com'],
  },
  experimental: {
    serverActions: true,
  },
}

module.exports = nextConfig

{
  "framework": "nextjs",
  "buildCommand": "next build",
  "outputDirectory": ".next"
}

┌─────────────────────────────────────────┐
│  Next.js 输出模式                        │
├─────────────────────────────────────────┤
│  默认        →  服务端渲染 + 静态生成     │
│  standalone  →  独立部署包              │
│  export      →  纯静态导出              │
└─────────────────────────────────────────┘

cra-app/
├── public/
│   └── index.html
├── src/
│   ├── App.jsx
│   └── index.js
├── package.json
└── vercel.json

{
  "framework": "create-react-app",
  "buildCommand": "react-scripts build",
  "outputDirectory": "build"
}

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

vue-app/
├── public/
├── src/
│   ├── App.vue
│   └── main.js
├── vue.config.js
└── package.json

{
  "framework": "vue",
  "buildCommand": "vue-cli-service build",
  "outputDirectory": "dist"
}

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
  outputDir: 'dist',
}

vite-vue-app/
├── src/
│   ├── App.vue
│   └── main.js
├── index.html
├── vite.config.js
└── package.json

{
  "framework": "vue",
  "buildCommand": "vite build",
  "outputDirectory": "dist"
}

nuxt-app/
├── pages/
│   └── index.vue
├── components/
├── server/
│   └── api/
├── nuxt.config.ts
└── package.json

export default defineNuxtConfig({
  ssr: true,
  nitro: {
    preset: 'vercel'
  }
})

{
  "framework": "nuxtjs",
  "buildCommand": "nuxt build",
  "outputDirectory": ".output"
}

┌─────────────────────────────────────────┐
│  Nuxt 渲染模式                           │
├─────────────────────────────────────────┤
│  SSR  →  服务端渲染（默认）              │
│  SSG  →  静态生成（nitro: preset: vercel-static）
│  SPA  →  客户端渲染                      │
└─────────────────────────────────────────┘

angular-app/
├── src/
│   ├── app/
│   ├── assets/
│   └── index.html
├── angular.json
└── package.json

{
  "projects": {
    "angular-app": {
      "architect": {
        "build": {
          "options": {
            "outputPath": "dist/angular-app"
          }
        }
      }
    }
  }
}

{
  "framework": "angular",
  "buildCommand": "ng build",
  "outputDirectory": "dist/angular-app"
}

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

sveltekit-app/
├── src/
│   ├── routes/
│   │   └── +page.svelte
│   └── app.html
├── svelte.config.js
└── package.json

import adapter from '@sveltejs/adapter-vercel'

export default {
  kit: {
    adapter: adapter({
      runtime: 'edge'
    })
  }
}

{
  "framework": "sveltekit",
  "buildCommand": "vite build",
  "outputDirectory": ".svelte-kit"
}

astro-app/
├── src/
│   ├── pages/
│   │   └── index.astro
│   └── components/
├── astro.config.mjs
└── package.json

import { defineConfig } from 'astro/config'
import vercel from '@astrojs/vercel'

export default defineConfig({
  output: 'server',
  adapter: vercel()
})

{
  "framework": "astro",
  "buildCommand": "astro build",
  "outputDirectory": "dist"
}

┌─────────────────────────────────────────┐
│  Astro 输出模式                          │
├─────────────────────────────────────────┤
│  static  →  纯静态站点                   │
│  server  →  服务端渲染                   │
│  hybrid  →  混合渲染                     │
└─────────────────────────────────────────┘

remix-app/
├── app/
│   ├── routes/
│   ├── root.tsx
│   └── entry.client.tsx
├── remix.config.js
└── package.json

module.exports = {
  ignoredRouteFiles: ['**/.*'],
  serverAdapter: () => {
    return '@vercel/remix'
  }
}

{
  "framework": "remix",
  "buildCommand": "remix build",
  "outputDirectory": "public"
}

gatsby-app/
├── src/
│   ├── pages/
│   └── components/
├── gatsby-config.js
└── package.json

{
  "framework": "gatsby",
  "buildCommand": "gatsby build",
  "outputDirectory": "public"
}

hugo-site/
├── content/
├── layouts/
├── static/
└── config.toml

{
  "buildCommand": "hugo",
  "outputDirectory": "public"
}

jekyll-site/
├── _posts/
├── _layouts/
├── _config.yml
└── index.html

{
  "buildCommand": "jekyll build",
  "outputDirectory": "_site"
}

hexo-site/
├── source/
├── themes/
├── _config.yml
└── package.json

{
  "buildCommand": "hexo generate",
  "outputDirectory": "public"
}

{
  "buildCommand": "your-build-command",
  "outputDirectory": "your-output-dir",
  "installCommand": "npm install"
}