Getting hydration error using global variants for localization?

Developer Support
10

Here are some snippets that may help, based on the preview link as example:

next.config.js

const nextConfig = {
  reactStrictMode: false,
  i18n: {
    locales: ["es", "fr"], // This are all the localtes that you want to support
    defaultLocale: "fr", // The locale to be default
  },
};

[[..catchall]].tsx

import * as React from "react";
import {
  PlasmicComponent,
  extractPlasmicQueryData,
  ComponentRenderData,
  PlasmicRootProvider,
} from "@plasmicapp/loader-nextjs";
import type { GetStaticPaths, GetStaticProps } from "next";

import Error from "next/error";
import { useRouter } from "next/router";
import { PLASMIC } from "../plasmic-init";

export default function PlasmicLoaderPage(props: {
  plasmicData?: ComponentRenderData;
  queryCache?: Record<string, any>;
}) {
  const { plasmicData, queryCache } = props;
  const router = useRouter();
  const locale = router.locale ?? ""; // use the locale from the router
  if (!plasmicData || plasmicData.entryCompMetas.length === 0) {
    return <Error statusCode={404} />;
  }
  const pageMeta = plasmicData.entryCompMetas[0];
  return (
    <PlasmicRootProvider
      loader={PLASMIC}
      prefetchedData={plasmicData}
      prefetchedQueryData={queryCache}
      pageParams={pageMeta.params}
      pageQuery={router.query}
      globalVariants={[
        {
          name: "Locale",
          value: locale, // we passe the locale to the global variant
        },
      ]}
    >
      <PlasmicComponent component={pageMeta.displayName} />
    </PlasmicRootProvider>
  );
}

export const getStaticProps: GetStaticProps = async (context) => {
  const { catchall } = context.params ?? {};
  const locale = context.locale ?? ""; // Get the locale from the getStaticProps context
  const plasmicPath =
    typeof catchall === "string"
      ? catchall
      : Array.isArray(catchall)
      ? `/${catchall.join("/")}`
      : "/";
  const plasmicData = await PLASMIC.maybeFetchComponentData(plasmicPath);
  if (!plasmicData) {
    // non-Plasmic catch-all
    return { props: {} };
  }
  const pageMeta = plasmicData.entryCompMetas[0];
  // Cache the necessary data fetched for the page
  const queryCache = await extractPlasmicQueryData(
    <PlasmicRootProvider
      loader={PLASMIC}
      prefetchedData={plasmicData}
      pageParams={pageMeta.params}
      globalVariants={[
        {
          name: "Locale",
          value: locale,
        },
      ]}
    >
      <PlasmicComponent component={pageMeta.displayName} />
    </PlasmicRootProvider>
  );
  // Use revalidate if you want incremental static regeneration
  return { props: { plasmicData, queryCache }, revalidate: 60 };
};

export const getStaticPaths: GetStaticPaths = async () => {
  const pageModules = await PLASMIC.fetchPages();
  return {
    /**
     * Here we iterate over all the pages and generate the paths for each locale.
     * This way you can access pages in different locales, using
     *
     * /es/home
     * /fr/home
     *
     * The routes without the locale will redirect to the default locale
     * that is set in the next.config.js
     *
     * In this example, /home would have locale="fr"
     */
    paths: ["es", "fr"].flatMap((locale) => {
      return pageModules.map((mod) => ({
        params: {
          catchall: mod.path.substring(1).split("/"),
        },
        locale,
      }));
    }),
    fallback: "blocking",
  };
};

So with that in development mode you could use /fr/home to see your home page in French and /es/home to see it in Spanish, to enable it in production it depends on how your application is deployed, but you can essentially map your domain based in a locale to your-application/locale and that will be handled, let me know if this is one feasible approach for you guys ? In the link that I sent before there is a configuration for domains that may help too. We will improve our docs on localization so that this is more clear.

This is a good read too https://nextjs.org/docs/advanced-features/i18n-routing#dynamic-routes-and-getstaticprops-pages

1 Like