@photonjs/vercel

Vercel adapter for Photon.

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

Install

``bash
npm i -D @photonjs/vercel
`

`bash
yarn add -D @photonjs/vercel
`

`bash
pnpm add -D @photonjs/vercel
`

`bash
bun add -D @photonjs/vercel
`

Features

- [x] SSG/Static files
- see prerender config
- [x] SSR/Serverless functions
- .[jt]s files under the /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:

`ts
// 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.

$3

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

`ts
// 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,
});
}
`

$3

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

$3

Nothing. It's a production-only feature

$3

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

$3

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