Setting Up Multilingual Pages with Astro and Prismic

Developing with Prismic
,
1

Hi everyone,

I’m working on a multilingual website using Astro and Prismic, but I’m stuck on how to properly set up getStaticPaths and fetch the content for each page. Here’s what I’m trying to figure out:

  1. getStaticPaths: How can I dynamically generate paths for all languages and pages based on content in Prismic?
  2. Fetching Content: What’s the best way to fetch the content for each page (e.g., home, about, blog posts) while accounting for different languages?

Any insights, tips, or example code would be super helpful!

3

Hi there,

Welcome to the community :slight_smile:

Let’s break it down step by step:

  1. getStaticPaths: Generating Dynamic Paths

To dynamically generate paths for all languages and pages, you can use Prismic’s REST API to fetch all the documents and their associated languages. Here’s an example:

import { createClient } from '@prismicio/client';

export async function getStaticPaths() {
  const client = createClient();
  const documents = await client.getAll(); // Fetch all documents
  
  const paths = documents.map(doc => ({
    params: {
      uid: doc.uid,
    },
    locale: doc.lang, // Use Prismic's `lang` field for locales
  }));
  
  return { paths, fallback: false };
}
  • Ensure your documents in Prismic have the lang field populated.
  • Use the locale key in Astro to support multiple languages.
  1. Fetching Content per Page

For fetching localized content, you can filter by uid and lang to retrieve the correct page data. Here’s an example:

import { createClient } from '@prismicio/client';

export async function get({ params, locale }) {
  const client = createClient();
  
  const document = await client.getByUID('page', params.uid, {
    lang: locale, // Fetch content in the current locale
  });

  if (!document) {
    return { status: 404 };
  }
  
  return {
    props: {
      document,
    },
  };
}

Additional Tips

  • Default Language Handling: Use fallbacks in your routes for missing translations (e.g., fallback to a default language like en-us if content isn’t translated).
  • Homepage: Consider hardcoding your homepage route (e.g., /) or adding logic to redirect to /en or /fr based on user preferences.
  • Prismic Configurations: Double-check your custom type definitions to ensure proper localization support.
  • Astro Integration: If you use Astro’s astro-i18next or similar plugins, integrate those with your locale logic.