Use middleware

[rugged fox]

Hi Joulev! But when using a middleware, isn't there a limit? I can just create a huge array with redirects and check within it?

[gentle otter]

There is no limit on the number of redirects, but there is a limit on total middleware usage (see vercel pricing) which you can extend with paid plans

But if you self host, the only limit is the physical limit of your server

[rugged fox]

Ah check, thanks for your answer. We host indeed on Vercel!

[gentle otter]

Unless you have a big number of users, you shouldn’t need to worry about limits

And the limits are not hard limits and you can extend it freely yeah

[rugged fox]

We bave a big number of users unfortunately 😦 So I am not sure this is the best option.

[gentle otter]

Middleware is generally the best option for redirects, especially in your case where next config cannot have that many redirects. You can use a matcher to limit middleware usage to only routes that are redirected. After that just act based on actual usage, i believe for a large number of users the hobby plan is usually not enough, even excluding middleware

[rugged fox]

We have the "Pro" plan at the moment, we will try it first using a middleware, if it gets to expensive we will try another way! Thanks for your help Joulev! 😄

Have a nice day!

[gentle otter]

Then with a good matcher you don’t need to worry about limits

Heck, even without a good matcher it should still work well

Good luck

[rugged fox]

It did work out well! Thanks!

[rugged fox]

Mhm

This seems to work pretty nice. There is only one problem, when I am visiting a page for the first time the translations are not working, I use next-translate for this. Do you maybe know why this happends?

import { NextResponse } from 'next/server';
import { redirects } from 'src/constants/redirects';

export function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl;
  const locale = request.nextUrl.locale;

  let redirect = undefined;

  switch (locale) {
    case 'de-AT':
    case 'de-DE':
    case 'en-GB':
    case 'fr-FR':
    case 'nl-NL':
    case 'nl-BE':
      redirect = redirects[locale].find((_redirect) => _redirect.source === pathname);
      break;
    case 'fr-BE':
      const r = redirects[locale].find((_redirect) => _redirect.source === pathname);

      if (r) {
        redirect = {
          ...r,
          target: `/fr-BE${r.target}`
        };
      }
      break;
  }

  if (redirect) {
    return NextResponse.redirect(new URL(redirect.target, request.url));
  }

  return NextResponse.next();
}

export const config = {
  matcher: '/((?!api|_next|static|public|favicon.ico).*)'
};

[rugged fox]

Seems my middleware and my rewrites and redirects from my Next configs are conflicting somehow :/