An unexpected redirection from a request rewrite

[jefer94]

Description

I have a folder called protected to views like not found, maintenance, countdown, the idea is that folder can only be accessed using rewriting, I saw that the browser got that like a redirection, why? because next-intl middleware returns a 307, causing a redirection and rendering a 404 request, I can't change that response status

Verifications

• I've verified that the problem I'm experiencing isn't covered in the docs.
• I've searched for similar, existing issues on GitHub and Stack Overflow.
• I've compared my app to a working example to look for differences.

Mandatory reproduction URL

https://capyschool.com/

Reproduction description

1. Open capyschool.com
2. go to capyschool.com/es
3. go again to go to capyschool.com

Expected behaviour

That it don't redirect to /es/protected/countdown

middleware

"use server";

import { NextRequest, NextResponse } from "next/server";
import { tokenInfo } from "@/actions/auth";
import { showMaintenance } from "./flags";
// import { getLanguage } from "@/lib/i18n";
import { targetDate } from "@/data/release";
import createMiddleware from "next-intl/middleware";
import { routing } from "./i18n/routing";
import { getLanguage } from "@/lib/i18n";

export const config = {
  matcher: [
    "/",
    "/(es|en)",
    "/(es|en)/:path*",
    "/(es|en)/learn/:path*",
    "/(es|en)/admin/:path*",
    "/learn/:path*",
    "/admin/:path*",
    "/((?!api|_next/static|_next/image|favicon.ico|apple-touch-icon.png|favicon.svg|images/books|icons|manifest).*)",
  ],
};
// http://localhost:3000/learn/english/pronunciations
// export default createMiddleware(routing);
// export const middleware = createMiddleware(routing);

function isLocale(locale: string) {
  if (locale.length !== 2 && locale.length !== 5) {
    return false;
  }
  if (locale.length === 5 && locale[2] !== "-") {
    return false;
  }

  return true;
}

export async function middleware(request: NextRequest) {
  const [, locale] = request.nextUrl.pathname.split("/");

  if (!isLocale(locale)) {
    let nextLocale = request.cookies.get("NEXT_LOCALE")?.value;
    if (!nextLocale && request.headers.has("Accept-Language")) {
      const acceptLanguage = request.headers.get("Accept-Language") as string;
      nextLocale = getLanguage(acceptLanguage, routing.locales);
      // request.cookies.set("NEXT_LOCALE", nextLocale);

      if (nextLocale != routing.defaultLocale) {
        return NextResponse.redirect(
          new URL(`/${nextLocale}${request.nextUrl.pathname}`, request.url),
        );
      }
    }
    if (!nextLocale) {
      nextLocale = routing.defaultLocale;
      // request.cookies.set("NEXT_LOCALE", nextLocale);
    }
    request.nextUrl.pathname = `/${nextLocale}${request.nextUrl.pathname}`;
    request.headers.set("x-locale", nextLocale);
  } else {
    request.headers.set("x-locale", locale);
  }

  const showAdmin = false;

  const today = new Date();
  if (request.nextUrl.pathname.includes("/protected/") && false) {
    request.nextUrl.pathname = `/${locale}/protected/404`;
  } else if (today.getTime() < targetDate.getTime()) {
    request.nextUrl.pathname = `/${locale}/protected/countdown`;
  } else if (await showMaintenance()) {
    request.nextUrl.pathname = `/${locale}/protected/maintenance`;
  } else if (request.nextUrl.pathname.startsWith(`/${locale}/learn`)) {
    const user = await tokenInfo();
    if (!user) {
      return NextResponse.redirect(new URL(`/${locale}/login`, request.url));
    }

    request.headers.set("x-user", user.username);
  } else if (
    request.nextUrl.pathname.startsWith(`/${locale}/admin`) &&
    !showAdmin
  ) {
    request.nextUrl.pathname = `/${locale}/protected/404`;
  }

  request.nextUrl.pathname = request.nextUrl.pathname.replace("//", "/");

  const nonce = Buffer.from(crypto.randomUUID()).toString("base64");
  const cspHeader = `
      default-src 'self';
      script-src 'self' 'nonce-${nonce}' 'strict-dynamic';
      style-src 'self';
      img-src 'self' blob: data:;
      font-src 'self';
      object-src 'none';
      base-uri 'self';
      form-action 'self';
      frame-ancestors 'none';
      upgrade-insecure-requests;
    `;

  const contentSecurityPolicyHeaderValue = cspHeader
    .replace(/\s{2,}/g, " ")
    .trim();

  request.headers.set("x-nonce", nonce);
  request.headers.set(
    "Content-Security-Policy",
    contentSecurityPolicyHeaderValue,
  );

  request.headers.set("x-url", request.nextUrl.pathname);

  const handleI18nRouting = createMiddleware(routing);
  const response = handleI18nRouting(request);

  if (process.env.NODE_ENV === "production") {
    response.headers.set(
      "Content-Security-Policy",
      contentSecurityPolicyHeaderValue,
    );
  }

  return response;
}

requests.ts

import { getRequestConfig } from "next-intl/server";
import { routing } from "./routing";

