# How can I increase the limit of redirects or use dynamic redirects on Vercel? **Author:** Justin Vitale, Mark Knichel --- In this article, we describe the following methods to redirect a path to another location by using [Vercel](https://vercel.com/) and [Next.js](http://nextjs.org/) features: - [With vercel.json or vercel.ts](#with-vercel.json-or-vercel.ts) - [With Next.js](#with-next.js) - [With Edge Middleware](#with-edge-middleware) - [Using a Serverless Function](#using-a-serverless-function) If you need to define more than 2048 redirects, you can use [bulk redirects](https://vercel.com/docs/redirects/bulk-redirects) on Vercel to serve a large number of redirects performantly from the edge. ## With `vercel.json` or `vercel.ts` You can define redirects on Vercel using the `vercel.json` or `vercel.ts` project configuration. If you are using a framework, such as [Next.js](https://5c5ab0e5-574a-4b6b-b378-5842c9589e76.ctfcloud.net/4Te5fwQ9ohnI46QvlaisuO/index.html?Expires=1768602263&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly81YzVhYjBlNS01NzRhLTRiNmItYjM3OC01ODQyYzk1ODllNzYuY3RmY2xvdWQubmV0LzRUZTVmd1E5b2huSTQ2UXZsYWlzdU8vaW5kZXguaHRtbCIsIkNvbmRpdGlvbiI6eyJEYXRlTGVzc1RoYW4iOnsiQVdTOkVwb2NoVGltZSI6MTc2ODYwMjI2M319fV19&Signature=U~FLNdxcLamyHChSl3WyW51XArBEyaXNLzY1Kv2xshzXQhX2h3ZfH4EgaB2cAHwOfEiSOBBvb6lsvbsHIk4MovrxTNOrDEVPw-su4~WguvWdQCs2kTOA83eJEmXqgCxjo96PkzkujvLClDcaNM0OIMi6fr7Q3az1qHy71OyVyKYXdoIr~xi7RzjeyIoHElscMv5GFFnyXwAqP5XZ0r0o-OuYs1WoIy-eFa3pN0dPZKVo~wAkdN54VQQXL-hSqjNvhgDFLeuAK07OtCq~-IdZ01h16P4DCqdD6mSu0fs21W4WZpHOpZcfXh1-gVlZHf7FR2qBkMgHtS78T2sf09avKw__&Key-Pair-Id=K1FL5TKJLAFZQZ#with-next.js), you can also define the redirects in the framework-specific configuration file. ### Using `redirects` with vercel.json You can define up to 2048 routes in the Vercel configuration. If you need to define more redirects, you can use [bulk redirects](https://vercel.com/docs/redirects/bulk-redirects), or look at [Edge Middleware](https://5c5ab0e5-574a-4b6b-b378-5842c9589e76.ctfcloud.net/4Te5fwQ9ohnI46QvlaisuO/index.html?Expires=1768602263&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly81YzVhYjBlNS01NzRhLTRiNmItYjM3OC01ODQyYzk1ODllNzYuY3RmY2xvdWQubmV0LzRUZTVmd1E5b2huSTQ2UXZsYWlzdU8vaW5kZXguaHRtbCIsIkNvbmRpdGlvbiI6eyJEYXRlTGVzc1RoYW4iOnsiQVdTOkVwb2NoVGltZSI6MTc2ODYwMjI2M319fV19&Signature=U~FLNdxcLamyHChSl3WyW51XArBEyaXNLzY1Kv2xshzXQhX2h3ZfH4EgaB2cAHwOfEiSOBBvb6lsvbsHIk4MovrxTNOrDEVPw-su4~WguvWdQCs2kTOA83eJEmXqgCxjo96PkzkujvLClDcaNM0OIMi6fr7Q3az1qHy71OyVyKYXdoIr~xi7RzjeyIoHElscMv5GFFnyXwAqP5XZ0r0o-OuYs1WoIy-eFa3pN0dPZKVo~wAkdN54VQQXL-hSqjNvhgDFLeuAK07OtCq~-IdZ01h16P4DCqdD6mSu0fs21W4WZpHOpZcfXh1-gVlZHf7FR2qBkMgHtS78T2sf09avKw__&Key-Pair-Id=K1FL5TKJLAFZQZ#with-edge-middleware) or a [Serverless Function](https://5c5ab0e5-574a-4b6b-b378-5842c9589e76.ctfcloud.net/4Te5fwQ9ohnI46QvlaisuO/index.html?Expires=1768602263&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly81YzVhYjBlNS01NzRhLTRiNmItYjM3OC01ODQyYzk1ODllNzYuY3RmY2xvdWQubmV0LzRUZTVmd1E5b2huSTQ2UXZsYWlzdU8vaW5kZXguaHRtbCIsIkNvbmRpdGlvbiI6eyJEYXRlTGVzc1RoYW4iOnsiQVdTOkVwb2NoVGltZSI6MTc2ODYwMjI2M319fV19&Signature=U~FLNdxcLamyHChSl3WyW51XArBEyaXNLzY1Kv2xshzXQhX2h3ZfH4EgaB2cAHwOfEiSOBBvb6lsvbsHIk4MovrxTNOrDEVPw-su4~WguvWdQCs2kTOA83eJEmXqgCxjo96PkzkujvLClDcaNM0OIMi6fr7Q3az1qHy71OyVyKYXdoIr~xi7RzjeyIoHElscMv5GFFnyXwAqP5XZ0r0o-OuYs1WoIy-eFa3pN0dPZKVo~wAkdN54VQQXL-hSqjNvhgDFLeuAK07OtCq~-IdZ01h16P4DCqdD6mSu0fs21W4WZpHOpZcfXh1-gVlZHf7FR2qBkMgHtS78T2sf09avKw__&Key-Pair-Id=K1FL5TKJLAFZQZ#using-a-serverless-function). The [Regex Path Matching](https://vercel.com/docs/concepts/projects/project-configuration#redirects) documentation explains the syntax for `source` and `destination` fields. `{ "redirects": [{ "source": "/legacy/:path*", "destination": "/new/:path*" } ] }` `vercel.ts` is an alternative to `vercel.json` that allows you to write the Vercel configuration using TypeScript. Learn more in the [vercel.ts documentation](https://vercel.com/docs/project-configuration/vercel-ts). ## With Next.js If you are deploying a [Next.js](https://nextjs.org/) application to [Vercel](http://vercel.com/), you can define redirects in the following ways: 1. Using the `redirects` configuration. 2. Using a [Next.js page](https://nextjs.org/docs/basic-features/pages). 3. Using an [API route](https://nextjs.org/docs/api-routes/introduction). ### Using `redirects` The main characteristic of the `redirects` feature is that it is a [**build-time**](https://vercel.com/docs/concepts/deployments/configure-a-build) **configuration**. Which means it is only possible to generate it once before the application is deployed. You can check the [official Next.js documentation](https://nextjs.org/docs/api-reference/next.config.js/redirects) for instructions on how to define the redirects statically. `module.exports = { async redirects() { return [{ source: "/legacy/:path*", destination: "/new/:path" } ] } }` ### Using a Next.js Page Performing redirects using a [Next.js page](https://nextjs.org/docs/basic-features/pages) gives your deployment the ability to fallback to a normal page with a presentable UI in case the redirect is not found. Therefore, using a page for redirects is recommended if you need to dynamically query an external resource to fetch your list of redirects, and those routes will be shared with your users. To avoid executing the [Serverless Function](https://vercel.com/docs/concepts/functions/serverless-functions) for every request to a certain path, it is also recommended to [cache the response](https://vercel.com/docs/edge-network/caching#cacheable-responses). ``// pages/redirects.js import Error from 'next/error' export async function getServerSideProps({req, res}) { // Insert redirect rules here if (req.url.startsWith('/example')) { res.statusCode = 308 res.setHeader('location', '/test') // Caching headers res.setHeader('Cache-control', 's-maxage=600') return res.end() } return { props: { errorCode: 404 } } } export default function Page({ errorCode }) { return
`${errorCode}`
}`` Now that we have a page ready to accept requests and redirect given a condition, it is also necessary to route all relevant paths to the page above. In the code snippet below, we will use `rewrites` to adjust our routing behavior. `module.exports = { async rewrites() { return [{ source: "/ad-campaign/:path*", destination: "/redirects" } ] } }` ### Using an API Route You can also perform redirects using an [API Route](https://nextjs.org/docs/api-routes/introduction). This method is recommended if you need to dynamically query an external resource to fetch your list of redirects, and you want an endpoint that can perform those redirects without a presentable page. To avoid invoking the [Serverless Function](https://vercel.com/docs/concepts/functions/serverless-functions) for every request to a certain path, it is also recommended to [cache the response](https://vercel.com/docs/edge-network/caching#cacheable-responses). `export default (req, res) => { // Insert redirect rules here if (req.url.startsWith('/example')) { res.statusCode = 308 res.setHeader('location', '/test') // Caching headers res.set('Cache-control', 's-maxage=600') return res.end() } res.statusCode = 404 return res.end('Not found') }` With the [API route](https://nextjs.org/docs/api-routes/introduction) ready to accept requests and perform redirects, we need to configure the routing configuration of the Next.js deployment. In the code snippet below, we will use `rewrites` to adjust our routing behavior. `module.exports = { async rewrites() { return [{ source: "/ad-campaign/:path*", destination: "/redirects" } ] } }` ### Bringing It All Together Using the Next.js routing methods above you can optimize your routes by implementing a catch-all fallback to handle simpler redirects avoiding the 2048 limit yet keeping your redirects intact. During the [build phase](https://github.com/vercel/examples/blob/main/app-directory/redirect-with-fallback/next.config.js#L6), we [split redirects](https://github.com/vercel/examples/blob/main/app-directory/redirect-with-fallback/redirects.js#L35-L39) into two categories: [simple ones](https://github.com/vercel/examples/blob/main/app-directory/redirect-with-fallback/app/%5B...slug%5D/route.ts#L11) that can be handled by an API route (with no route limits), and [complex rules](https://github.com/vercel/examples/blob/main/app-directory/redirect-with-fallback/next.config.js#L1) that are defined in a next.config.js file (where there is a route limit). For a full example project, you can check out our public repository [here](https://github.com/vercel/examples/tree/main/app-directory/redirect-with-fallback). ## With Edge Middleware At the moment, there is a limit of 2048 redirect rules that can be described in the configuration for Vercel deployed apps. To effectively bypass the limit 2048 "Routes created per Deployment" limit, it is advised to migrate your static redirects to [Edge Middleware](https://vercel.com/docs/concepts/functions/edge-middleware/middleware-api#). `import { NextResponse } from 'next/server'; import type { NextRequest } from 'next/server'; // config with custom matcher export const config = { matcher: '/about/:path*', }; export default function middleware(request: NextRequest) { return NextResponse.redirect(new URL('/about-2', request.url)); }` Edge Middleware can also be paired with [Edge Config](https://vercel.com/docs/concepts/edge-network/edge-config) where a JSON blob of redirect rules can be stored and read from. `import { get } from '@vercel/edge-config'; import { NextResponse } from 'next/server'; export const config = { matcher: '/((?!api|_next/static|favicon.ico).*)', }; export default async function middleware(request) { const url = request.nextUrl; const redirects = await get('redirects'); for (const redirect of redirects) { if (redirect.source === url.pathname) { url.pathname = redirect.destination; return NextResponse.redirect(url); } } return NextResponse.next(); }` ### Using a Serverless Function You can perform redirects with a [Serverless Function](https://vercel.com/docs/concepts/functions/serverless-functions). This method is recommended if you need to dynamically query an external resource to fetch your list of redirects. To avoid invoking the [Serverless Function](https://vercel.com/docs/concepts/functions/serverless-functions) for every request to a certain path, it is also recommended to [cache the response](https://vercel.com/docs/edge-network/caching#cacheable-responses). `module.exports = async (req, res) => { // Insert redirect rules here if (req.url.startsWith('/example')) { res.statusCode = 308 res.setHeader('location', '/test') // Caching headers res.set('Cache-control', 's-maxage=600') return res.end() } res.statusCode = 404 return res.end('Not found') }` We have created a [Node.js Serverless Function](https://vercel.com/docs/concepts/functions/serverless-functions#deploying-serverless-functions) that accepts requests and perform redirects programatically. The next step should be to create a new [rewrite](https://vercel.com/docs/project-configuration#project-configuration/rewrites) rule to adjust our routing behavior. `{ "rewrites": [{ "source": "/ad-campaign/:match*", "destination": "/api/redirects" } ] }` ## Conclusion As outlined in this article, there are multiple ways to perform redirects when deploying an application to Vercel. If you are using Next.js, it is recommended that you use the [`next.config.js`](https://nextjs.org/docs/api-reference/next.config.js/introduction) configuration if you need statically defined rewrites. If you need to query external resources or perform server-side computation, using a Next.js [page](https://nextjs.org/docs/basic-features/pages) or an [API Route](https://nextjs.org/docs/api-routes/introduction) gives you the required flexibility for advanced use-cases. For other frameworks, you can either define statically your redirects with [`vercel.json`](https://vercel.com/docs/configuration#project/redirects) or use [Serverless Functions](https://vercel.com/docs/concepts/functions/serverless-functions) for advanced requirements. --- [View full KB sitemap](/kb/sitemap.md)