How to make translations working in both server and client components without URL params using browserlanguage in next Js 13 with app directory

Question

I am trying to use react-intl for this but not sure how to set up my middleware to detect the browser language and set the translations of pages according to it insted of using dynamic url for translating my page

TranslationProvider.tsx

"use client";

import {useLocale} from 'next-intl';
import { IntlProvider } from 'react-intl'
import Danish from '../../lang/da.json'
import English from '../../lang/en.json'

function TranslationProviders({ children }: { children: React.ReactNode }) {



   const  locale = typeof window !== 'undefined' ? navigator.language : 'en';
    let lang;
  
    if(locale === 'da'){
      lang=Danish
    }
    else{
      lang=English
    }
   
    
    return (
        <IntlProvider locale={locale} messages={English}>
         {children}
       </IntlProvider>
      
    )
  }
  
  export default TranslationProviders;

i18n.ts

import {getRequestConfig} from 'next-intl/server';
 
export default getRequestConfig(async ({locale}) => ({
  messages: (await import(`./lang/${locale}.json`)).default
}));

next.config.js

/** @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'
  );

  module.exports = withNextIntl({
    // Other Next.js configuration ...
    experimental: {appDir: true}
  });

layout.tsx in app directory

import Navbar from '@/components/Navbar/Navbar'
import Zidebar from '@/components/Sidebar/Zidebar'
import {useLocale} from 'next-intl';
import Providers from '@/components/Provider'
import TranslationProviders from '../components/TranslationProvider'


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

export const metadata = {
  title: 'Quickview',
  description: 'Quickview app',
}

type Props = {
  children: React.ReactNode;
 
};

export default async function RootLayout({children}: Props) {
  // const cookieStore = cookies()
  // const lang = cookieStore.get('LOCALE')

  // const t = await getTranslation(lang?.value ?? 'en-US') // en
  //const [showSidebar, setShowSidebar] = useState()
  const  locale = typeof window !== 'undefined' ? navigator.language : 'en';

  return (
    <html lang={locale}>
      <body className={inter.className}>
       <TranslationProviders>
        <Providers>
          <div className="flex gap-1">
            {/* <Sidebar /> */}
            <Zidebar />
            <div className="w-full flex-1">
              {/* @ts-expect-error Async Server Component */}
              <Navbar />
              {children}
            </div>
          </div>
        </Providers>
        </TranslationProviders>
        
      </body>
    </html>
  )
}

Page.tsx (server page)

import { store } from '@/store'
import { setBuildingData } from '@/store/buildingSlice'
import { setEnergyData } from '@/store/energySlice'
import Mapbox from '@/components/map/Map'
import Preloader from '@/components/Preloader'
import Providers from '@/components/Provider'
// import {FormattedMessage} from "react-intl"
import {useTranslations} from 'next-intl';

export default async function Home() {
  const buildingAPIUrl = process.env.BUILDINGS_ENDPOINT as string
  // const energyAPIUrl = process.env.ENERGY_ENDPOINT as string
  const fetchBuildingsApi = await fetch(buildingAPIUrl, { next: { revalidate: 4000 } })
  // const fetchEnergyApi = await fetch(energyAPIUrl,{next:{revalidate:3600}})
  // const energyData = await fetchEnergyApi.json()
  const buildingData = await fetchBuildingsApi.json()
  store.dispatch(setBuildingData(buildingData))
  // store.dispatch(setEnergyData(energyData))

  const t = useTranslations()

  return ( 
    <main>
      <Preloader buildings={buildingData} />
      <Providers>
        <h1>{t('key1')}</h1>
        <Mapbox />
      </Providers>
    </main>
   
  )
}

I tried searchin everwhere how to make use of detecting the browser language and make use of that to set the locale and translate the page via it and also to provide a select button afterwards to change the locale from it as well

How to make translations working in both server and client components without URL params using browserlanguage in next Js 13 with app directory

0 Answers0