Next.js Discord

Discord Forum

next-intl with dynamic metadata

Answered
Yellow Crazy Ant posted this in #help-forum
Open in Discord
Yellow Crazy AntOP
can't make that work on build, i got many errors. Pls help me :thinq:
Answered by luis_llanes
If you wanna type the params it should be

{ params } : { params : Promise<{locale:string}> }
View full answer

15 Replies

Yellow Crazy AntOP
 import { Metadata } from 'next';
import { useTranslations } from 'next-intl';

const t = useTranslations('Metadata');

export const metadata: Metadata = {
  title: {t('title')},
  keywords: {t('keywords')},
  description: {t('description')},
  openGraph: {
    type: 'website',
    url: '',
    title: 'Ghosts Design',
    description: 'Ghosts Design',
    images: [
      {
        url: '',
        width: 1200,
        height: 630,
        alt: 'Ghosts Design',
      },
    ],
  },
};

export default async function LocalLayout({
    children,
  }: {
    children: React.ReactNode;
  }) {

    return <>{children}</>
}
i want to use the translations from next-intl to make the metadata for my homepage
luis_llanes
You can’t use or even import hooks in server components.

Since you can only use the Metadata API in server components you’re effectively trying to use client side features in a server component and it’ll break
Also, export const Metadata() is not dynamic, if you want to dynamically change what the metadata api contains you need the function implementation version “ export async function generateMetadata()” which receives the params as prop so you could pull the “lang” params from there and dynamically get the metadata yourself
Yellow Crazy AntOP
so for the metadata like that i have to use <Head> component in page.tsx?
luis_llanes
Not really, you can receive params in the generateMetadata function as parameters
And you can do whatever you want with it

Inside the async generateMetadata({params}) function:
const { lang } = await params;
Then you can get dynamically the metadata for the lang, even generate both
Yellow Crazy AntOP
i think i fixed with this
import Navbar from '@/components/Navbar';
import {getTranslations} from 'next-intl/server';
 
export async function generateMetadata({params: {locale}}: any) {
  const t = await getTranslations({locale, namespace: 'MetadataHome'});
 
  return {
    title: t('title')
  };
}


export default function Home() {
  return (
    <>
    <Navbar/>
    </>
  );
}
found that in the next-intl docs
luis_llanes
If you wanna type the params it should be

{ params } : { params : Promise<{locale:string}> }
Answer
@luis_llanes If you wanna type the params it should be { params } : { params : Promise<{locale:string}> }
luis_llanes
In Next.js 15 params are async and are a promise now, they need to be awaited
Yellow Crazy AntOP
ok ill try
tysm
luis_llanes
Sure, let me know if that works!
I have never really worked with intl lol but I understand how Next.js APIs work