Is it possible to avoid route prefixing?

[rawnly]

Awesome project!

In our company project, we're currently using next-18next and we're not using path prefixing.
I'd like know if it's possible to avoid creating the app/[locale]/... folder and provide a custom configuration (like a cookie or something similar)

[amannn]

Hello @rawnly and thank you for the kind words!

The [locale] folder is necessary to have the locale available as a URL segment internally. However, the URL that is displayed to the user is separate from this.

Did you have a look at the middleware docs? The default locale works without a locale prefix. If you have multiple domains with different default locales, you don't need to display the prefix anywhere. Potentially, you can even change the default locale based on the incoming request as mentioned in the composing middlewares docs.

Hope this helps!

[amannn]

Update: @boris-arkenaar is working on a new option for the middleware to avoid route prefixing: #388

[0-don]

its still not clear how to do it without the prefix it would be nice just to be able to decide which language user wants based on cookie alone

[SaizFerri]

@amannn Is there a possibility to include an example of composing middlewares to avoid locale segment in the docs? I believe for SaaS apps where the user is mainly in a dashboard it does not make sense to have locale segments and just a cookie or header would be enough. Thanks in advance!

[amannn]

Interesting question! For apps behind a login, the locale segment might indeed not be necessary and relying on the cookie is sufficient.

I haven't run this code, but I could imagine that something like this would work:

import createIntlMiddleware from 'next-intl/middleware';
import {NextRequest} from 'next/server';
 
export default async function middleware(request: NextRequest) {
  const locale = request.cookies.get('NEXT_LOCALE')?.value || 'en';
 
  const handleI18nRouting = createIntlMiddleware({
    locales: ['en', 'de'],
    defaultLocale: locale
  });

  return handleI18nRouting(request);
}
 
export const config = {
  // Skip all paths that should not be internationalized
  matcher: ['/((?!_next|.*\\..*).*)']
};

[SaizFerri]

Thanks! Indeed I arrived at a similar solution in my latest post here. There are some things missing, like handling locale change or really persisting the locale, but works overall.

[amannn]

See also #265 (reply in thread)

[SaizFerri]

I think I got something. The middleware.ts would look like this, when using in combination with next-auth.

import { withAuth } from 'next-auth/middleware';
import createIntlMiddleware from 'next-intl/middleware';
import { cookies } from 'next/headers';
import { NextRequest } from 'next/server';

import { Routes } from '@/const/routes';

const locales = ['en', 'de'];
const publicPages = [Routes.SIGNIN, Routes.SIGNUP];

// We could also pass a locale from the authorized token that is saved in the preferences of the user in the DB
const handleIntlMiddleware = (req: NextRequest) => {
  let defaultLocale = req.cookies.get('NEXT_LOCALE')?.value || 'de';

  // This is useful to change the locale
  if (req.nextUrl.pathname.startsWith('/en')) {
    defaultLocale = 'en';
  }

  if (req.nextUrl.pathname.startsWith('/de')) {
    defaultLocale = 'de';
  }

  // Step 2: Create and call the next-intl middleware
  const handleI18nRouting = createIntlMiddleware({
    locales,
    defaultLocale,
  });

  const response = handleI18nRouting(req);

  // Step 3: Alter the response
  response.cookies.set('NEXT_LOCALE', defaultLocale);

  return response;
};

const authMiddleware = withAuth(
  // Note that this callback is only invoked if
  // the `authorized` callback has returned `true`
  // and not for pages listed in `pages`.
  function onSuccess(req) {
    return handleIntlMiddleware(req);
  },
  {
    callbacks: {
      authorized: ({ token }) => token !== null,
    },
    pages: {
      signIn: Routes.SIGNIN,
    },
  },
);

export default function middleware(req: NextRequest) {
  const publicPathnameRegex = RegExp(
    `^(/(${locales.join('|')}))?(${publicPages.join('|')})?/?$`,
    'i',
  );
  const isPublicPage = publicPathnameRegex.test(req.nextUrl.pathname);

  if (isPublicPage) {
    return handleIntlMiddleware(req);
  } else {
    return (authMiddleware as any)(req);
  }
}

export const config = {
  // Skip all paths that should not be internationalized
  matcher: ['/((?!api|_next|.*\\..*).*)'],
};

Then to change the locale you just need a <a /> that links to the path prefix of the locale you want, for example, to change to german it would be like this:

<a href="/de">
      Change to german
</a>

Only issue is, for it to apply everywhere, you need to force a reload with a normal anchor tag which is maybe not that nice as you will lose all the state in the current page. Maybe there is a better way to change the locale with soft navigation @amannn ?