Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 9 additions & 76 deletions src/content/docs/en/guides/integrations-guide/vercel.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -374,38 +374,6 @@ export default defineConfig({
});
```

### Vercel Edge Middleware

You can use [Vercel Edge middleware](https://vercel.com/docs/functions/edge-middleware) to intercept a request and redirect before sending a response. Vercel middleware can run for Edge, SSR, and Static deployments.

You may not need to install this package for your middleware. `@vercel/edge` is only required to use some middleware features such as geolocation. For more information, see [Vercel’s middleware documentation](https://vercel.com/docs/concepts/functions/edge-middleware).

1. Add a `middleware.js` file to the root of your project:

```js title="middleware.js"
export const config = {
// Only run the middleware on the admin route
matcher: '/admin',
};

export default function middleware(request) {
const url = new URL(request.url);
// You can retrieve IP location or cookies here.
if (url.pathname === '/admin') {
url.pathname = '/';
}
return Response.redirect(url);
}
```

2. While developing locally, you can run `vercel dev` to run middleware. In production, Vercel will handle this for you.



:::caution
**Trying to rewrite?** Currently rewriting a request with middleware only works for static files.
:::

### Running Astro middleware on Vercel Edge Functions

The `@astrojs/vercel/serverless` adapter can create an [edge function](https://vercel.com/docs/functions/edge-functions) from an Astro middleware in your code base. When `edgeMiddleware` is enabled, an edge function will execute your middleware code for all requests including static assets, prerendered pages, and on-demand rendered pages.
Expand All @@ -427,56 +395,21 @@ export default defineConfig({
});
```

Optionally, you can create a file recognized by the adapter named `vercel-edge-middleware.(js|ts)` in the [`srcDir`](/en/reference/configuration-reference/#srcdir) folder to create [`Astro.locals`](/en/reference/api-reference/#astrolocals).

Typings requires the [`@vercel/edge`](https://www.npmjs.com/package/@vercel/edge) package.

```js title="src/vercel-edge-middleware.js"
/**
*
* @param options.request {Request}
* @param options.context {import("@vercel/edge").RequestContext}
* @returns {object}
*/
export default function ({ request, context }) {
// do something with request and context
return {
title: "Spider-man's blog",
};
}
```
The edge middleware has access to Vercel's [`RequestContext`](https://vercel.com/docs/functions/edge-middleware/middleware-api#requestcontext) as `ctx.locals.vercel.edge`. If you’re using TypeScript, you can get proper typings by updating `src/env.d.ts` to use `EdgeLocals`:

If you use TypeScript, you can type the function as follows:
```ts
/// <reference path="../.astro/types.d.ts" />
/// <reference types="astro/client" />

```ts title="src/vercel-edge-middleware.ts"
import type { RequestContext } from '@vercel/edge';
type EdgeLocals = import('@astrojs/vercel').EdgeLocals

export default function ({ request, context }: { request: Request; context: RequestContext }) {
// do something with request and context
return {
title: "Spider-man's blog",
};
declare namespace App {
interface Locals extends EdgeLocals {
// ...
}
}
```

The data returned by this function will be passed to Astro middleware.

The function:

* must export a **default** function;
* must **return** an `object`;
* accepts an object with a `request` and `context` as properties;
* `request` is typed as [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request);
* `context` is typed as [`RequestContext`](https://vercel.com/docs/concepts/functions/edge-functions/vercel-edge-package#requestcontext);

#### Limitations and constraints

When you opt in to this feature, there are few constraints to note:

* The Vercel Edge middleware will always be the **first** function to receive the `Request` and the last function to receive `Response`. This an architectural constraint that follows the [boundaries set by Vercel](https://vercel.com/docs/concepts/functions/edge-middleware).
* Only `request` and `context` may be used to produce an `Astro.locals` object. Operations like redirects, etc. should be delegated to Astro middleware.
* `Astro.locals` **must be serializable**. Failing to do so will result in a **runtime error**. This means that you **cannot** store complex types like `Map`, `function`, `Set`, etc.
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the one bit of information that remains relevant - the locals added by the user will need to be JSON serializable. I think we communicate this adequately in the section above.


### Node.js Version Support

The `@astrojs/vercel` adapter supports specific Node.js versions for deploying your Astro project on Vercel. To view the supported Node.js versions on Vercel, click on the settings tab for a project and scroll down to "Node.js Version" section.
Expand Down