Prerequisites

The Gatsby Starter app already installed and working

Note: Live preview is not supported with the multi-lingual Gatsby app.

Enable Multilingual in your Gatsby Starter

Create a language/locale
In our example, we have two locales:
- master locale: en-us (English)
- Added locale: fr (French)
Localize all entries and publish them on the development environment for both locales.

Note: Also, translate those entries into French to differentiate the results.

App Changes

Follow the steps to configure the app for multi-lingual support:

Follow the steps below to create a file that maintains a list of locales.
1. Create a folder named Locales within the src folder.
2. Create a file named locales.ts within the Locales folder.
3. Copy and paste the below code to the file in the path:
  src/Locales/locales.ts
  Note: In our example, we have used English and French as our locales.
4. Code Snippet:
```
module.exports = {
  "en-us": {
    code: "en-us",
    locale: "English",
    defaultLocale: true,
  },
  "fr": {
    code: "fr",
    locale: "french",
  },
}
```

Copy and paste the below code to the gatsby-node.ts file to create pages programmatically.

Code Snippet:

const path = require("path")
const locales = require("./src/Locales/locales")

module.exports.createPages = async ({ graphql, actions }) =&gt; {
  const { createPage } = actions
  const blogPostTemplate = path.resolve("src/templates/blog-post.tsx")
  const pageTemplate = path.resolve("src/templates/page.tsx")
  const blogPageTemplate = path.resolve("src/templates/blog-page.tsx")
  const blogPostQuery = await graphql(`
    query {
      allContentstackBlogPost {
        nodes {
          title
          url
          locale
          publish_details {
            locale
          }
        }
      }
    }
  `);

  const pageQuery = await graphql(`
      query {
        allContentstackPage {
          nodes {
            title
            url
            locale
            publish_details {
              locale
            }
          }
        }
      }
  `);

  const createBlogPostTemplate = (route, componentToRender, title, data, locale) =&gt; {
    createPage({
      path: `${route}`,
      component: componentToRender,
      context: {
        title: title, 
        result: data,
        locale: locale
      },
    });
  };

  const createBlogPageTemplate = (route, componentToRender, title, data, locale) =&gt; {
    createPage({
      path: `${route}`,
      component: componentToRender,
      context: {
        title: title, 
        result: data,
        locale: locale
      },
    });
  };

  const createPageTemplate = (route, componentToRender, url, data, locale) =&gt; {
    createPage({
      path: `${route}`,
      component: componentToRender,
      context: {
        url: url,
        result: data,
        locale: locale
      },
    });
  };


/**
 * Blog page template for route: "/blog" and its locales
 */
  pageQuery.data.allContentstackPage.nodes.forEach(node =&gt; {
    const isDefault = locales[node.locale];
    const localeList = Object.values(locales)
      .filter(locale =&gt; !locale.defaultLocale)
      .map(locale =&gt; locale.code);

    if (node.url === "/blog") {
      if (isDefault.defaultLocale) {
        createBlogPageTemplate(node.url, blogPageTemplate, node.title, node,node.locale);
      } else {
        localeList.forEach(code =&gt; {
          const localeUrl = `/${code}${node.url}`;
          createBlogPageTemplate(localeUrl, blogPageTemplate, node.title, node,node.locale);
        });
      }
    }
  });

/**
 * Page template for route: "/", "/about-us" etc and its locales
 */
  pageQuery.data.allContentstackPage.nodes.forEach(node =&gt; {  
    const isDefault = locales[node.locale];
    const localeList = Object.values(locales)
    .filter(locale =&gt; !locale.defaultLocale)
    .map(locale =&gt; locale.code);
    if (node.url !== '/blog') {
      if (isDefault.defaultLocale) {
        createPageTemplate(`${node.url}`, pageTemplate, node.url, node, node.locale);
      } else {
        localeList.forEach(code =&gt; {
          const localeUrl = `/${code}${node.url}`;
          createPageTemplate(localeUrl, pageTemplate, node.url, node, code);
        });
      }
    }
  }); 

/**
 * Blog post template for route: "/blog/blog-post" and its locales
 */
  blogPostQuery.data.allContentstackBlogPost.nodes.forEach(node =&gt; {
    const isDefault = locales[node.locale];
      const localeList = Object.values(locales)
      .filter(locale =&gt; !locale.defaultLocale)
      .map(locale =&gt; locale.code);

    if (isDefault.defaultLocale) {
      createBlogPostTemplate(node.url, blogPostTemplate, node.title, node,node.locale);
    } else {
      localeList.forEach(code =&gt; {
        const localeUrl = `/${code}${node.url}`;
        createBlogPostTemplate(localeUrl, blogPostTemplate, node.title, node,node.locale);
      });
    }
  });
};

