Crear metadatos en el enrutamiento dinámico de Next.js

Mientras buscaba cómo añadir metadata para la optimización en motores de búsqueda, encontré en velog el artículo de Doeunnkimm y estaba inyectando los metadatos de forma estática.

Al empezar a publicar, quise poner metadata diferente para cada post en el enrutamiento dinámico.

Así que, a modo de repaso, lo dejo escrito una vez.

1. Código

Primero, el código obtenido del velog anterior es el siguiente.

// Primero se configuran los metadatos básicos necesarios.
const META = {
  title: "블로그 제목",
  siteName: "사이트이름",
  description: "블로그에 대한 대략적인 설명",
  keyword: ["배열", "형태의", "키워드"],
  url: "https://sample.kr",
  googleVerification: "xxx", //구글 서치콘솔
  naverVerification: "xxx", //네이버 서치어드바이저
  ogImage: "https://sample.kr/assets/thumbnail.png", // 썸네일,
} as const;

// Se configura la metadata utilizando la función getMetadata.
// Con la siguiente función basta para generar la mayoría de los metadatos necesarios en la mayoría de los sitios.
export const getMetadata = (metadataProps?: generateMetadataProps) => {
  const { title, description, asPath, ogImage } = metadataProps || {};

  const TITLE = title ? `${title} | 블로그 제목` : META.title;
  const DESCRIPTION = description || META.description;
  const PAGE_URL = asPath ? asPath : "";
  const OG_IMAGE = ogImage || META.ogImage;

  const metadata: Metadata = {
    metadataBase: new URL(META.url),
    alternates: {
      canonical: PAGE_URL,
    },
    title: TITLE,
    description: DESCRIPTION,
    keywords: [...META.keyword],
    openGraph: {
      title: TITLE,
      description: DESCRIPTION,
      siteName: TITLE,
      locale: "ko_KR",
      type: "website",
      url: PAGE_URL,
      images: {
        url: OG_IMAGE,
      },
    },
    verification: {
      google: META.googleVerification,
      other: {
        "naver-site-verification": META.naverVerification,
      },
    },
    twitter: {
      title: TITLE,
      description: DESCRIPTION,
      images: {
        url: OG_IMAGE,
      },
    },
    icons: {
      icon: "/favicon/favicon.ico",
    },
  };

  return metadata;
};

Y se llama a este código desde layout.tsx para utilizarlo.

Al generar la metadata y exportarla, se crean los metadatos de la página principal.

import "./globals.css";
import { Metadata } from "next";
import { getMetadata } from "@/utils/getMetadata";

// Se exporta el objeto de metadata
export const metadata: Metadata = {
  // Se trae el objeto utilizando el operador de propagación ..,
  ...getMetadata(),

  // Si se quiere usar otro título, se puede hacer de la siguiente manera.
  ...getMetadata({ title: "다른제목" }),
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ko">
      <body className="h-svh">
        <div>
          <div className="mx-auto max-w-7xl p-6 lg:px-8">{children}</div>
        </div>
      </body>
    </html>
  );
}

Si entras en tu propia página web, pulsas la tecla F12 y miras la etiqueta <head>, puedes comprobar la meatadata.

Crear metadatos en el enrutamiento dinámico de Next.js-1

2. Enrutamiento dinámico y metadata

En el enrutamiento dinámico utilicé la función generateMetadata.

La explicación sobre esto está en el blog anterior o en la documentación oficial de Nextjs.

Crear metadatos en el enrutamiento dinámico de Next.js-2

Lo esencial de este artículo es que, al crear metadata, se puede utilizar el objeto que se usa en el enrutamiento dinámico.

Yo utilicé un Json que contenía el slug y la lista de posts para crear los metadatos.

export async function generateMetadata({
  params,
}: {
  params: { slug: string };
}) {
  const { slug } = await params;

  // Se llama al json de la lista de categorías
  const categoryData = fs.readFileSync(categoryJsonPath, "utf-8");
  const categorys: postCardFrontMatter[] = JSON.parse(categoryData);

  // Se busca y devuelve un solo elemento cuyo slug y url sean iguales a los actuales.
  const baseMetaData = categorys.find(
    (category) => category.postUrlPath === slug
  );

  // Se configura la metadata utilizando esto
  const metadata: Metadata = {
    ...getMetadata({
      title: baseMetaData?.data.title,
      description: baseMetaData?.data.description,
      asPath: `https://earthscience.kr/posts/${slug}`,
      ogImage:
        baseMetaData?.data.thumbnail &&
        `https://earthscience.kr/posts/${slug}/${baseMetaData.data.thumbnail}`,
    }),
  };
  return metadata;
}