Handling Mixed Localized and Non-Localized Links in Next.js Navigation

[bennajah]

I have a Next.js app that uses mixed routing:

app/
  [locale]/
    page.tsx

  dashboard/
    page.tsx

My navigation bar includes both localized routes and a dashboard route.
However, I’m running into an issue because I need to use two different imports in the same component:

Link from @/i18n/navigation for localized routes

Link from next/link for non-localized (dashboard) routes

But I can’t import and use both in the same component. How can I handle this cleanly?

[amannn]

I see your point, yes! This is unfortunately not possible currently, you'd need to either use next/link or @/i18n/navigation as shown in the mixed routing example.

[bennajah]

@amannn

is possible to use mixed routing with next/root-params
i try with this next config below
but the issue when read locale from cookies for dashbord routes getting this error

Error: Route "/dashboard": Uncached data was accessed outside of <Suspense>. This delays the entire page from rendering, resulting in a slow user experience. Learn more: https://nextjs.org/docs/messages/blocking-route

// next.config.ts
const nextConfig: NextConfig = {
  ...
  cacheComponents: true,
  experimental: {
    rootParams: true,
  },
};

// src/i18n/request.ts
import { cookies } from "next/headers";
import * as rootParams from "next/root-params";
import { hasLocale } from "next-intl";
import { getRequestConfig } from "next-intl/server";
import { COOKIE_NAME, defaultLocale, locales } from "./config";

export default getRequestConfig(async () => {
  let candidate = await rootParams.locale();
  if (!candidate) {
    const store = await cookies();
    candidate = store.get(COOKIE_NAME)?.value;
  }

  const locale = hasLocale(locales, candidate) ? candidate : defaultLocale;

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

// src/proxy.ts
import { type NextRequest, NextResponse } from "next/server";
import createMiddleware from "next-intl/middleware";
import { locales } from "@/i18n/config";
import { routing } from "@/i18n/routing";

const publicPages = ["/", "/about"];
const publicPathnameRegex = new RegExp(
  `^(/(${locales.join("|")}))?(${publicPages
    .flatMap((p) => (p === "/" ? ["", "/"] : p))
    .join("|")})/?$`,
  "i"
);

const handleI18nRouting = createMiddleware(routing);

export function proxy(req: NextRequest) {
  const isPublicPage = publicPathnameRegex.test(req.nextUrl.pathname);
  if (isPublicPage) {
    return handleI18nRouting(req);
  }
  return NextResponse.next();
}

export const config = {
  matcher: "/((?!api|trpc|_next|_vercel|.*\\..*).*)",
};

[amannn]

Support for cacheComponents is discussed here: #1493