Follow the steps below to create a Context provider which handles the multi-lingual changes.

Create a folder named hooks within the src folder.
Create a file named useLocale.tsx within the hooks folder.

Copy and paste the below code to the file in the path:
src/hooks/useLocale.tsx Code Snippet:

import React, { createContext, useState, useContext } from "react";

import allLocales from "../Locales/locales";

const LocaleContext = createContext("");

const isBrowser = typeof window !== "undefined";
let pathname: String;

const LocaleProvider = ({ children }: any) =&gt; {
  if (isBrowser) pathname = window?.location?.pathname;

  // Find a default language
  const defaultLang = Object.keys(allLocales).filter(
    lang =&gt; allLocales[lang].defaultLocale
  )[0];

  // Get language prefix from the URL
  const urlLang = pathname?.split("/")[1];

  // Search if locale matches defined, if not set 'en-us' as default
  const currentLang = Object.keys(allLocales)
    .map(lang =&gt; allLocales[lang].code)
    .includes(urlLang)
    ? urlLang
    : defaultLang;

  const [locale, setLocale] = useState(currentLang);
  const [defaultLocale, setDefaultLocale] = useState(defaultLang);
  const [allLocalesList] = useState(allLocales);

  const changeLocale = (lang: string) =&gt; {
    if (lang) {
      setLocale(lang);
    }
  };

  /**
   * Wrapped context provider to send values below DOM tree
   */
  return (
    &lt;LocaleContext.Provider
      value={{ defaultLocale, allLocalesList, locale, changeLocale }}
    &gt;
      {children}
    &lt;/LocaleContext.Provider&gt;
  );
};

const useLocale = () =&gt; {
  const context = useContext(LocaleContext);

  if (!context) {
    throw new Error("useLocale must be used within an LocaleProvider");
  }

  return context;
};

export { LocaleProvider, useLocale };

For the context provider to work and the hook to receive values from the context, wrap the context provider (copy and paste the below code snippet) in the file wrap-with-provider.js, present in the root directory.

Code Snippet:

import React from "react"
import { Provider } from "react-redux"
import { LocaleProvider } from "./src/hooks/useLocale"

import createStore from "./src/store/reducers/state.reducer"

export default ({ element }) =&gt; {
  const store = createStore()
  return (
    &lt;LocaleProvider&gt;
      &lt;Provider store={store}&gt;{element}&lt;/Provider&gt;
    &lt;/LocaleProvider&gt;
  )
}

Add jsonRteToHtml: true flag under options in the gatsby-config.ts file for the gatsby-source-contentstack plugin if the flag is not already present.

Code Snippet:

{
      resolve: "gatsby-source-contentstack",
      options: {
        api_key: CONTENTSTACK_API_KEY,
        delivery_token: CONTENTSTACK_DELIVERY_TOKEN,
        environment: CONTENTSTACK_ENVIRONMENT,
        cdn: `https://${cdnHost}/v3`,
        // Optional: expediteBuild set this to either true or false
        expediteBuild: true,
        // Optional: Specify true if you want to generate custom schema
        enableSchemaGeneration: true,
        // Optional: Specify a different prefix for types. This is useful in cases where you have multiple instances of the plugin to be connected to different stacks.
        type_prefix: "Contentstack", // (default),
        jsonRteToHtml: true ,
      },
    },

Follow the steps below to create a custom link component that would prepend locale code to every route created except the default locale or master locale.

Note: en-us is a default locale. Thus there will be no prefix to the locale code.

Navigate to the components folder within src and create a file named CustomLink.tsx

Copy and paste the below code snippet to the created file:

import React, { useEffect } from "react"
import { Link, navigate } from "gatsby"
import { useLocale } from "../hooks/useLocale"

const CustomLink = ({ to, ...props }: any) =&gt; {
  const { defaultLocale, locale }: any = useLocale()

  return (
    &lt;Link
      to={defaultLocale !== locale ? `/${locale + to}` : `${to}`}
      {...props}
    /&gt;
  )
}

