Adding a locale path to the URL

Developer Support
1

Hi team Plasmic,

Is there a way to add a locale path to your URL when you are managing locales with global variants?

For example, if the locale is EN (default), I want the base path to be /
But if the user switches the locale to some other language, I want the base path to be /[locale]

So for locales that isn’t EN, the paths would be something like this:

/[locale]/about
/[locale]/works/:slug

something like that.

My project URL is Plasmic

I’m trying to set up my site like so, but I can not figure out how to do it or if its even possible.

image
image1920×1565 107 KB

Thank you in advance.

2

Hey @kaai,

This is currently not possible with Plasmic Hosting.
But if you’re using loader-nextjs, you can add locales through the nextjs configuration Routing: Internationalization | Next.js

You might also need to pass a CustomLink component to our PlasmicRootProvider that you can configure as you please.


import Link from "next/link";

const CustomLink = React.forwardRef(function CustomLink(
  props: React.ComponentProps<typeof Link>,
  ref: React.Ref<HTMLAnchorElement>
) {
  if (props.href) {
    const {
      href,
      replace,
      scroll,
      shallow,
      passHref,
      prefetch,
      locale,
      ...rest
    } = props;
    const isFragment = typeof href === "string" && href.startsWith("#");
    return (
      <Link
        href={href}
        replace={replace}
        scroll={scroll != null ? scroll : isFragment ? false : undefined}
        shallow={shallow}
        passHref={passHref}
        prefetch={prefetch}
        locale={locale}
        {...({ legacyBehavior: true } as any)}
      >
        <a {...rest} ref={ref} />
      </Link>
    );
  } else {
    return <a {...props} href={undefined} ref={ref} />;
  }
});

After setting the locale, you will need to change the functions inside your catchall page to use the locale as the global variant value in both the PlasmicLoaderPage and getStaticProps function.

Example:

  const locale = context.locale ?? "";

  // Cache the necessary data fetched for the page
  const queryCache = await extractPlasmicQueryData(
    <PlasmicRootProvider
      loader={PLASMIC}
      prefetchedData={plasmicData}
      pageRoute={pageMeta.path}
      pageParams={pageMeta.params}
      globalVariants={[{ name: 'Locale', value: locale }]}
      Link={CustomLink}
    >
      <PlasmicComponent component={pageMeta.displayName} />
    </PlasmicRootProvider>
  );
1 Like
3

Hi @icaro_guerra , thank you!