Locale "undefined" not found in locales (en, ru, uk), returning "notFound()" when use useCurrentLocale

ElGranTorino commented 7 months ago

Hello everyone! When using the useCurrentLocale hook on a client-side rendered Next.js page, an error occurs: `Locale "undefined" not found in locales (en, ru, uk), returning "notFound()". However, server-side rendering works as expected.

To Reproduce

Create a Next.js page with client-side rendering.
Use the useCurrentLocale hook in the page component.
```
// Next.js page component
'use client';
```

import { useCurrentLocale } from "@/locales/client";

export default function Test(){ const t = useCurrentLocale();

return (
    <>
        {t}
    </>
)

}


@/locales/client.ts content:

'use client';

import { createI18nClient } from 'next-international/client'

export const { useI18n, useChangeLocale, useScopedI18n, I18nProviderClient, useCurrentLocale, } = createI18nClient({ en: () => import('../locales/dictionaries/en'), ru: () => import('../locales/dictionaries/ru'), uk: () => import('../locales/dictionaries/uk'), })

middleware.ts content:

import { createI18nMiddleware } from 'next-international/middleware' import { NextRequest } from 'next/server'

const I18nMiddleware = createI18nMiddleware({ locales: ['en', 'uk', 'ru'], defaultLocale: 'en', })

export function middleware(request: NextRequest) { return I18nMiddleware(request); } export const config = { matcher: ['/((?!api|static|.\..|_next|favicon.ico|robots.txt).*)'], }


"next": "14.0.3",
"next-international": "^1.1.4",
![Screenshot from 2023-11-26 11-57-29](https://github.com/QuiiBz/next-international/assets/60102266/72402eb3-b9a6-41f1-9ca4-33619975fca6)

ElGranTorino commented 7 months ago

almost forgot. My layout.tsx:

import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import { Toaster } from '@/components/ui/toaster'
import { I18nProviderClient } from '@/locales/client'
import { getCurrentLocale } from '@/locales/server'

const inter = Inter({ subsets: ['latin'] })

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode,
}) {
  const locale = getCurrentLocale();
  return (
    <html>
      <body className={inter.className}>
        <I18nProviderClient locale={locale}>
          {children}
          <Toaster />
        </I18nProviderClient>
      </body>
    </html>
  )
}

ElGranTorino commented 7 months ago

and also if i use I18nClientContext, everything works fine as well:

'use client';

import { I18nClientContext, useCurrentLocale } from "@/locales/client";
import { useContext } from "react";

export default function Test(){
    const context = useContext(I18nClientContext);

    return (
        <>
            {context?.locale}
        </>
    )
}

QuiiBz commented 7 months ago

Could you share a reproduction? This is usually caused by a static file not being in the [locale] folder, or a wrong configuration of the middleware.

ElGranTorino commented 7 months ago

Yeah, my bad, I misspelled the [locale].

QuiiBz / next-international

Locale "undefined" not found in locales (en, ru, uk), returning "notFound()" when use useCurrentLocale #294