Internationalization implementation with Next JS (13.5.6) & typescript

Developing with Prismic
,
13

Hey Micha! So glad you enjoyed the course!

I think the easiest way to get the lang to your Testimonials slice would be to use the context prop on the SliceZone component.

I'm assuming you've changed your page to match this file: nextjs-starter-prismic-multi-language/src/app/[lang]/page.js at adbba0fd6d1c01e958d9ed2ce2bbbff844245633 · prismicio-community/nextjs-starter-prismic-multi-language · GitHub
As well as added the middleware and whatever else the multi-lang starter has, as you said you got it working. (Awesome job btw!)

Now you need to add lang to the SliceZone. I'm copying the code from the multi-page starter:

export default async function Page({ params: { lang } }) {
  const client = createClient();

  const page = await client.getByUID("page", "home", { lang });
  const navigation = await client.getSingle("navigation", { lang });
  const settings = await client.getSingle("settings", { lang });

  const locales = await getLocales(page, client);

  return (
    <Layout locales={locales} navigation={navigation} settings={settings}>
      <SliceZone slices={page.data.slices} components={components} context={{ lang: lang }} />
    </Layout>
  );
}

Just pay attention to the context={{lang: lang }} bit on the slice zone, you should be able to keep your page component the same beyond that! Also add this to any other SliceZones your project might have, if that applies.

So then your Testimonials component would look more like this:

const Testimonials =  async ({ slice, lang }: TestimonialsProps): Promise<JSX.Element> => {

  const client = createClient();
  // Now getting lang from the page as a prop
  const testimonials = await Promise.all(
      slice.items.map((item) =>{
        if(
            isFilled.contentRelationship(item.testimonial) && item.testimonial.uid
        ){
          return client.getByUID("testimonial",item.testimonial.uid, { lang })
        }
      } )
  )

  return ();

};

export default Testimonials;

Let me know if that works or if you have other questions!

Alex