Como traducir os slugs nas miñas páxinas web

xov., 12 de xan. de 2023

Quería facer un blogue e preguntábame como internacionalizar o meu sitio incluíndo os seus urls. O desafío é facer que as páxinas que se crean no momento da compilación asígnense a cada un dos seus slugs traducidos.

Esta é a miña solución:

1. Cre un arquivo mdx para cada idioma, por exemplo:

data/blog/translate-the-slugs/translate-the-slugs.en.mdx
data/blog/translate-the-slugs/translate-the-slugs.es.mdx
data/blog/translate-the-slugs/translate-the-slugs.gl.mdx

2. Dentro de cada arquivo mdx, as cousas importantes son:

translate-the-slugs.en.mdx

---
title: 'How translate the slugs in my web pages?'
slug: 'translate-slugs-web-pages'
author: 'Xabier Lameiro'
category: 'Nextjs'
tags: ['intl']
locale: 'en'
excerpt: 'Translate the urls of my website, to have a 100% internationalised site using nextjs and static pages with mdxjs files.'
description: 'Translate the urls of my website, to have a 100% internationalised site using nextjs and static pages with mdxjs files.'
image: '/posts/translate-slugs-web-pages.png'
alternate: [{ lang: 'es', url: 'como-traducir-las-urls' }, { lang: 'gl', url: 'como-traducir-as-urls' }]
---
# How translate the slugs in my web pages?
<Date date="01-12-2023" />

3. Con getStaticPaths creamos as páxinas para cada idioma:

No meu caso creo páxinas diferentes para cada etiqueta e categoría, pero ti podes crear as páxinas que queiras.

translate-the-slugs.en.mdx

export const getStaticPaths = async ({ locales }: { locales: string[] }) => {
    const posts = await getAllPosts();
    const tags = posts.reduce((...code) => {
            const paths = post.meta.tags.map((tag: string) => ({
                params: {
                    category: tag.toLowerCase(),
                    slug: post.meta.slug,
                },
                locale: post.meta.locale,
            }));
            return [...acc, ...paths];
        },
        []
    );
    const categories = posts.map((...code) => ({
            params: {
                category: post.meta.category.toLowerCase(),
                slug: post.meta.slug,
            },
            locale: post.meta.locale,
        })
    );
    return {
        paths: [...tags, ...categories],
        fallback: 'blocking',
    };
};

4. Con getStaticProps obtemos os datos do arquivo mdx:

Cando se executa getStaticPaths, pasa o locale a getStaticProps, neste momento temos a categoría, o slug e o locale, polo que podemos obter os datos do arquivo mdx.

translate-the-slugs.en.mdx

export const getStaticProps = async (data: {
    params: {
        category: string;
        slug: string;
    };
    locale: string;
}) => {
    const {
        params: { category },
        locale,
    } = data;
    const post = await getPostBySlug(data);
    const mdxSource = await serialize(post.content);
    const { categories, tags } = await getAllCategories(locale);
    const posts = await getPostsByLocaleAndCategory(locale, category);
    return {
        props: {
            tags,
            categories,
            posts,
            post: {
                ...post,
                content: mdxSource,
            },
        },
    };
};

4.1. Obteña os datos do arquivo mdx coa axuda de gray-matter e fs:

Necesitamos crear funcións que nos axuden a obter os datos do arquivo mdx.

findPostBySlug

getPostBySlug

const findPostBySlug = (slug: string | { params: { slug: string } }) => {
    let paths = glob.sync(`${POST_PATH}/**/*.mdx`);
    if (typeof slug === 'object') {
        slug = slug.params.slug;
    } else {
        slug = slug.split('/')[slug.split('/').length - 1];
    }
    const [route] = paths.filter((path) => {
        const document = fs.readFileSync(path, 'utf8');
        const { data } = matter(document);
        const fileName = path.split('/').pop();
        if (data.slug === slug || fileName == `${slug}.mdx`) {
            return true;
        }
    });
    return matter(fs.readFileSync(route, 'utf8'));
};

4.2. Serialice o arquivo mdx coa axuda de @next-mdx-remote/serialize:

import { serialize as sz } from 'next-mdx-remote/serialize';
/**
 * @description Serialize MDX file with Code Hike.
 *
 * @example
 *     serialize('# Hello World');
 *     returns { content: '...', meta: {...} }
 *
 * @param {string} mdx - MDX file.
 * @returns {Object} - Object with MDX content and meta data.
 */
export const serialize = (mdx: string) =>
    sz(mdx, {
        mdxOptions: {
            remarkPlugins: [[remarkCodeHike, { autoImport: false, theme }]],
            useDynamicImport: true,
        },
    });

4.3. Obteña os datos finalmente no seu compoñente para a capa de presentación.

[slug].tsx

    const PostPage = ({ post, tags, categories, posts }: Props) => {
        ...print your magic here...
    };

Pode ver o resultado mirando a URL desta publicación e cambiando o idioma na configuración e mirando a mesma publicación novamente.