Next.js multi-lang best practice for a page that aggregates all the pages under one content type

Developing with Prismic
1

Hi Community,

I wonder what would be the best practice if I want to set up multi-lang for a page that aggregates all the pages under one content type. For example:

  1. My site is in both English and French.
  2. I have a content type called Product
  3. I have a page Products.js (localhost:3000/products/), which shows all the products mapping through getAllByType.

const products = await client.getAllByType("product", { lang: locale });

Because I don't have an actual page in the backend called "Products", I can't create a page in French for Products.

I guess I could create a products.js in the codebase: /fr-fr/produits.js? What would be the best practice in this case?

3

Hello @motmotstudiostudio

You can use a slug in dynamic routes for handling the locale, something like /pages/[locale]/products.

In products.js, you can retrieve the slug locale value and pass it to the Prismic query.

Reference:

On Prismic side, you need to create the pages in each locale to get the results from the query at the front end. For example, You will need to create the pages of Product type in both English and French locale.

Reference: Locales - Documentation - Prismic

Let me know if you have any further questions.

Thanks,
Priyanka

1 Like
4

Thank you so much for the prompt reply. I am very new to next.js + prismic. I've got the dynamic routing works for individual product pages. Wondering how should I approach the products.js page?

For instance, this is my code for products.js, however, this page does not show the language switcher (which is in the Header.js component).

import Head from "next/head";
import * as prismicH from "@prismicio/helpers";

import { createClient } from "../prismicio";
import { Layout } from "../components/Layout";

const Pro = ({ products, navigation, settings }) => {
  return (
    <Layout
      alternateLanguages={products.alternate_languages}
      navigation={navigation}
      settings={settings}
    >
       <Head>
        <title>All products - {settings.data.fullname}</title>
      </Head>   
        <ul>
          {products.map((product) => (
            <li>
              <PrismicLink
                href={`products/${product.uid}`}
              >
                 {product.data.title}
              </PrismicLink>
          </li>
          ))}
        </ul>
    </Layout>
  );
};

export default Pro;

export async function getStaticProps({ locale, previewData }) {
  const client = createClient({ previewData });
  const products = await client.getAllByType("product",  {lang: locale });
  const navigation = await client.getSingle("navigation", { lang: locale });
  const settings = await client.getSingle("settings", { lang: locale });

  return {
    props: {
      products,
      navigation,
      settings,
    },
  };
}
5

Hello @motmotstudiostudio

Can you share your folder structure for the code?

Thanks,
Priyanka

6

Thank you for your help! Here is the folder structure. The language switcher is defined in the Header.js

Screen Shot 2023-05-11 at 10.43.29 AM
Screen Shot 2023-05-11 at 10.43.29 AM472×1284 59.8 KB

7

Hi @motmotstudiostudio

Its better to create pages like

/pages/en/products/[uid].tsx and /pages/fr/products/[uid].tsx in order to have localized pages for each locale and send different requests for each locale.

Give this a try, and let me know.

Thanks,
Priyanka