export { CustomLink }

Open Command Prompt and install the npm package react-dropdown, as given below:
```
npm install react-dropdown --legacy-peer-deps
```

To add the dropdown in the Header for the locale/language switcher, navigate to the Header component and replace it with the below code snippet:

import React, { useState, useEffect } from "react";
import { useLocation } from "@reach/router";
import { graphql, useStaticQuery, navigate } from "gatsby";
import Dropdown from "react-dropdown";
import { CustomLink } from "./CustomLink";
import parse from "html-react-parser";
import { connect } from "react-redux";
import Tooltip from "./ToolTip";
import jsonIcon from "../images/json.svg";
import { getHeaderRes, jsonToHtmlParse, getAllEntries } from "../helper/index";
import { onEntryChange } from "../live-preview-sdk";
import { actionHeader } from "../store/actions/state.action";
import { DispatchData, Entry, HeaderProps, Menu } from "../typescript/layout";
import { useLocale } from "../hooks/useLocale";

const queryHeader = () =&gt; {
  const query = graphql`
    query {
      allContentstackHeader {
        nodes {
          title
          uid
          locale
          publish_details {
            locale
          }
          logo {
            uid
            url
            filename
          }
          navigation_menu {
            label
            page_reference {
              title
              url
              uid
            }
          }
          notification_bar {
            show_announcement
            announcement_text
          }
        }
      }
    }
  `;
  return useStaticQuery(query);
};

const Header = ({ dispatch }: DispatchData) =&gt; {
  const { pathname } = useLocation();
  const { allContentstackHeader } = queryHeader();
  const { locale, allLocalesList, changeLocale, defaultLocale }: any =
    useLocale();
  let renderValue;

  allContentstackHeader?.nodes.map((value, idx) =&gt; {
    if (value?.locale === locale) {
      renderValue = value;
      jsonToHtmlParse(value);
      dispatch(actionHeader(value));
    }
  });
  const [getHeader, setHeader] = useState(allContentstackHeader);

  function buildNavigation(ent: Entry, head: HeaderProps) {
    let newHeader = { ...head };
    if (ent.length !== newHeader.navigation_menu.length) {
      ent.forEach(entry =&gt; {
        const hFound = newHeader?.navigation_menu.find(
          navLink =&gt; navLink.label === entry.title
        );
        if (!hFound) {
          newHeader.navigation_menu?.push({
            label: entry.title,
            page_reference: [
              { title: entry.title, url: entry.url, $: entry.$ },
            ],
            $: {},
          });
        }
      });
    }
    return newHeader;
  }

  async function getHeaderData() {
    const headerRes = await getHeaderRes(locale);
    const allEntries = await getAllEntries(locale);
    const nHeader = buildNavigation(allEntries, headerRes);
    setHeader(nHeader);
  }

  async function sanitizedUrl(localeCode: string) {
    let urlToNavigate: string;
    if (localeCode !== defaultLocale) {
      return navigate(`/${localeCode + pathname}`);
    } else if (localeCode === defaultLocale) {
      if (pathname.split("/").includes(locale)) {
        urlToNavigate = pathname.replace(`/${locale}`, "");
        return navigate(urlToNavigate);
      }
    }
  }

  useEffect(() =&gt; {
    onEntryChange(() =&gt; getHeaderData());
  }, [locale]);

  return (
    &lt;header className="header"&gt;
      &lt;div className="note-div"&gt;
        {renderValue.notification_bar.show_announcement &&
          typeof renderValue.notification_bar.announcement_text === "string" &&
          parse(renderValue.notification_bar.announcement_text)}
      &lt;/div&gt;
      &lt;div className="max-width header-div"&gt;
        &lt;div className="wrapper-logo"&gt;
          &lt;CustomLink to="/" className="logo-tag" title="Contentstack"&gt;
            &lt;img
              className="logo"
              src={renderValue.logo?.url}
              alt={renderValue.title}
              title={renderValue.title}
            /&gt;
          &lt;/CustomLink&gt;
        &lt;/div&gt;
        &lt;input className="menu-btn" type="checkbox" id="menu-btn" /&gt;
        &lt;label className="menu-icon" htmlFor="menu-btn"&gt;
          &lt;span className="navicon"&gt;&lt;/span&gt;
        &lt;/label&gt;

        &lt;nav className="menu"&gt;
          &lt;ul className="nav-ul header-ul"&gt;
            {renderValue.navigation_menu.map((menu: Menu, index: number) =&gt; {
              return (
                &lt;li className="nav-li" key={index}&gt;
                  {menu.label === "Home" ? (
                    &lt;CustomLink
                      to={`${menu.page_reference[0]?.url}`}
                      activeClassName="active"
                    &gt;
                      {menu.label}
                    &lt;/CustomLink&gt;
                  ) : (
                    &lt;CustomLink
                      to={`${menu.page_reference[0]?.url}`}
                      activeClassName="active"
                    &gt;
                      {menu.label}
                    &lt;/CustomLink&gt;
                  )}
                &lt;/li&gt;
              );
            })}
          &lt;/ul&gt;
        &lt;/nav&gt;
        {locale && (
          &lt;Dropdown
            options={Object.keys(allLocalesList)}
            onChange={option =&gt; {
              const { value } = option;
              changeLocale(value);
              sanitizedUrl(value);
            }}
            value={locale}
            placeholder="Select an option"
          /&gt;
        )}
        &lt;div className="json-preview"&gt;
          &lt;Tooltip
            content="JSON Preview"
            direction="top"
            dynamic={false}
            delay={200}
            status={0}
          &gt;
            &lt;span data-bs-toggle="modal" data-bs-target="#staticBackdrop"&gt;
              &lt;img src={jsonIcon} alt="JSON Preview icon" /&gt;
            &lt;/span&gt;
          &lt;/Tooltip&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/header&gt;
  );
};

