Internationalization with Gatsby

leeszczuu · July 1, 2020, 11:23am

Hi there,
I know this question is probably more about Gatsby than Dato - but I couldn’t find any guide on doing this, so I assume it will be helpful for other people.

Let’s get to the point - I have to add internationalization support for existing Gatsby site. I have products stored as a records in DatoCMS. I have gatsby-node file which generates each page for each node. But I can’t figure out how to make it to generate 2 version of the same record - 1 without any suffix, and 1 with /en/product suffix. Here is my gatsby-node file, and template for product page:

gist.github.com

https://gist.github.com/adiusz/e953acb277aa0be2e55b0f2787911509

gatsby-node


const path = require(`path`)
const { createFilePath } = require(`gatsby-source-filesystem`)
exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions
  return new Promise((resolve, reject) => {
    graphql(`
      {
        allDatoCmsProduct {
          edges {

This file has been truncated. show original

gist.github.com

https://gist.github.com/adiusz/57e63c341de8090c3dc7d76dc1d8ffa5

product.js

import React, { useState } from "react"
import { graphql } from 'gatsby'
import Layout from "../components/layout"
import SEO from "../components/seo"
import styled, { css } from "styled-components"  }


export default ({ data }) => {

This file has been truncated. show original

I hope someone would explain it nicely to me. Thanks in advance!

mat_jack1 · July 3, 2020, 9:33am

hey @leeszczuu have you seen this documentation: https://github.com/datocms/gatsby-source-datocms#localized-fields

I think that you should create the double page in the gatsby-node (if you want to have multiple pages) otherwise maybe look into routing: https://www.gatsbyjs.org/docs/routing/ ?