I18n for slices

Developing with Prismic
1

I'm implementing internationalization (i18n) for my website, using this guide from Prismic as a reference. It's mostly working, but I’m having trouble with some slices—particularly those that use content relationships or fetch data from custom types (in the slices folder). I’m not sure how to pass the lang parameter in the request properly.

Here’s an example: I created a page and add slice (app slice - get all apps custom types)

const client = createClient();

const graphQuery = `{
  app {
    appName
    appDesc
    backgroundImage
    link
    tagApps {
      tagApp {
        ...on tag_app {
          tagNameApp
          description
          color
        }
      }
    }
  }
}`

const appsData = await client.getAllByType('app', {
  graphQuery,
  lang,
  orderings: [{ field: 'document.first_publication_date', direction: 'desc' }],
  limit: Number(slice.primary.numOfDisplay || 0)
});

In the example above, it works when I pass the lang value—but I’m not sure how to access or pass the lang value in the slice component.

Here’s my slice component code:

import { FC } from 'react';
import { Content } from '@prismicio/client';
import { SliceComponentProps } from '@prismicio/react';
import AppsDefault from './Default';
import AllApps from './AllApps';

/**
 * Props for `App`.
 */
export type AppProps = SliceComponentProps<Content.AppSlice>;

/**
 * Component for "App" Slices.
 */
const App: FC<AppProps> = ({ slice }) => {
  return (
    <section data-slice-type={slice.slice_type} data-slice-variation={slice.variation}>
      {slice.variation === 'default' && slice.primary.isDisplayWidget && (
        <AppsDefault slice={slice} />
      )}
      {slice.variation === 'allApps' && slice.primary.isDisplayWidget && <AllApps />}
    </section>
  );
};

export default App;

Let me know if you’d like help figuring out how to get and pass the lang value inside my slice components.

Thanks for your help.

PS: I think I need add a field select language option in each slices get data from custom types, but it not good. In prismic admin dashboard, if locales eng -> add slices -> auto detect lang eng... the same logic for many lang.

2

I find solution:

Custom middleware set headerNameLang. After that, create func support server component like

import { headers } from 'next/headers'
import { getTranslation } from './translations'
import { headerName } from './settings'

export async function getT(ns?: string) {
  const headersList = headers()
  const lng = (await headersList).get(headerName) || 'vi'

  return {
    t: (key: string, ...args: any[]) => getTranslation(lng, key, ...args),
    lng
  }
}

import getT im slices component get data

const App: FC<AppProps> = async ({ slice }) => {
  const { lng } = await getT()

  return (
    <section data-slice-type={slice.slice_type} data-slice-variation={slice.variation}>
      {slice.variation === 'default' && slice.primary.isDisplayWidget && (
        <AppsDefault slice={slice} lang={lng} />
      )}
      {slice.variation === 'allApps' && slice.primary.isDisplayWidget && <AllApps lang={lng} />}
    </section>
  )
}

export default App

pass lang into your graphquery -> done.

1 Like