KevinVR

// en.json
{
  "website": {
    "title": "My website"
  }
}

// .jsx
const title = intl.formatMessage({ id: "website.title" });

KevinVR

<Link to="/contact">
  {intl.formatMessage({ id: "go_to_contact" })}
</Link>

KevinVR

function MyComponent({ intl }) {
  // Here you can use intl
}

KevinVR

export default injectIntl(MyComponent);

KevinVR

import { injectIntl } from 'gatsby-plugin-intl';

KevinVR

// Using the function
const title = intl.formatMessage({ id: 'title' });

// Using the React component
import { FormattedMessage } from 'gatsby-plugin-intl';
<FormattedMessage id="title" />

KevinVR

const intl = useIntl();

KevinVR

import { useIntl } from 'gatsby-plugin-intl';

KevinVR

{
  "title": "My test website",
  "description": "My website description"
 }

KevinVR

// from https://www.npmjs.com/package/gatsby-plugin-intl
plugins: [
  {
    resolve: `gatsby-plugin-intl`,
    options: {
      // language JSON resource path
      path: `${__dirname}/src/intl`,
      // supported language
      languages: [`en`, `ko`, `de`],
      // language file path