export default connect()(Header);

Navigate to the Footer component and replace it with the below code snippet:

import { Link, useStaticQuery, graphql } from "gatsby";
import React, { useState, useEffect } from "react";
import { CustomLink } from "./CustomLink";
import parser from "html-react-parser";
import { connect } from "react-redux";
import { actionFooter } from "../store/actions/state.action";
import { onEntryChange } from "../live-preview-sdk";
import { getFooterRes, getAllEntries, jsonToHtmlParse } from "../helper/index";
import {
  DispatchData,
  Entry,
  FooterProps,
  Links,
  Social,
  Menu,
} from "../typescript/layout";
import { useLocale } from "../hooks/useLocale";

const queryLayout = () =&gt; {
  const data = useStaticQuery(graphql`
    query {
      allContentstackFooter {
        nodes {
          title
          locale
          logo {
            url
          }
          navigation {
            link {
              href
              title
            }
          }
          social {
            social_share {
              link {
                href
                title
              }
              icon {
                url
              }
            }
          }
          copyright
        }
      }
    }
  `);
  return data;
};

const Footer = ({ dispatch }: DispatchData) =&gt; {
  const { allContentstackFooter } = queryLayout();
  const { locale } = useLocale();
  let renderValue;
  allContentstackFooter?.nodes.map((value, idx) =&gt; {
    if (value?.locale === locale) {
      renderValue = value;
      jsonToHtmlParse(value);
      dispatch(actionFooter(value));
    }
  });

  const [getFooter, setFooter] = useState(allContentstackFooter);

  function buildNavigation(ent: Entry, footer: FooterProps) {
    let newFooter = { ...footer };
    if (ent.length !== newFooter.navigation.link.length) {
      ent.forEach(entry =&gt; {
        const fFound = newFooter?.navigation.link.find(
          (nlink: Links) =&gt; nlink.title === entry.title
        );
        if (!fFound) {
          newFooter.navigation.link?.push({
            title: entry.title,
            href: entry.url,
            $: entry.$,
          });
        }
      });
    }
    return newFooter;
  }

  async function getFooterData() {
    const footerRes = await getFooterRes(locale);
    const allEntries = await getAllEntries(locale);
    const nFooter = buildNavigation(allEntries, footerRes);
    setFooter(nFooter);
  }

  useEffect(() =&gt; {
    onEntryChange(() =&gt; getFooterData());
  }, [locale]);

  return (
    &lt;footer&gt;
      &lt;div className="max-width footer-div"&gt;
        &lt;div className="col-quarter"&gt;
          &lt;CustomLink to="/" className="logo-tag"&gt;
            &lt;img
              src={renderValue.logo?.url}
              alt={renderValue.title}
              title={renderValue.title}
              className="logo footer-logo"
            /&gt;
          &lt;/CustomLink&gt;
        &lt;/div&gt;
        &lt;div className="col-half"&gt;
          &lt;nav&gt;
            &lt;ul className="nav-ul"&gt;
              {renderValue.navigation.link.map((menu: Menu, index: number) =&gt; {
                return (
                  &lt;li className="footer-nav-li" key={index} {...menu.$?.title}&gt;
                    &lt;CustomLink to={menu.href}&gt;{menu.title}&lt;/CustomLink&gt;
                  &lt;/li&gt;
                );
              })}
            &lt;/ul&gt;
          &lt;/nav&gt;
        &lt;/div&gt;
        &lt;div className="col-quarter social-link"&gt;
          &lt;div className="social-nav"&gt;
            {renderValue.social.social_share.map(
              (social: Social, index: number) =&gt; {
                return (
                  &lt;a
                    href={social.link?.href}
                    title={social.link.title.toLowerCase()}
                    key={index}
                    className="footer-social-links"
                  &gt;
                    &lt;img src={social.icon?.url} alt="social-icon" /&gt;
                  &lt;/a&gt;
                );
              }
            )}
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div className="copyright"&gt;
        {typeof renderValue.copyright === "string" ? (
          &lt;div&gt;{parser(renderValue?.copyright)}&lt;/div&gt;
        ) : (
          ""
        )}
      &lt;/div&gt;
    &lt;/footer&gt;
  );
};

