teamMembers = [ { title: 'CEO', fullName: 'Jack Misteli', content: 'The CEO of the Company', locale: 'en' }, { title: 'CEO', fullName: 'ジャック・ミステリ', content: '会社のCEO', locale: 'ja' } ] 

module.export = { siteMetadata: { title: `Kodou`, description: `Kodou site description`, author: `Jack Misteli `, languages }, //.... 

// langs contains the languages of our blog and default langKey is the default language of the site // To be fully programmatic we could calculate langs // here langs = ['en', 'ja'] and defaultLangKey = 'en' const { langs, defaultLangKey } = require('../config/languages') const path = require(`path`) const { localizeUrl, createLanguagesObject } = require('../utils/localization') module.exports = async (options, createPage, graphql) => { const {query, pageName} = options let templateName = options.templateName ? options.templateName : pageName const result = await graphql(query) if (result.errors) console.error(result.errors) const cosmicJSData = createLanguagesObject(langs) Object.values(result.data)[0].edges.forEach(({ node }) => { cosmicJSData[node.locale].push(node) }) // we create a new page for each language langs.forEach(lang => { createPage({ // the localizeUrl function creates a url which takes into consideration what the default language is path: localizeUrl(lang, defaultLangKey, '/team'), component: path.resolve(`src/templates/team.js`), context: { profiles: profiles[lang], // Here we pass the current language to the page lang } }) }) } 

const { lang } = props.pageContext; 

import React from "react" import { useStaticQuery, graphql } from "gatsby" import "../styles/main.scss" import Header from "./header" import { IntlProvider, FormattedDate } from "react-intl" const Layout = ({ children, location, lang }) => { // We populated the siteMetaData in `gatsby-config.js` and are extracting it here for some extra language context // The best practice here would be to directly get that data from `config` but I want to show different ways to do it const data = useStaticQuery(graphql` query SiteInfoQuery { site { siteMetadata { title languages { defaultLang langs } } } } `) // langs is an array of all the supported languages // defaultLang is the default site language // title is the website's title const {langs, defaultLang, title} = data.site.siteMetadata return ( // We use IntlProvider to set the default language of our page <IntlProvider locale={lang} defaultLocale={defaultLang} > <Header location={location} defaultLang={defaultLang} languages={langs} siteTitle={title} /> <main className="section"> <div className="container"> {children} </div> </main> <footer> <div className="footer"> <div className="content has-text-centered"> {/* FormattedDate will format our date according to the language we set in IntlProvider locale prop */} © <FormattedDate value={new Date()} year="numeric" month="long" day="numeric" weekday="long" />, Built by <a href="https://jmisteli.com"> Jack Misteli</a> </div> </div> </footer> </IntlProvider> ) } export default Layout 

import { Link } from "gatsby" import PropTypes from "prop-types" import React from "react" import { getCurrentLangKey, getLangs, getUrlForLang } from 'ptz-i18n' import langmap from 'langmap' import { localizeUrl, buildMenu } from '../../utils/localization' const Header = ({ languages, location, defaultLang}) => { const url = location.pathname const currentLangKey = getCurrentLangKey(languages, defaultLang, url) // Create a home link by adding a slash before the language and if it const homeLink = localizeUrl(currentLangKey, defaultLang, '/') // Get langs return language menu information // langsMenu will allow us to build a dropdown with all the available language options const langsMenu = buildMenu(languages, defaultLang, currentLangKey, url) // On the `/team` page this will return the following array // [{selected: true, link: "/team/", langKey: "en"}, // {selected: false, link: "/ja/team/", langKey: "ja"}] // All the navigation menu item titles const allLanguageTitles = { 'en':['Concept', 'Work', 'Team', 'News', 'Contact'], 'ja': ['コンセプト', '仕事', 'チーム', 'ニュース', '連絡先'] } // Selecting the current language and default to english titles const currentLanguageTitles = allLanguageTitles[currentLangKey] || allLanguageTitles['en'] // allNavigationLinks contains all the pages name, with urls in every supported language const allNavigationLinks = currentLanguageTitles.map((page, i) => ({ name: page, url: `${homeLink.replace(defaultLang, '')}${allLanguageTitles.en[i].toLowerCase()}` })) // On the English page it will return  // [{name: "Concept", url: "/concept"}, {name: "Work", url: "/work"}, {name: "Team", url: "/team"}...] // [{name: "コンセプト", url: "/ja/concept"}, {name: "仕事", url: "/ja/work"}, {name: "チーム", url: "/ja/team"} ...] return ( <nav> <Link to={homeLink} className="navbar-item"> HOME </Link>  {allLinks.map((link, i) => ( <Link key={i} to={link.url} className="navbar-item"> {link.name.toUpperCase()} </Link>  ))} <div className="navbar-language-menu"> <div className="current-language"> // langmap is an object with the language keys as object keys and english, original versions of the language {langmap[langKey]['englishName']} </div>  <div className="all-languages-dropdown"> {langsMenu.map((lang)=>( !lang.selected && <Link key={lang.langKey} to={lang.link} className="navbar-item"> {langmap[lang.langKey]['englishName']} </Link>  ))} </div>  </div>  </nav> )} export default Header