type Locale = (typeof routing)["locales"][number];

export default getRequestConfig(async ({ requestLocale }) => {
  // Validate that the incoming `locale` parameter is valid
  let locale = await requestLocale;

  // Ensure that a valid locale is used
  if (!locale || !routing.locales.includes(locale as Locale)) {
    locale = routing.defaultLocale;
  }

  return {
    locale,
    messages: (await import(`../../messages/${locale}.json`)).default,
  };
});

routing.ts

import { defineRouting } from "next-intl/routing";
import { createNavigation } from "next-intl/navigation";

export const routingSettings = {
  // A list of all locales that are supported
  locales: ["en", "es"],

  // Used when no locale matches
  defaultLocale: "en",
  localePrefix: {
    mode: "as-needed",
    prefixes: {
      es: "/es",
    },
  },
};

export const routing = defineRouting({
  // A list of all locales that are supported
  locales: ["en", "es"],

  // Used when no locale matches
  defaultLocale: "en",
  // localePrefix: "never",
  localePrefix: {
    mode: "as-needed",
    prefixes: {
      es: "/es",
    },
  },
});

// Lightweight wrappers around Next.js' navigation APIs
// that will consider the routing configuration
export const { Link, redirect, permanentRedirect, usePathname, useRouter } =
  createNavigation(routing);

layout.tsx

import type { Metadata } from "next";
import localFont from "next/font/local";
import { ThemeProvider } from "@/components/theme-provider";
import { Toaster } from "@/components/ui/toaster";
import { headers } from "next/headers";

import "../globals.css";
import { NextIntlClientProvider } from "next-intl";
import { getMessages, setRequestLocale } from "next-intl/server";
import { NavbarComponent } from "@/components/navbar";
import { routing } from "@/i18n/routing";
import { notFound } from "next/navigation";
import { targetDate } from "@/data/release";

