Cómo crear un blog multilingüe con Gatsby y i18next

multilingual-blog/
├── public/
├── node_modules/
├── src/
│   ├── images/
│   └── pages/
│       ├── 404.js
│       └── index.js
└── gatsby-config.js

module.exports = {
  __DEFAULT_LANGUAGE__: "en",
  __LANGUAGES__: ["en", "es"],
};

module.exports = {
  siteMetadata: {
  title: `multilingual-blog`,
  siteUrl: `https://www.yourdomain.tld`,
  },
  plugins: [
  "gatsby-plugin-react-helmet",
  "gatsby-transformer-remark",
  {
    resolve: "gatsby-source-filesystem",
    options: {
    name: "pages",
    path: "./src/pages/",
    },
    __key: "pages",
  },
  ],
};

const { __DEFAULT_LANGUAGE__, __LANGUAGES__ } = require("./languages");

const { __DEFAULT_LANGUAGE__, __LANGUAGES__ } = require("./languages");

module.exports = {
  siteMetadata: {
  title: `multilingual-blog`,
  siteUrl: `https://www.example.com`,
  },
  plugins: [
  "gatsby-plugin-react-helmet",
  "gatsby-transformer-remark",
  {
    resolve: `gatsby-source-filesystem`,
    options: {
    path: `${__dirname}/blog`,
    name: `articles`,
    },
  },
  {
    resolve: `gatsby-source-filesystem`,
    options: {
    path: `${__dirname}/locales`,
    name: `locale`, // Este nombre es importante porque lo usaremos más adelante.
    },
  },
  {
    resolve: `gatsby-plugin-react-i18next`,
    options: {
    localeJsonSourceName: `locale`, // Debe ser el mismo nombre que usamos en la configuración anterior.
    defaultLanguage: __DEFAULT_LANGUAGE__,
    languages: __LANGUAGES__,
    redirect: true,
    generateDefaultLanguagePage: true,
    siteUrl: `https://example.com/`,
    i18nextOptions: {
      interpolation: {
      escapeValue: false,
      },
      keySeparator: false,
      nsSeparator: false,
    },
    pages: [
      {
      matchPath: "/:lang/blog/:slug*", // La dirección de nuestro blog
      getLanguageFromPath: true,
      },
    ],
    },
  },
  ],
};

multilingual-blog/
├── blog/
│   ├── my-first-article/
│   │   ├── index.en.md
│   │   └── index.es.md
│   ├── another-article/
│   │   ├── index.en.md
│   │   └── index.es.md
│   └── a-third-one/
│       ├── index.en.md
│       └── index.es.md
├── ...

---
title: My first article 
date: "2022-03-17"
---

# Content of my first article

Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, perferendis a delectus nemo ad iure.  
Magni inventore ipsam ut nihil in maiores, culpa ipsum odit suscipit distinctio aut hic optio totam nemo tenetur, sunt assumenda?

---
title: Mi primer artículo 
date: "2022-03-17"
---

# Contenido de mi primer artículo

Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, perferendis a delectus nemo ad iure.  
Magni inventore ipsam ut nihil in maiores, culpa ipsum odit suscipit distinctio aut hic optio totam nemo tenetur, sunt assumenda?

export interface IArticle {
  id: string; // El id creado por Gatsby
  html: string; // El contenido creado por gatsby-source-filesystem
  frontmatter: {
    title: string;     //
    date: string;      // Nuestras variables
    content: string;   //
  }
}

import React from "react";
import { graphql, PageProps } from "gatsby";
// Models
import { IArticle } from "models/Article";

type BlogPageProps = {
  articles: {
    nodes: IArticle[];
  };
};

const BlogPage: React.FC<PageProps<BlogPageProps>> = ({ data }) => {
  const articles = data.articles.nodes;
  return (
    <main>
      <h1>Blog</h1>
      {articles.map((article) => {
        const { title } = article.frontmatter;
        return (
          <article key={article.id}>
            <h2>{title}</h2>
            <hr />
          </article>
        );
      })}
    </main>
  );
};

export default BlogPage;

export const BlogPageQuery = graphql`
  query BlogPageQuery {
    articles: allMarkdownRemark {
      nodes {
        id
        frontmatter {
          title
          date
        }
      }
    }
  }
`;

