Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Gatsby Head API with react-i18next

See original GitHub issue

Preliminary Checks

This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
This issue is not a question, feature request, RFC, or anything other than a bug report. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Summary

Hi,

I would like to know how to use i18n with Head API. I try this but it doesn’t work.

export const Head = () =>
{
  const { t } = useTranslation();

  return (<SEO
    title={t('My title')}
  />)
}

I don’t see any explaination in the documentation about how to use i18n with Head API.

Steps to Resolve this Issue

Add explaination about how to use i18n with Head API : https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-head/

Issue Analytics

State:
Created a year ago
Reactions:4
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

LekoArtscommented, Sep 5, 2022

Hi!

At the moment you can’t use libraries that rely on React Context as we currently don’t wrap the Head API with these providers, see: https://github.com/gatsbyjs/gatsby/discussions/35841#discussioncomment-3258990

We have to make this change for Gatsby 5 as it’ll be a breaking change, but afterwards you’ll be able to place your providers there and then the information is available in the Head API.

So for now this is not possible unfortunately.

0reactions

gerardolmoscommented, Dec 1, 2022

Hi! You can use a conditional inside Head extracting the language of the data props, and based on the result you launch one thing or another. it is not necessary to put the seo descriptions in the json, put them directly in the head

Top Results From Across the Web

gatsby-plugin-react-i18next

Easily translate your Gatsby website into multiple languages. Features. Seamless integration with react-i18next - a powerful internationalization framework for ...

Gatsby i18n: A Hands-on Guide | Phrase

Hit the ground running quickly with this Gatsby i18n tutorial and learn how to add internationalization support to your Gatsby project.

Implement i18n to a Gatsby site - Medium

In this article we will implement i18n (Internationalization) to a Gatsby site using react-intl and React context API, we will only cover ...

how to use i18n to gatsby? - Stack Overflow

import React from 'react'; import PropTypes from 'prop-types'; import { translate } from 'react-i18next'; import { Head } from ...

How to use Gatsby's Head API with MDX - Paul Scanlon

React Helmet. Historically the way to add indexable meta data to you Gatsby site's <head> element was to use a combination of react-helmet ......