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

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

{{title}}

Replies: 1 comment

{{title}}

Select a reply

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

MHMDHIDR Nov 10, 2024

Replies: 1 comment

MHMDHIDR Nov 11, 2024 Author

MHMDHIDR
Nov 10, 2024

MHMDHIDR
Nov 11, 2024
Author