diff --git a/src/content/docs/en/guides/integrations-guide/vercel.mdx b/src/content/docs/en/guides/integrations-guide/vercel.mdx index 27d2948651284..c6e7e161186e9 100644 --- a/src/content/docs/en/guides/integrations-guide/vercel.mdx +++ b/src/content/docs/en/guides/integrations-guide/vercel.mdx @@ -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. @@ -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 +/// +/// -```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. - ### 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.