General Translation  
Next.js

Helper functions

Because of recent changes to Next.js which make getting headers asynchronous, getLocale() must be an asynchronous function.

Server-side helpers

getLocale()

getLocale() is an asynchronous function which retrieves the user's current language as an ISO-639 language code.

import { getLocale } from 'gt-next/server'
 
export default async function MyComponent() {
    const locale = await getLocale(); // gets the user's language, e.g. 'en' for English
    return (
        <div>
            {locale}
        </div>
    )
}

getDefaultLocale()

getDefaultLocale() is a synchronous function which retrieves your application's default language as an ISO-639 language code.

import { getDefaultLocale } from 'gt-next/server'
 
export default function MyComponent() {
    const defaultLocale = getDefaultLocale(); // gets the app default language, e.g. 'en' for an app originally in English
    return ( 
        <div>
            {defaultLocale}
        </div>
    )
}

Client-side helpers

If you want to access the user's locale on the client, you can import the useLocale() from gt-next/client. To access the app's default locale, use useDefaultLocale(). useLocale() and useDefaultLocale() are client-side React hooks. They will throw errors if used in a server component or outside of a <GTProvider>.

useLocale()

'use client'
 
import { useLocale } from 'gt-next/client'
 
export default function MyComponent() {
    const locale = useLocale(); // gets the user's language, e.g. 'en' for English
    return (
        <div>
            {locale}
        </div>
    )
}

useDefaultLocale()

'use client'
 
import { useDefaultLocale } from 'gt-next/client'
 
export default function MyComponent() {
    const defaultLocale = useDefaultLocale(); // gets the user's language, e.g. 'en' for English
    return (
        <div>
            {defaultLocale}
        </div>
    )
}

On this page