export default connect()(Footer);

Now replace all the default Gatsby Link components with our CustomLink component in all the components where we have used Link.
Example
1. Here is a Gatsby Link component in the Header component:
```
&lt;Link to="/" className="logo-tag" title="Contentstack"&gt;
            &lt;img className="logo" src={renderValue.logo?.url} alt={renderValue.title} title={renderValue.title} /&gt;
&lt;/Link&gt;
```
2. Replace it by importing the CustomLink component:
```
 import { CustomLink } from "./CustomLink"
&lt;CustomLink to="/" className="logo-tag" title="Contentstack"&gt;
    &lt;img
    className="logo"
    src={renderValue.logo?.url}
    alt={renderValue.title}
    title={renderValue.title}
    /&gt;
&lt;/CustomLink&gt;
```
You can see the Header component code snippet in step no.8.

To achieve a multi-lingual Gatsby site without any plugins, you must make a few changes in page creation using templates. Previously, we had home and blog page routes within the src/pages folder which were not created dynamically. This created conflicts when our route/URL with a locale-specific page was created. So to mitigate that, we have deleted the home and blog pages from the src/pages folder. After deleting, the pages folder would look like this:

Now it would just have a 404.tsx route.
Create a file named blog-page.tsx inside the src/templates folder as given below:

Copy and paste the below code snippet to the blog-page.tsx file:

import React, { useState, useEffect } from "react";
import { graphql } from "gatsby";
import Layout from "../components/Layout";
import SEO from "../components/SEO";
import RenderComponents from "../components/RenderComponents";
import ArchiveRelative from "../components/ArchiveRelative";
import { onEntryChange } from "../live-preview-sdk/index";
import { getPageRes, getBlogListRes, jsonToHtmlParse } from "../helper/index";
import { PageProps } from "../typescript/template";
import BlogList from "../components/BlogList";
import { useLocale } from "../hooks/useLocale";

const Blog = ({
  data: { allContentstackBlogPost, contentstackPage },
}: PageProps) =&gt; {
  jsonToHtmlParse(allContentstackBlogPost.nodes);
  const [getEntry, setEntry] = useState({
    banner: contentstackPage,
    blogList: allContentstackBlogPost.nodes,
  });
  const { locale }: any = useLocale();

  async function fetchData() {
    try {
      const banner = await getPageRes("/blog", locale);
      const blogList = await getBlogListRes(locale);
      if (!banner || !blogList) throw new Error("Error 404");
      setEntry({ banner, blogList });
    } catch (error) {
      console.error(error);
    }
  }

  useEffect(() =&gt; {
    onEntryChange(() =&gt; fetchData());
  }, [contentstackPage, locale]);

  const newBlogList = [] as any;
  const newArchivedList = [] as any;
  getEntry.blogList?.forEach(post =&gt; {
    if (locale === post.locale) {
      if (post.is_archived) {
        newArchivedList.push(post)
      } else {
        newBlogList.push(post)
      }
    }
  });
  return (
    &lt;Layout blogPost={getEntry.blogList} banner={getEntry.banner}&gt;
      &lt;SEO title={getEntry.banner.title} /&gt;
      &lt;RenderComponents
        components={getEntry.banner.page_components}
        blogPage
        contentTypeUid="page"
        entryUid={getEntry.banner.uid}
        locale={getEntry.banner.locale}
      /&gt;
      &lt;div className="blog-container"&gt;
        &lt;div className="blog-column-left"&gt;
          {newBlogList?.map((blog: BlogList, index: number) =&gt; {
            return &lt;BlogList blogList={blog} key={index} /&gt;;
          })}
        &lt;/div&gt;
        &lt;div className="blog-column-right"&gt;
          &lt;h2&gt;{contentstackPage?.page_components[1]?.widget?.title_h2}&lt;/h2&gt;
          &lt;ArchiveRelative data={newArchivedList} /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/Layout&gt;
  );
};

