Build a Multilingual Website using Gatsby and Contentstack

• The Gatsby Starter app already installed and working

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

• 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.

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

1. 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:
      
      123456789101112131415161718192021

      module.exports = {
      
        "en-us": {
      
          code: "en-us",
      
          locale: "English",
      
          defaultLocale: true,
      
        },
      
        "fr": {
      
          code: "fr",
      
          locale: "french",
      
        },
      
      }

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

   Code Snippet:

   123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258

   const path = require("path")
   
   const locales = require("./src/Locales/locales")
   
   
   module.exports.createPages = async ({ graphql, actions }) > {
   
     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) => {
   
       createPage({
   
         path: `${route}`,
   
         component: componentToRender,
   
         context: {
   
           title: title, 
   
           result: data,
   
           locale: locale
   
         },
   
       });
   
     };
   
   
     const createBlogPageTemplate = (route, componentToRender, title, data, locale) => {
   
       createPage({
   
         path: `${route}`,
   
         component: componentToRender,
   
         context: {
   
           title: title, 
   
           result: data,
   
           locale: locale
   
         },
   
       });
   
     };
   
   
     const createPageTemplate = (route, componentToRender, url, data, locale) => {
   
       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 => {
   
       const isDefault = locales[node.locale];
   
       const localeList = Object.values(locales)
   
         .filter(locale => !locale.defaultLocale)
   
         .map(locale => locale.code);
   
   
       if (node.url === "/blog") {
   
         if (isDefault.defaultLocale) {
   
           createBlogPageTemplate(node.url, blogPageTemplate, node.title, node,node.locale);
   
         } else {
   
           localeList.forEach(code => {
   
             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 => {  
   
       const isDefault = locales[node.locale];
   
       const localeList = Object.values(locales)
   
       .filter(locale => !locale.defaultLocale)
   
       .map(locale => locale.code);
   
       if (node.url !== '/blog') {
   
         if (isDefault.defaultLocale) {
   
           createPageTemplate(`${node.url}`, pageTemplate, node.url, node, node.locale);
   
         } else {
   
           localeList.forEach(code => {
   
             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 => {
   
       const isDefault = locales[node.locale];
   
         const localeList = Object.values(locales)
   
         .filter(locale => !locale.defaultLocale)
   
         .map(locale => locale.code);
   
   
       if (isDefault.defaultLocale) {
   
         createBlogPostTemplate(node.url, blogPostTemplate, node.title, node,node.locale);
   
       } else {
   
         localeList.forEach(code => {
   
           const localeUrl = `/${code}${node.url}`;
   
           createBlogPostTemplate(localeUrl, blogPostTemplate, node.title, node,node.locale);
   
         });
   
       }
   
     });
   
   };

3. Follow the steps below to create a Context provider which handles the multi-lingual changes.
   1. Create a folder named hooks within the src folder.
   2. Create a file named useLocale.tsx within the hooks folder.
   3. Copy and paste the below code to the file in the path:
      src/hooks/useLocale.tsx Code Snippet:
      
      123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105

      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) => {
      
        if (isBrowser) pathname = window?.location?.pathname;
      
      
        // Find a default language
      
        const defaultLang = Object.keys(allLocales).filter(
      
          lang => 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 => 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) => {
      
          if (lang) {
      
            setLocale(lang);
      
          }
      
        };
      
      
        /**
      
         * Wrapped context provider to send values below DOM tree
      
         */
      
        return (
      
          <LocaleContext.Provider
      
            value={{ defaultLocale, allLocalesList, locale, changeLocale }}
      
          >
      
            {children}
      
          </LocaleContext.Provider>
      
        );
      
      };
      
      
      const useLocale = () => {
      
        const context = useContext(LocaleContext);
      
      
        if (!context) {
      
          throw new Error("useLocale must be used within an LocaleProvider");
      
        }
      
      
        return context;
      
      };
      
      
      export { LocaleProvider, useLocale };

4. 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:

   12345678910111213141516171819202122232425

   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 }) => {
   
     const store = createStore()
   
     return (
   
       <LocaleProvider>
   
         <Provider store={store}>{element}</Provider>
   
       </LocaleProvider>
   
     )
   
   }

5. 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:

   12345678910111213141516171819202122232425262728293031

   {
   
         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 ,
   
         },
   
       },

6. 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.

   1. Navigate to the components folder within src and create a file named CustomLink.tsx
   2. Copy and paste the below code snippet to the created file:
      
      12345678910111213141516171819202122232425262728

      import React, { useEffect } from "react"
      
      import { Link, navigate } from "gatsby"
      
      import { useLocale } from "../hooks/useLocale"
      
      
      const CustomLink = ({ to, ...props }: any) => {
      
        const { defaultLocale, locale }: any = useLocale()
      
      
        return (
      
          <Link
      
            to={defaultLocale !== locale ? `/${locale + to}` : `${to}`}
      
            {...props}
      
          />
      
        )
      
      }
      
      
      export { CustomLink }

7. Open Command Prompt and install the npm package react-dropdown, as given below:
   1

   npm install react-dropdown --legacy-peer-deps

8. 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:
   123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367

   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 = () => {
   
     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) => {
   
     const { pathname } = useLocation();
   
     const { allContentstackHeader } = queryHeader();
   
     const { locale, allLocalesList, changeLocale, defaultLocale }: any =
   
       useLocale();
   
     let renderValue;
   
   
     allContentstackHeader?.nodes.map((value, idx) => {
   
       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 => {
   
           const hFound = newHeader?.navigation_menu.find(
   
             navLink => 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(() => {
   
       onEntryChange(() => getHeaderData());
   
     }, [locale]);
   
   
     return (
   
       <header className="header">
   
         <div className="note-div">
   
           {renderValue.notification_bar.show_announcement &&
   
             typeof renderValue.notification_bar.announcement_text === "string" &&
   
             parse(renderValue.notification_bar.announcement_text)}
   
         </div>
   
         <div className="max-width header-div">
   
           <div className="wrapper-logo">
   
             <CustomLink to="/" className="logo-tag" title="Contentstack">
   
               <img
   
                 className="logo"
   
                 src={renderValue.logo?.url}
   
                 alt={renderValue.title}
   
                 title={renderValue.title}
   
               />
   
             </CustomLink>
   
           </div>
   
           <input className="menu-btn" type="checkbox" id="menu-btn" />
   
           <label className="menu-icon" htmlFor="menu-btn">
   
             <span className="navicon"></span>
   
           </label>
   
   
           <nav className="menu">
   
             <ul className="nav-ul header-ul">
   
               {renderValue.navigation_menu.map((menu: Menu, index: number) => {
   
                 return (
   
                   <li className="nav-li" key={index}>
   
                     {menu.label === "Home" ? (
   
                       <CustomLink
   
                         to={`${menu.page_reference[0]?.url}`}
   
                         activeClassName="active"
   
                       >
   
                         {menu.label}
   
                       </CustomLink>
   
                     ) : (
   
                       <CustomLink
   
                         to={`${menu.page_reference[0]?.url}`}
   
                         activeClassName="active"
   
                       >
   
                         {menu.label}
   
                       </CustomLink>
   
                     )}
   
                   </li>
   
                 );
   
               })}
   
             </ul>
   
           </nav>
   
           {locale && (
   
             <Dropdown
   
               options={Object.keys(allLocalesList)}
   
               onChange={option => {
   
                 const { value } = option;
   
                 changeLocale(value);
   
                 sanitizedUrl(value);
   
               }}
   
               value={locale}
   
               placeholder="Select an option"
   
             />
   
           )}
   
           <div className="json-preview">
   
             <Tooltip
   
               content="JSON Preview"
   
               direction="top"
   
               dynamic={false}
   
               delay={200}
   
               status={0}
   
             >
   
               <span data-bs-toggle="modal" data-bs-target="#staticBackdrop">
   
                 <img src={jsonIcon} alt="JSON Preview icon" />
   
               </span>
   
             </Tooltip>
   
           </div>
   
         </div>
   
       </header>
   
     );
   
   };
   
   
   export default connect()(Header);

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

   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 = () => {
   
     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) => {
   
     const { allContentstackFooter } = queryLayout();
   
     const { locale } = useLocale();
   
     let renderValue;
   
     allContentstackFooter?.nodes.map((value, idx) => {
   
       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 => {
   
           const fFound = newFooter?.navigation.link.find(
   
             (nlink: Links) => 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(() => {
   
       onEntryChange(() => getFooterData());
   
     }, [locale]);
   
   
     return (
   
       <footer>
   
         <div className="max-width footer-div">
   
           <div className="col-quarter">
   
             <CustomLink to="/" className="logo-tag">
   
               <img
   
                 src={renderValue.logo?.url}
   
                 alt={renderValue.title}
   
                 title={renderValue.title}
   
                 className="logo footer-logo"
   
               />
   
             </CustomLink>
   
           </div>
   
           <div className="col-half">
   
             <nav>
   
               <ul className="nav-ul">
   
                 {renderValue.navigation.link.map((menu: Menu, index: number) => {
   
                   return (
   
                     <li className="footer-nav-li" key={index} {...menu.$?.title}>
   
                       <CustomLink to={menu.href}>{menu.title}</CustomLink>
   
                     </li>
   
                   );
   
                 })}
   
               </ul>
   
             </nav>
   
           </div>
   
           <div className="col-quarter social-link">
   
             <div className="social-nav">
   
               {renderValue.social.social_share.map(
   
                 (social: Social, index: number) => {
   
                   return (
   
                     <a
   
                       href={social.link?.href}
   
                       title={social.link.title.toLowerCase()}
   
                       key={index}
   
                       className="footer-social-links"
   
                     >
   
                       <img src={social.icon?.url} alt="social-icon" />
   
                     </a>
   
                   );
   
                 }
   
               )}
   
             </div>
   
           </div>
   
         </div>
   
         <div className="copyright">
   
           {typeof renderValue.copyright === "string" ? (
   
             <div>{parser(renderValue?.copyright)}</div>
   
           ) : (
   
             ""
   
           )}
   
         </div>
   
       </footer>
   
     );
   
   };
   
   
   export default connect()(Footer);

10. 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:
       12345

       <Link to="/" className="logo-tag" title="Contentstack">
       
                   <img className="logo" src={renderValue.logo?.url} alt={renderValue.title} title={renderValue.title} />
       
       </Link>

    2. Replace it by importing the CustomLink component:
       1234567891011121314151617

       import { CustomLink } from "./CustomLink"
       
       <CustomLink to="/" className="logo-tag" title="Contentstack">
       
           <img
       
           className="logo"
       
           src={renderValue.logo?.url}
       
           alt={renderValue.title}
       
           title={renderValue.title}
       
           />
       
       </CustomLink>

    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:

    Click to enlarge

    Now it would just have a 404.tsx route.

11. Create a file named blog-page.tsx inside the src/templates folder as given below: 
    
    Click to enlarge
12. Copy and paste the below code snippet to the blog-page.tsx file:
    123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412

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

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

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

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

    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) => {
    
      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(() => {
    
        onEntryChange(() => fetchData());
    
      }, []);
    
    
      return (
    
        <Layout pageComponent={getEntry}>
    
          <SEO title={getEntry.title} />
    
          <div className="about">
    
            {getEntry.page_components && (
    
              <RenderComponents
    
                components={getEntry.page_components}
    
                contentTypeUid="page"
    
                entryUid={getEntry.uid}
    
                locale={getEntry.locale}
    
              />
    
            )}
    
          </div>
    
        </Layout>
    
      );
    
    };
    
    
    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;

15. After making all the necessary changes, save the code and run gatsby develop or gatsby build in Command Prompt.
16. 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.

• Gatsby Documentation
• Gatsby Starter app
• Android News App
• iOS News App