Next.js Discord

Discord Forum

How do I get the current locale in a server side component?

Answered
Taiwan Dog posted this in #help-forum
Open in Discord
Taiwan DogOP
I am using next-intl and appdir.
import { getAllPosts } from "@/lib/api";
import PostPreview from "@/components/PostPreview";
import { useTranslations } from "next-intl";

export default function Blog() {
    const t = useTranslations('blog');
    const lang = ; // en or ja

    const posts = getAllPosts(lang, ["title", "date", "excerpt", "coverImage", "slug"]);

    return (
        <div className="container mx-auto px-5">
            <main>
                <h1 className="text-center text-3xl">{t('all posts')}</h1>

                <div className="h-12"></div>

                <div className="grid md:grid-cols-2 grid-cols-1 lg:gap-32 gap-8">
                    {posts.map((post) => (
                        <div key={post.title}>
                            <PostPreview post={post} />
                        </div>
                    ))}
                </div>
            </main>
        </div>
    );
}
Answered by Mossyrose gall wasp
hello, can you try this one https://github.com/amannn/next-intl/discussions/368
View full answer

19 Replies

Original message was deleted
riský
That is client side, OP wants server side
@riský That is client side, OP wants server side
Mossyrose gall wasp
oh my bad 😦
riský
Yeah I just wanted to not cause confusion for OP, it's fine for you to suggest, just make sure you say that it client only
Mossyrose gall wasp
import { getLocale } from "next-intl/server";

export default function Home() {
  const locale = getLocale();
  console.log("inside server", locale);
  return (
    <main>
      <div>{locale}</div>
    </main>
  );
}

does this work i just found this from stackoverflow @riský
riský
Umm I havent ever used next intl, so I can't verify it
thanks though
Mossyrose gall wasp
hello, can you try this one https://github.com/amannn/next-intl/discussions/368
Answer
import { getAllPosts } from "@/lib/api";
import PostPreview from "@/components/PostPreview";
import Negotiator from 'negotiator';
import { match } from '@formatjs/intl-localematcher';

export default function Blog() {
    const locales = ['en', 'ja'];
    const defaultLocale = 'en';
    let locale: string;
    const languages = new Negotiator({
        headers: {
            'accept-language': requestHeaders.get('accept-language') || undefined
        }
    }).languages(); 

    try {
        locale = match(languages, locales, defaultLocale);
    } catch {
        locale = defaultLocale;
    }

    const posts = getAllPosts(locale, ["title", "date", "excerpt", "coverImage", "slug"]);

    return (
        <div className="container mx-auto px-5">
            <main>
                <h1 className="text-center text-3xl">{locale === 'ja' ? 'すべての投稿' : 'All posts'}</h1>

                <div className="h-12"></div>

                <div className="grid md:grid-cols-2 grid-cols-1 lg:gap-32 gap-8">
                    {posts.map((post) => (
                        <div key={post.title}>
                            <PostPreview post={post} />
                        </div>
                    ))}
                </div>
            </main>
        </div>
    );
}
i'm assuming this could all be done with router.locale if i am on pages dir
@Taiwan Dog i'm assuming this could all be done with `router.locale` if i am on pages dir
Mossyrose gall wasp
yes, in app router localization a bit painfull
Taiwan DogOP
i see
so its just
    const pathname = request.nextUrl.pathname;
    const locale = pathname.split('/')[1];
    let currentLocale = 'en';
    if (locale && locale.includes('ja')) {
        currentLocale = 'ja';
    }
    response.headers.set('x-current-locale', currentLocale);

and in server component something like this?
    const headersList = headers();

    const locale: string = headersList.get('x-current-locale') || 'en';
finally worked thank you so much
Mossyrose gall wasp
happy to help you are welcome
Pixiebob
I am using Lingui but I also set a custom request header. According to the document this opts-out from caching, see https://nextjs.org/docs/app/building-your-application/caching#apis. Still looking for a better way to pass request based data to server components without loosing static caching. The added response header gets passed to clients which is not used there.