reactjs - next-intl känner inte igen standardlocale

När jag testade next-intl för appkatalogen stötte jag på ett problem där standardlokalen inte verkar kännas igen. Jag provade också klientversionssidan tidigare och hade stora problem trots att jag följde dokumentationen exakt för varje steg.

För tydlighetens skull använder jag Next.js v13.4.0 och [email Jag har ställt in tyska och engelska som lokaler och engelska som standard. På tyska fungerar det bra men jag kunde inte byta över till engelska. Det ger felet NEXT_NOT_FOUND vilket indikerar att denna lokal inte existerar.

next.config
/** @type {import('next').NextConfig} */

const withNextIntl = require('next-intl/plugin')(
  // This is the default (also the `src` folder is supported out of the box)
  './i18n.ts'
);

const nextConfig = {
  experimental: {
    appDir: true,
  }
}

module.exports = withNextIntl(nextConfig);


middleware.ts
import createMiddleware from 'next-intl/middleware';
 
export default createMiddleware({
  // A list of all locales that are supported
  locales: ['en', 'de'],
  defaultLocale: 'en',
});
 
export const config = {
  matcher: ['/((?!api|_next|.*\\..*).*)']
};

LangSwitch.tsx Lokaler bör ändras här. Denna komponent är en del av navigeringsfältet

import Link from 'next-intl/link';

export default function LangSwitch() {
    return (
        <div className='flex flex-col'>
            LANG SWITCH
            <Link href="/" locale="en" className='font-bold m-1'>
                ENG
            </Link>
            <Link href="/" locale="de" className='font-bold m-1'>
                DEU
            </Link>
        </div>
    )
};

Som nämnt fungerar navigeringsfältet bra, det är bara att byta språkversion som inte fungerar. Jag hade samma problem med klientversionen också. Sättet jag byggde LangSwitch på är exakt som dokumentationen säger att det ska fungera. Så för närvarande har jag ingen aning om vad lösningen kan vara.

Jag försökte byta version av next.js och även versionen av next-intl. Varje gång uppstod liknande problem. Jag raderade också node_modules och package-lock.json för att se om det kunde hjälpa.

Svar #1

Det verkar som om next-intl hamnar i en oändlig omdirigeringsloop när den försöker återgå till standardlokalen med hjälp av next-intl/link. Det ser ut som om den returnerar en omdirigeringsrespons med ingen plats att omdirigera till.

En tillfällig lösning jag hittade är att ge det någonstans att omdirigera till genom att komponera mellanprogrammet och sedan lägga till en Location-header efter att svaret har ställts in:

  if (pathname.startsWith('/en')) {
    const { host, protocol } = request.nextUrl;
    response.headers.set('Location', `${protocol}//${host}`);
  }

Redigera: Jag testade den senaste releasekandidaten (3.0.0-rc.10) och det verkar som att detta problem har blivit fixat 🤞

Relaterade artiklar