# El nombre de la Query debe ser distinto para cada página.
export const BlogPageQuery = graphql`
  query BlogPageQuery($language: String!) {
    locales: allLocale(
      filter: { ns: { in: ["common"] }, language: { eq: $language } }
    ) {
      edges {
        node {
          ns
          data
          language
        }
      }
    }
  }
`

{
  "go_to_my_blog": "Go to my blog",
  "go_to_home": "Go to home",
  "my_articles": "My articles",
  "en": "English",
  "es": "Español"
}

{
  "go_to_my_blog": "Ir a mi blog",
  "go_to_home": "Ir a inicio",
  "my_articles": "Mis artículos",
  "en": "English",
  "es": "Español"
}

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      modules: [path.resolve(__dirname, "src"), "node_modules"],
    },
  });
};

import React from "react";
import { Helmet, useI18next, useTranslation } from "gatsby-plugin-react-i18next";
// Layout.module.css es un archivo de estilos muy básico que hice
import * as styles from "./Layout.module.css";

const Layout: React.FC = ({ children }) => {
  // language es el lenguaje activo en la página
  // languages es un arreglo con todos los lenguajes disponibles
  // changeLanguage es la función que nos permite cambiar de lenguaje
  const { language, languages, changeLanguage } = useI18next();
  // useTranslation() nos permite acceder a nuestras traducciones
  const { t } = useTranslation();
  return (
    <div>
      <Helmet>
        <title>Multilingual Blog</title>
      </Helmet>
      <header className={styles.header}>Multilingual Blog</header>
      <main className={styles.main}>{children}</main>
      <footer className={styles.footer}>
        {languages.map((lang) => (
          <a
            key={lang}
            href="#"
            className={lang === language ? styles.active : ""}
            onClick={(e) => {
              e.preventDefault();
              changeLanguage(lang);
            }}
          >
            {t(lang)}
          </a>
        ))}
      </footer>
    </div>
  );
};

export default Layout;

import React from "react";
import { graphql, PageProps } from "gatsby";
// Utilizar el Link de gatsby-plugin-react-i18next
// nos permite que las urls tengan el idioma que el usuario eligió
// sin la necesidad de tener que especificarlo
import { Link, useTranslation } from "gatsby-plugin-react-i18next";
// Components
import Layout from "components/Layout";

const HomePage: React.FC<PageProps> = ({}) => {
  const { t } = useTranslation();
  return (
    <Layout>
      <Link to="/blog">
        <h1>« {t("go_to_my_blog")} »</h1>
      </Link>
    </Layout>
  );
};

export default HomePage;

export const HomeQuery = graphql`
  query Home($language: String!) {
    locales: allLocale(
      filter: { ns: { in: ["common"] }, language: { eq: $language } }
    ) {
      edges {
        node {
          ns
          data
          language
        }
      }
    }
  }
`;

// createFilePath nos va a ayudar a crear la URL de nuestro artículo.
const { createFilePath } = require("gatsby-source-filesystem");

exports.onCreateNode = ({ node, actions, getNode }) => {
  // createNodeField es la función que va a crear los nuevos nodos.
  const { createNodeField } = actions;

  if (node.internal.type === `MarkdownRemark`) {
    // createFilePath va a devolver un string de esta manera:
    // /article-name/index.lang/
    // El split(".") lo utilizo para separar el idioma del resto.
    const [slug, language] = createFilePath({ node, getNode }).split(".");
    // Nos va a quedar:
    // slug = /article-name/index
    // language = lang/

    // Creamos el nodo para el idioma.
    createNodeField({
      node,
      // Language es el nombre del campo que vamos a recoger al hacer la query
      name: "language",
      // Language tiene el valor de "lang/"
      // Este split parte el string en el "/" del final, devolviendonos solo "lang"
      value: language.split("/")[0],
    });

    // Creamos el nodo para el slug.
    createNodeField({
      node,
      // Slug es el nombre del campo que vamos a recoger al hacer la query
      name: "slug",
      // Slug tiene el valor de "/article-name/index"
      // Este split parte el string en cada "/"
      // Recogiendo el segundo valor del array nos devuelve solo "article-name"
      value: slug.split("/")[1],
    });
  }
};

// Path sirve para trabajar con las rutas de nuestros archivos.
const path = require("path");