export const postQuery = graphql`
  query ($locale: String!) {
    contentstackPage(locale: { eq: $locale }) {
      title
      url
      uid
      locale
      seo {
        enable_search_indexing
        keywords
        meta_description
        meta_title
      }
      page_components {
        contact_details {
          address
          email
          phone
        }
        from_blog {
          title_h2
          featured_blogs {
            title
            uid
            url
            is_archived
            featured_image {
              url
              uid
            }
            body
            author {
              title
              uid
              bio
            }
          }
          view_articles {
            title
            href
          }
        }
        hero_banner {
          banner_description
          banner_title
          bg_color
          call_to_action {
            title
            href
          }
        }
        our_team {
          title_h2
          description
          employees {
            name
            designation
            image {
              url
              uid
            }
          }
        }
        section {
          title_h2
          description
          image {
            url
            uid
          }
          image_alignment
          call_to_action {
            title
            href
          }
        }
        section_with_buckets {
          title_h2
          description
          buckets {
            title_h3
            description
            icon {
              url
              uid
            }
            call_to_action {
              title
              href
            }
          }
        }
        section_with_cards {
          cards {
            title_h3
            description
            call_to_action {
              title
              href
            }
          }
        }
        widget {
          title_h2
          type
        }
      }
    }

    allContentstackBlogPost {
      nodes {
        url
        title
        uid
        locale
        author {
          title
          uid
        }
        related_post {
          title
          body
          uid
        }
        date
        featured_image {
          url
          uid
        }
        is_archived
        body
      }
    }
  }
`;

export default Blog;

Copy and paste the below code snippet to the blog-post.tsx file:

import React, { useState, useEffect } from "react";
import moment from "moment";
import { graphql } from "gatsby";
import SEO from "../components/SEO";
import parser from "html-react-parser";
import Layout from "../components/Layout";
import { useLocation } from "@reach/router";
import { onEntryChange } from "../live-preview-sdk/index";
import ArchiveRelative from "../components/ArchiveRelative";
import RenderComponents from "../components/RenderComponents";
import { getPageRes, getBlogPostRes, jsonToHtmlParse } from "../helper";
import { PageProps } from "../typescript/template";
import { useLocale } from "../hooks/useLocale";

