How can I have root as defaultLocale (mixed-routing) and not redirect to /${defaultLocale}

[jeremybosma]

I’m working on my app, but / (app/page.tsx) never works because of the [locale]/page.tsx.

I want / to default to English while still allowing /en to exist for explicit use. Additionally, if a user’s user agent is set to Dutch (nl), / should redirect accordingly but i should also be able to go to /en for the english version.

How can I achieve this?

[amannn]

Were you able to figure it out?

The as-needed routing strategy of next-intl redirects from /en to /, also to avoid duplicate content across multiple pathnames.

[jeremybosma]

Not really,

How is that implemented though cause /en doesnt redirect to / for me. So i basically dont have a root page.

[jeremybosma]

I also don't understand how to redirect to /dashboard from root or page any /locale/login for example this is my middleware and it just doesnt work:

import { routing } from "@/i18n/routing.public";
import createMiddleware from "next-intl/middleware";
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
import { env } from "./env";
import { defaultLocale } from "./i18n/config";

const intlMiddleware = createMiddleware(routing);

export async function middleware(request: NextRequest) {
  const pathname = request.nextUrl.pathname;
  const sessionCookie = request.cookies.get("session");

  // Redirect authenticated users away from auth pages
  if (pathname.match(/\/[^/]+\/(login|register)$/)) {
    if (sessionCookie) {
      return NextResponse.redirect(new URL("/dashboard", request.url));
    }
  }

  // Redirect unauthenticated users from dashboard to login
  if (pathname === "/dashboard") {
    if (!sessionCookie) {
      const locale =
        request.cookies.get(env.INTERNATIONALIZATION_COOKIE_NAME)?.value ??
        defaultLocale;
      return NextResponse.redirect(new URL(`/${locale}/login`, request.url));
    }
  }

  return intlMiddleware(request);
}

export const config = {
  matcher: ['/', '/(en)/:path*']
};

[metafoo]

Did you find a solution for this? :)

[metafoo]

I don't know if this will come back to haunt me later, but: Adjusting request.nextUrl.pathname to the defaultLocale when the root-path is being requested does the trick!

import createMiddleware from 'next-intl/middleware'
import { routing } from '@/i18n/routing'

const intlMiddleware = createMiddleware(routing)

export default async function middleware(request) {
  if(request.nextUrl.pathname === "/") {
    request.nextUrl.pathname = "/" + routing.defaultLocale
  }

  const response = await intlMiddleware(request)

  return response
}