How to set the locale after sign in, using user configs in NextJS 15 #1530

MHMDHIDR · 2024-11-10T17:31:18Z

MHMDHIDR
Nov 10, 2024

So I'm using NextJS "15.0.2", and this is my project structure:-

└── my-project
    └── messages
        └── ar.json
        └── en.json
    └── public
        └── images
            └── logo.svg
    └── src
        └── actions
            └── auth
                └── auth.ts
        └── app
            └── api
                └── [...nextauth]
                    └── route.ts
            └── auth
                └── signin
                    └── page.tsx
            └── dashboard
                └── account
                    └── page.tsx
                └── layout.tsx
                └── page.tsx
            └── globals.css
            └── layout.tsx
            └── not-found.tsx
            └── page.tsx
        └── components
            └── ui
                └── ...ui-components-files.tsx
        └── db
            └── index.ts
            └── schema.ts
        └── i18n
            └── request.ts
            └── routing.ts
        └── providers
            └── auth-provider.tsx
            └── index.tsx
        └── types
            └── auth.d.ts
            └── next-intl.d.ts
        └── auth.ts
        └── env.ts
    └── .env
    └── .gitignore
    └── components.json
    └── drizzle.config.ts
    └── next-env.d.ts
    └── next.config.ts
    └── package.json
    └── tailwind.config.ts
    └── tsconfig.json

I want the ability to set the locale (apply the configuration of user selected locale from the database into the layout.tsx), what I mean by that is right at the moment when the user is loggedIn, I want to allow to get the locale and apply it in the (UI) immediately, I have my project setup correctly following the docs, but at the moment in my current setup, after I sign in, the user will need to hard-reload for their selected locale (from the database) to be applied!

These is my configurations:-

1. src/i18n/request.ts

import { getLocale, getRequestConfig } from 'next-intl/server'
import { getUserLanguage } from '@/actions/users/user-language'
import { routing } from '@/i18n/routing'

export type Locale = (typeof routing.locales)[number]

export default getRequestConfig(async () => {
  const language = await getUserLanguage() // this get [ "ar" | "en" from the database ]
  let locale = language ?? (await getLocale())

  if (!locale || !routing.locales.includes(locale as Locale)) {
    locale = routing.defaultLocale
  }

  return { locale, messages: (await import(`@/../messages/${locale ?? 'en'}.json`)).default }
})

2. src/i18n/routing.ts

import { createNavigation } from 'next-intl/navigation'
import { defineRouting } from 'next-intl/routing'

export const locales = ['en', 'ar'] as const

export const routing = defineRouting({ locales, defaultLocale: 'en', localePrefix: 'never' })

export const { Link, redirect, usePathname, useRouter } = createNavigation(routing)

3. src/app/layout.tsx

import { Analytics } from '@vercel/analytics/react'
import { NextIntlClientProvider } from 'next-intl'
import { getLocale, getMessages } from 'next-intl/server'
import { getUserLanguage } from '@/actions/users/user-language'
import { Providers } from '@/providers'
import './globals.css'

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  const language = await getUserLanguage() // this get [ "ar" | "en" from the database ]
  const locale = language ?? (await getLocale())
  const messages = await getMessages({ locale })

  return (
    <html lang={locale} dir={locale === 'en' ? 'ltr' : 'rtl'} suppressHydrationWarning>
      <head>...</head>
      <body className='min-h-screen bg-background' suppressHydrationWarning>
        <NextIntlClientProvider messages={messages} locale={locale}>
          <Providers>
            {children}
            <Analytics />
          </Providers>
        </NextIntlClientProvider>
      </body>
    </html>
  )
}

The > src/app/layout.tsx works when the user signs in, and it does apply the correct lang={} and dir={} in here correctly:-
<html lang={locale} dir={locale === 'en' ? 'ltr' : 'rtl'}>...

But I'm not sure why or HOW I'm suppose to apply the locale in my app.

For more context of my project please checkout the repo:-

https://github.com/MHMDHIDR/crm

MHMDHIDR · 2024-11-11T00:37:23Z

MHMDHIDR
Nov 11, 2024
Author

@amannn

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

How to set the locale after sign in, using user configs in NextJS 15 #1530

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

How to set the locale after sign in, using user configs in NextJS 15 #1530

Uh oh!

MHMDHIDR Nov 10, 2024

Replies: 1 comment

Uh oh!

MHMDHIDR Nov 11, 2024 Author

MHMDHIDR
Nov 10, 2024

MHMDHIDR
Nov 11, 2024
Author