const blogPost = ({
  data: { contentstackBlogPost, contentstackPage },
  pageContext,
}: PageProps) =&gt; {
  const { pathname } = useLocation();
  const { locale }: any = useLocale();

  jsonToHtmlParse(contentstackBlogPost);

  const [getEntry, setEntry] = useState({
    banner: contentstackPage,
    post: contentstackBlogPost,
  });

  async function fetchData() {
    try {
      const {
        result: { url },
      } = pageContext;
      const entryRes = await getBlogPostRes(url, locale);
      const bannerRes = await getPageRes("/blog", locale);
      if (!entryRes || !bannerRes) throw new Error("Error 404");
      setEntry({ banner: bannerRes, post: entryRes });
    } catch (error) {
      console.error(error);
    }
  }

  useEffect(() =&gt; {
    onEntryChange(() =&gt; fetchData());
  }, [contentstackBlogPost, contentstackPage]);
  return (
    &lt;Layout blogPost={getEntry.post} banner={getEntry.banner}&gt;
      &lt;SEO title={getEntry.post.title} /&gt;
      &lt;RenderComponents
        components={getEntry.banner.page_components}
        blogPage
        contentTypeUid="blog_post"
        entryUid={getEntry.banner.uid}
        locale={getEntry.banner.locale}
      /&gt;
      &lt;div className="blog-container"&gt;
        &lt;div className="blog-detail"&gt;
          &lt;h2 {...getEntry.post.$?.title}&gt;
            {getEntry.post.title ? getEntry.post.title : ""}
          &lt;/h2&gt;
          &lt;span&gt;
            &lt;p&gt;
              {moment(getEntry.post.date).format("ddd, MMM D YYYY")},{" "}
              &lt;strong {...getEntry.post.author[0]?.$?.title}&gt;
                {getEntry.post.author[0]?.title}
              &lt;/strong&gt;
            &lt;/p&gt;
          &lt;/span&gt;
          &lt;span {...getEntry.post.$?.body}&gt;{parser(getEntry.post.body)}&lt;/span&gt;
        &lt;/div&gt;
        &lt;div className="blog-column-right"&gt;
          &lt;div className="related-post"&gt;
            {getEntry.banner.page_components[2].widget && (
              &lt;h2 {...getEntry.banner.page_components[2]?.widget.$?.title_h2}&gt;
                {getEntry.banner.page_components[2].widget.title_h2}
              &lt;/h2&gt;
            )}
            &lt;ArchiveRelative
              data={getEntry.post.related_post && getEntry.post.related_post}
            /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/Layout&gt;
  );
};

export const postQuery = graphql`
  query ($title: String!) {
    contentstackBlogPost(title: { eq: $title }) {
      url
      title
      body
      uid
      locale
      date
      author {
        title
        bio
      }
      related_post {
        body
        url
        title
        date
      }
      seo {
        enable_search_indexing
        keywords
        meta_description
        meta_title
      }
    }
    contentstackPage(url: { eq: "/blog" }) {
      title
      url
      uid
      locale
      seo {
        enable_search_indexing
        keywords
        meta_description
        meta_title
      }
      page_components {
        contact_details {
          address
          email
          phone
        }
        from_blog {
          title_h2
          featured_blogs {
            title
            uid
            url
            is_archived
            featured_image {
              url
              uid
            }
            body
            author {
              title
              uid
              bio
            }
          }
          view_articles {
            title
            href
          }
        }
        hero_banner {
          banner_description
          banner_title
          bg_color
          call_to_action {
            title
            href
          }
        }
        our_team {
          title_h2
          description
          employees {
            name
            designation
            image {
              url
              uid
            }
          }
        }
        section {
          title_h2
          description
          image {
            url
            uid
          }
          image_alignment
          call_to_action {
            title
            href
          }
        }
        section_with_buckets {
          title_h2
          description
          buckets {
            title_h3
            description
            icon {
              url
              uid
            }
            call_to_action {
              title
              href
            }
          }
        }
        section_with_cards {
          cards {
            title_h3
            description
            call_to_action {
              title
              href
            }
          }
        }
        widget {
          title_h2
          type
        }
      }
    }
  }
`;
export default blogPost;

Copy and paste the below code snippet to the page.tsx file:

import React, { useState, useEffect } from "react";
import { graphql } from "gatsby";
import SEO from "../components/SEO";
import Layout from "../components/Layout";
import { onEntryChange } from "../live-preview-sdk/index";
import { getPageRes, jsonToHtmlParse } from "../helper";
import RenderComponents from "../components/RenderComponents";
import { PageProps } from "../typescript/template";
import { useLocale } from "../hooks/useLocale";

const Page = ({ data: { contentstackPage }, pageContext }: PageProps) =&gt; {
  jsonToHtmlParse(contentstackPage);
  const [getEntry, setEntry] = useState(contentstackPage);
  const { locale }: any = useLocale();

  async function fetchData() {
    try {
      const entryRes = await getPageRes(pageContext?.url, locale);
      if (!entryRes) throw new Error("Error 404");
      setEntry(entryRes);
    } catch (error) {
      console.error(error);
    }
  }
  useEffect(() =&gt; {
    onEntryChange(() =&gt; fetchData());
  }, []);

  return (
    &lt;Layout pageComponent={getEntry}&gt;
      &lt;SEO title={getEntry.title} /&gt;
      &lt;div className="about"&gt;
        {getEntry.page_components && (
          &lt;RenderComponents
            components={getEntry.page_components}
            contentTypeUid="page"
            entryUid={getEntry.uid}
            locale={getEntry.locale}
          /&gt;
        )}
      &lt;/div&gt;
    &lt;/Layout&gt;
  );
};

