@photonjs/vercel

Vercel adapter for Photon.

Bundle your Vite application as supported by Vercel Output API (v3).

Install

npm i -D @photonjs/vercel

yarn add -D @photonjs/vercel

pnpm add -D @photonjs/vercel

bun add -D @photonjs/vercel

Features

• [x] SSG/Static files
  • see prerender config
• [x] SSR/Serverless functions
  • .[jt]s files under the <root>/api folder of your project are automatically bundled as Serverless functions under .vercel/output/functions/api/*.func
  • see additionalEndpoints config
• [x] ISR/Prerender functions
  • see isr config. Also see implementation of vike for example
• [x] Edge functions
• [x] Edge middleware
• [ ] Images optimization
• [ ] Preview mode
• [x] Advanced config

Simple usage

Install this package as a dev dependency and add it to your Vite config:

// vite.config.ts
import { defineConfig } from 'vite';
import vercel from '@photonjs/vercel';
import { getEntriesFromFs } from "@photonjs/vercel/utils";

export default defineConfig({
  plugins: [vercel({
    entries: [
      ...(await getEntriesFromFs("endpoints/api", {
        // Auto mapping examples:
        //   endpoints/api/page.ts -> /api/page
        //   endpoints/api/name/[name].ts -> /api/name/*
        destination: "api",
      }))
    ]
  })],
});

[!NOTE] @vercel/build currently forces the building of files in the /api folder, with no way to disable this behavior. It's recommended to place your files in a different folder.

Configure endpoints

Endpoints added via getEntriesFromFs can be configured by exporting values from the endpoint file:

// file: endpoints/api/endpoint.ts

// Should run on edge runtime
export const edge = true;

// Always add those header to this endpoint
export const headers = {
  'Some-Header': 'some value',
};

// Stream the response
export const streaming = true;

// Enable Incremental Static Regeneration for this endpoint
export const isr = {
  expiration: 30,
};

export default async function handler() {
  return new Response('Edge Function: OK', {
    status: 200,
  });
}

Edge middleware

You can use Edge middleware as describe in the official documentation (i.e. with a middleware.ts file at the root of your project).

FAQ

What does ISR do in dev mode?

Nothing. It's a production-only feature

What does edge: true target do in dev mode?

Nothing (yet?). If you have a use-case where an actual Edge runtime would be necessary in dev, please open a discussion

I don't see Vercel specific headers in dev mode

This is not yet supported. Please open an issue if you need this (PR welcome).

Related documentation: https://vercel.com/docs/edge-network/headers/request-headers