const geistSans = localFont({
  src: "../fonts/GeistVF.woff",
  variable: "--font-geist-sans",
  weight: "100 900",
});
const geistMono = localFont({
  src: "../fonts/GeistMonoVF.woff",
  variable: "--font-geist-mono",
  weight: "100 900",
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

type LocaleProps = {
  children: React.ReactNode;
};

export async function LocaleLayout({ children }: LocaleProps) {
  const messages = await getMessages();

  return (
    <>
      <NextIntlClientProvider messages={messages}>
        {children}
      </NextIntlClientProvider>
    </>
  );
}

type RouterProps = {
  children: React.ReactNode;
  nonce: string | null;
};

function Theme({ children, nonce }: RouterProps) {
  "use client";

  return (
    <ThemeProvider
      attribute="class"
      defaultTheme="system"
      enableSystem
      disableTransitionOnChange
      nonce={nonce ?? undefined}
    >
      {children}

      <Toaster />
    </ThemeProvider>
  );
}

type Locale = (typeof routing)["locales"][number];

export default async function RootLayout({
  children,
  params: { locale },
}: Readonly<{
  children: React.ReactNode;
  params: { locale: string };
}>) {
  if (!routing.locales.includes(locale as Locale)) {
    notFound();
  }

  setRequestLocale(locale);

  const headersStore = headers();
  const nonce = headersStore.get("x-nonce");

  const today = new Date();

  if (today.getTime() < targetDate.getTime()) {
    return (
      <html lang={locale}>
        <body
          className={`${geistSans.variable} ${geistMono.variable} antialiased`}
        >
          <LocaleLayout>
            <Theme nonce={nonce}>
              <div className="overflow-y min-h-screen">
                <div>{children}</div>
              </div>
            </Theme>
          </LocaleLayout>
        </body>
      </html>
    );
  }

  return (
    <html lang={locale}>
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <LocaleLayout>
          <Theme nonce={nonce}>
            <div className="overflow-y min-h-screen">
              <NavbarComponent />
              <div className="mt-20">{children}</div>
            </div>
          </Theme>
        </LocaleLayout>
      </body>
    </html>
  );
}

[amannn]

It seems like your issue is caused by your custom middleware code that writes to pathname before calling the middleware from next-intl.

I'll move this to a discussion since it's a usage question and not a bug report.

[jefer94]

I'm not making any redirection in my middleware, it was caused by next-intl middleware, I performed the URL rewriting like appeared in the documentation, and next-intl middleware assumed that all rewriting are public, it's a next-intl logic error, if we wanted to show that URL in the browser we'd do a redirection instead

https://next-intl-docs.vercel.app/docs/routing/middleware#example-additional-rewrites

[amannn]

The next-intl middleware will redirect from / to /es if you have a corresponding cookie set. If you modify nextUrl.pathname before such a case, then this will naturally affect your redirect.

Also from the example in the docs:

Note that if you use a localePrefix other than always, you need to adapt the handling appropriately to handle unprefixed pathnames too.

I think that's what you tried to do, but apparently there's an error somewhere in your code. What's important is that you modify the pathname only for cases when no redirect follows.

If you're struggling with middleware logic, maybe an alternative could be to do your check for targetDate in app/[locale]/page.tsx instead?

[jefer94]

I left the countdown in the middleware to hide all the webpage, I saw / perform the redirects and I changed it to /en

I understood that if we use request.cookies.has('NEXT_LOCALE') we should avoid rewriting on redirections, but NEXT_LOCALE is set during a request of language switching, I think this cookie must be updated and could be useful to have a centralized logic to deal with all cases

There are 3 approaches to resolving that

1. a function to know if it will redirect before applying rewrites (I supposed looks for cookies or changes language)
2. split the middleware into two parts, it might be more complicated
3. receive a callback for rewrites

The first approach seems easy to apply, the code below works with localePrefix: "always", which should be applied with that function

"use server";

import { NextRequest, NextResponse } from "next/server";
import { tokenInfo } from "@/actions/auth";
import { showMaintenance } from "./flags";
import { targetDate } from "@/data/release";
import createMiddleware from "next-intl/middleware";
import { routing } from "./i18n/routing";
import { getLanguage } from "@/lib/i18n";

export const config = {
  matcher: [
    "/",
    "/(es|en)",
    "/(es|en)/:path*",
    "/(es|en)/learn/:path*",
    "/(es|en)/admin/:path*",
    "/learn/:path*",
    "/admin/:path*",
    "/((?!api|_next/static|_next/image|favicon.ico|apple-touch-icon.png|favicon.svg|images/books|icons|manifest).*)",
  ],
};

export async function middleware(request: NextRequest) {
  let [, locale] = request.nextUrl.pathname.split("/");

  console.log("rr", locale);
  request.headers.set("x-locale", locale);

  console.log("middleware", locale);

  const showAdmin = false;


  const today = new Date();
  if (locale && routing.locales.includes(locale as any)) {
    if (request.nextUrl.pathname.includes("/protected/") && false) {
      request.nextUrl.pathname = `/${locale}/protected/404`;
    } else if (today.getTime() < targetDate.getTime()) {
      request.nextUrl.pathname = `/${locale}/protected/countdown`;
    } else if (await showMaintenance()) {
      request.nextUrl.pathname = `/${locale}/protected/maintenance`;
    } else if (request.nextUrl.pathname.startsWith(`/${locale}/learn`)) {
      const user = await tokenInfo();
      if (!user) {
        return NextResponse.redirect(new URL(`/${locale}/login`, request.url));
      }

      request.headers.set("x-user", user.username);
    } else if (
      request.nextUrl.pathname.startsWith(`/${locale}/admin`) &&
      !showAdmin
    ) {
      request.nextUrl.pathname = `/${locale}/protected/404`;
    }
    request.nextUrl.pathname = request.nextUrl.pathname.replace("//", "/");
  }

  const nonce = Buffer.from(crypto.randomUUID()).toString("base64");
  const cspHeader = `
      default-src 'self';
      script-src 'self' 'nonce-${nonce}' 'strict-dynamic';
      style-src 'self';
      img-src 'self' blob: data:;
      font-src 'self';
      object-src 'none';
      base-uri 'self';
      form-action 'self';
      frame-ancestors 'none';
      upgrade-insecure-requests;
    `;

  const contentSecurityPolicyHeaderValue = cspHeader
    .replace(/\s{2,}/g, " ")
    .trim();

  request.headers.set("x-nonce", nonce);
  request.headers.set(
    "Content-Security-Policy",
    contentSecurityPolicyHeaderValue,
  );

  request.headers.set("x-url", request.nextUrl.pathname);

  const handleI18nRouting = createMiddleware(routing);
  const response = handleI18nRouting(request);

  return response;
}

[jefer94]

I check something like

  let [, locale] = request.nextUrl.pathname.split("/");

  const cookie = request.cookies.get(localeCookieName);
  if (!routing.locales.includes(locale as any)) {
    locale = routing.defaultLocale;
  }
  const allowRewrites =
    (cookie && cookie.value == locale) ||
    getLanguage(
      request.headers.get("Accept-Language") || locale,
      routing.locales,
    ) == routing.defaultLocale;

And this didn't work, I suppose that is required that this be managed by the lib, it's complicated to know if something will redirect, I supposed if it matches with default it won't redirect

[amannn]

the code below works with localePrefix: "always"

Yep, that case should be significantly easier. I recommend this routing strategy generally due to its simplified usage.

As for localePrefix: 'as-necessary' this is indeed a bit more involved as you've noticed, I unfortunately don't have a better solution here at this point.

[jefer94]

That configuration cause an unexpected redirection too, outside the webpage

export const routing = defineRouting({
  // A list of all locales that are supported
  locales: ["en", "es"],

  // Used when no locale matches
  defaultLocale: "en",
  // localePrefix: "never",
  localePrefix: {
    mode: "as-needed",
    prefixes: {
      es: "/es",
      en: "/",
    },
  },
});

I read and thought that I needed many top-level domains per region to improve the SEO, but it works fine with rel="alternate", I expect that it's redirecting because it's targeting /, I expect this works because I target this release to next 15 days

[amannn]

     en: "/",

Nope, that won't work—as-needed already implies the default locale to not use a prefix. You don't need to add prefixes.