export const pageQuery = graphql`
  query ($url: String!, $locale: String!) {
    contentstackPage(url: { eq: $url }, locale: { eq: $locale }) {
      uid
      title
      url
      seo {
        meta_title
        meta_description
        keywords
        enable_search_indexing
      }
      locale
      page_components {
        contact_details {
          address
          email
          phone
        }
        from_blog {
          title_h2

          featured_blogs {
            uid
            title
            url
            featured_image {
              url
              uid
            }
            author {
              title
              uid
            }
            body
            date
          }
          view_articles {
            title
            href
          }
        }

        hero_banner {
          banner_description
          banner_title
          banner_image {
            uid
            url
          }
          bg_color
          text_color
          call_to_action {
            title
            href
          }
        }
        our_team {
          title_h2
          description
          employees {
            name
            designation
            image {
              uid
              title
              url
            }
          }
        }
        section {
          title_h2
          description
          image_alignment
          image {
            uid
            title
            url
          }
          call_to_action {
            title
            href
          }
        }
        section_with_buckets {
          title_h2
          description
          bucket_tabular
          buckets {
            title_h3
            description
            icon {
              uid
              title
              url
            }
            call_to_action {
              title
              href
            }
          }
        }
        section_with_cards {
          cards {
            title_h3
            description
            call_to_action {
              title
              href
            }
          }
        }
        section_with_html_code {
          title
          html_code_alignment
          html_code
          description
        }
        widget {
          type
          title_h2
        }
      }
    }
  }
`;

export default Page;

After making all the necessary changes, save the code and run gatsby develop or gatsby build in Command Prompt.
Run gatsby serve to check the changes.

Ensure you have made the necessary changes to the stack to support Internationalization.

You have now added multi-lingual support for the Gatsby starter app.

More Resources

The creative professional

The modern developer

Icelandair leverages headless CMS powerful integrations and microservices

From paper orders to e-commerce powerhouse Dawn Foods’ MACH journey

Forrester: The Total Economic Impact™ of Contentstack Headless CMS Platform

Composable vs. monolithic: Which is right for you?

LADbible Group cut editorial time in half and scaled with ease

Burberry chooses headless CMS to enable speed and agility

Contentstack’s partner program

Understanding and Resolving CORS Error

Webhook

ASICS chooses Contentstack to modernize and accelerate global online experience ...

Contentstack Expands Product Suite, Enters Front-End Hosting Market With New Fully-Integrated...

How to Get Your Technical Debt Under Control

5 First Priorities for Business Change

Why a composable CMS is right for you

How to choose an omnichannel marketing platform

What is a Headless CMS?

Creating a culture of empowerment

Contentstack basics

Quickstart in 5 mins

Starter apps

Content Delivery APIs

Content Management APIs

How-to guides

Sample Apps

Build a Java Web Application Using GraphQL API and Spring Boot

Gatsby Starter Website

Gatsby Multilingual Website

Next.js Starter Website

Next.js SSG Starter Website

React.js Starter Website

Angular Starter Website

Angular E-commerce App

Static Marketing Website

Build an Android TV app using Contentstack’s Android SDK

Vue.js Starter Website

Nuxt.js Starter Website

Ecommerce Website

Stencil.js Starter Website

ASP.NET Blazor Starter Website

Sveltekit Starter Website

iOS News App

Augmented Reality (AR) App

Android News App

React Native News App

Ruby Ecommerce Product Catalog

PHP Blog Demo

Sample Liquid Template App using Contentstack .NET SDK

E-commerce Website Using Contentstack DataSync

commercetools E-commerce Website

Flutter News App

Python News App

Android E-commerce App

Flutter E-commerce App

E-commerce App using Contentstack's Swift SDK

Product Catalog App Using Ruby on Rails, GraphQL Client, and Contentstack GraphQL APIs

Web Application Using Contentstack Java SDK and Spring Boot

Product Catalog App Using GraphQL Client and .Net

Product Catalog Website Using ASP.Net Razor Pages and Contentstack .Net SDK

Astro Starter Website

Nuxt3 Starter Website

Contentstack GraphQL Starter with PHP and Laravel

Contentstack
basics

Quickstart
in 5 mins

Starter
apps

Content Delivery
APIs

Content
Management APIs

How-to
guides