i18n
Berkay Demirbas
@raufsamestone
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1261366/images/8900980/Jamstack_Logo_Original_Transparent.png)
i18n
- Localization (l10n)
- Internationalization (i18n)
πΉπ·πΊπΈπ©πͺ
![](https://miro.medium.com/max/2000/1*Sp3eqPuXRBTBon-WhuGMcA.jpeg)
source: https://uxknowledgebase.com/internationalization-localization-d84795b7962c
Marketing
i18n
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1261366/images/8899260/Screen_Shot_2021-09-06_at_09.38.09.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1261366/images/8899261/Screen_Shot_2021-09-06_at_09.38.03.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1261366/images/8899263/Screen_Shot_2021-09-06_at_09.37.57.png)
UX/UI
i18n
![](https://phrase.com/blog/wp-content/uploads/2019/03/03-iids-starter-sketch-mockup-detail.png)
![](https://phrase.com/blog/wp-content/uploads/2019/07/update01-iids-test-lang-phraseapp-plugin.png)
![](https://phrase.com/blog/wp-content/uploads/2019/03/03-iids-starter-sketch-mockup-detail.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1261366/images/8901027/Screen_Shot_2021-09-06_at_19.00.31.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1261366/images/8901028/Screen_Shot_2021-09-06_at_19.00.22.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1261366/images/8901036/Gatsby_Logo.png)
yarn add gatsby-plugin-i18n
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1261366/images/8901036/Gatsby_Logo.png)
// Add to gatsby-config.js
plugins: [
{
resolve: 'gatsby-plugin-i18n',
options: {
langKeyDefault: 'en',
useLangKeyLayout: false
}
}
]
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1261366/images/8901036/Gatsby_Logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1261366/images/8901036/Gatsby_Logo.png)
file | url |
---|---|
src/pages/about.en.js | /en/about |
src/pages/about/index.en.js | /en/about |
src/pages/blog/gatsby-i18n.pt.md | /pt/blog/gatsby-i18n |
yarn add gatsby-plugin-react-intl
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1261366/images/8901036/Gatsby_Logo.png)
language resource file | language |
---|---|
src/intl/en.json | English |
src/intl/ko.json | Korean |
src/intl/de.json | German |
// In your gatsby-config.js
plugins: [
{
resolve: `gatsby-plugin-react-intl`,
options: {
// language JSON resource path
path: `${__dirname}/src/intl`,
// supported language
languages: [`en`, `ko`, `de`],
// language file path
defaultLanguage: `ko`,
// option to redirect to `/ko` when connecting `/`
redirect: true,
// option for use / as defaultLangauge root path. if your defaultLanguage is `ko`, when `redirectDefaultLanguageToRoot` is true, then it will not generate `/ko/xxx` pages, instead of `/xxx`
redirectDefaultLanguageToRoot: false,
// paths that you don't want to genereate locale pages, example: ["/dashboard/","/test/**"], string format is from micromatch https://github.com/micromatch/micromatch
ignoredPaths: [],
// option to fallback to the defined language instead of the `defaultLanguage` if the user langauge is not in the list
fallbackLanguage: `en`,
},
},
]
import React from "react"
import { injectIntl, Link, FormattedMessage } from "gatsby-plugin-react-intl"
const IndexPage = ({ intl }) => {
return (
<Layout>
<SEO title={intl.formatMessage({ id: "title" })} />
<Link to="/page-2/">
{intl.formatMessage({ id: "go_page2" })}
{/* OR <FormattedMessage id="go_page2" /> */}
</Link>
</Layout>
)
}
export default injectIntl(IndexPage)
//Query
export const query = graphql`
query PostsList($locale: String!, $dateFormat: String!, $skip: Int!, $limit: Int!) {
allMarkdownRemark(
sort: {fields: frontmatter___date, order: DESC},
filter: {
fields: { locale: { eq: $locale } }
fileAbsolutePath: {regex: "/(blog)/.*.md$/"}
}
limit: $limit
skip: $skip
){
edges {
node {
frontmatter {
title
description
date(formatString: $dateFormat)
}
timeToRead
excerpt(format: MARKDOWN, pruneLength: 150)
fields {
locale
slug
}
}
}
}
}
`;
//gatsby-node.js
const path = require(`path`);
const locales = require(`./config/i18n`);
const {
localizedSlug,
findKey,
removeTrailingSlash,
} = require(`./src/utils/gatsby-node-helpers`);
exports.onCreatePage = ({ page, actions }) => {
const { createPage, deletePage } = actions;
deletePage(page);
Object.keys(locales).map(lang => {
const localizedPath = locales[lang].default
? page.path
: `${locales[lang].path}${page.path}`;
return createPage({
...page,
path: removeTrailingSlash(localizedPath),
context: {
...page.context,
locale: lang,
dateFormat: locales[lang].dateFormat,
},
});
});
};
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1261366/images/8901162/Screen_Shot_2021-09-06_at_19.49.39.png)
Thx.
i18n in JAMstack
By Berkay Demirbas
i18n in JAMstack
- 53