exports.createPages = async ({ graphql, actions, reporter }) => {
  // Con createPage podemos crear cada página individualmente
  const { createPage } = actions;
  // Recogemos con graphql todos los archivos Markdown que hemos creado
  const result = await graphql(`
    {
      articles: allMarkdownRemark(limit: 1000) {
        nodes {
          id
          fields {
            slug
            language
          }
        }
      }
    }
  `);

  // Si ocurre algún error lo reportamos y detenemos la ejecución
  if (result.errors) {
    reporter.panicOnBuild(
      `There was an error loading the page content`,
      result.errors
    );
    return;
  }

  // articles va a ser un arreglo de artículos
  const articles = result.data.articles.nodes;
  // El template de nuestros artículos
  // Aún no lo hemos creado, lo vamos a hacer en el siguiente paso
  const articleTemplate = path.resolve(`./src/templates/article.tsx`);

  // Recorremos el arreglo de artículos
  articles.forEach((article) => {
    // Del artículo solo necesitamos el id, el slug y el lenguaje
    const { id } = article;
    const { slug, language } = article.fields;
    // Creamos la página para cada uno de ellos
    createPage({
      // path va a ser la URL del artículo
      path: `/${language}/blog/${slug}`,
      // component es el template que vamos a usar
      component: articleTemplate,
      // En context están los parámetros que podemos pasar a nuestro template
      // Nos van a servir para hacer las queries de cada artículo
      context: {
        id,
        slug,
        language,
      },
    });
  });
};

import React from "react";
import { graphql, PageProps } from "gatsby";
import { Link, useTranslation } from "gatsby-plugin-react-i18next";
// Models
import { IArticle } from "models/Article";
// Components
import Layout from "components/Layout";

type ArticlePageProps = {
  article: IArticle;
};

const ArticlePage: React.FC<PageProps<ArticlePageProps>> = ({ data }) => {
  const { t } = useTranslation();
  const article = data.article;
  const { title, date } = article.frontmatter;
  const { language } = article.fields;
  // Cambio la forma en la que se muestra la fecha según el idioma elegido
  const formattedDate = new Date(date).toLocaleDateString(language, {
    year: "numeric",
    month: "long",
    day: "numeric",
  });

  return (
    <Layout>
      <h1>{title}</h1>
      <small>{formattedDate}</small>
      <main dangerouslySetInnerHTML={{ __html: article.html }} />
      <hr />
      <Link to="/blog">
        <h1>« {t("go_to_my_blog")} »</h1>
      </Link>
    </Layout>
  );
};

export default ArticlePage;

export const ArticlePageQuery = graphql`
  query ArticlePageQuery($language: String!, $slug: String!) {
    locales: allLocale(
      filter: { ns: { in: ["common"] }, language: { eq: $language } }
    ) {
      edges {
        node {
          ns
          data
          language
        }
      }
    }

    article: markdownRemark(
      fields: { slug: { eq: $slug }, language: { eq: $language } }
    ) {
      html
      frontmatter {
        date
        title
      }
      fields {
        slug
        language
      }
    }
  }
`;

import React from "react";
import { graphql, PageProps } from "gatsby";
import { Link, useTranslation } from "gatsby-plugin-react-i18next";
// Components
import Layout from "components/Layout";
// Models
import { IArticle } from "models/Article";

type BlogPageProps = {
  articles: {
    nodes: IArticle[];
  };
};

const BlogPage: React.FC<PageProps<BlogPageProps>> = ({ data }) => {
  const { t } = useTranslation();
  const articles = data.articles.nodes;

  return (
    <Layout>
      <h1>{t("my_articles")}</h1>
      {articles.map((article) => {
        const { title } = article.frontmatter;
        const { slug } = article.fields;
        return (
          <Link to={`/blog/${slug}`} key={article.id}>
            <h2>{title}</h2>
          </Link>
        );
      })}
      <Link to="/">
        <h1>« {t("go_to_home")} »</h1>
      </Link>
    </Layout>
  );
};

export default BlogPage;

export const BlogPageQuery = graphql`
  query BlogPageQuery($language: String!) {
    locales: allLocale(
      filter: { ns: { in: ["common"] }, language: { eq: $language } }
    ) {
      edges {
        node {
          ns
          data
          language
        }
      }
    }

    articles: allMarkdownRemark(
      filter: { fields: { language: { eq: $language } } }
      sort: { fields: frontmatter___date, order: DESC }
    ) {
      nodes {
        id
        frontmatter {
          title
          date
        }
        fields {
          slug
          language
        }
      }
    }
  }
`;