Как добавить динамический URL-адрес в канонический тег в Next.js 14.2.4

Я пытаюсь добавить динамический URL-адрес к своим динамическим маршрутам Next.js.

Я использую страницу, отображаемую на сервере, для генерации метаданных:

export const metadata: Metadata = {
   title: `InterviewQA |  ItsIndianGuy`,
   description:
      "Explore interview questions in various programming languages such as JavaScript, Python, C++ and more. Enhance your preparation with comprehensive language-specific content.",
   alternates: {
      canonical: "https://itsindianguy.in/interview-qa",
   },
};

Динамическая страница, для которой я хочу добавить SEO, находится на картинке.

Проблема в том, что я добавил его на статические страницы, но когда дело доходит до динамических страниц, как мне его добавить?

Потому что я не могу использовать перехватчики для получения пути на страницах, отображаемых на сервере.

Что я могу попробовать дальше?

typescript next.js seo next.js14

04.07.2024 13:56

Зод: сила проверки и преобразования данных

Сегодня я хочу познакомить вас с библиотекой Zod и раскрыть некоторые ее особенности, например, возможности валидации и трансформации данных, а также...

Как заставить Remix работать с Mantine и Cloudflare Pages/Workers

Мне нравится библиотека Mantine Component , но заставить ее работать без проблем с Remix бывает непросто.

Угловой продивер

Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.

TypeScript против JavaScript

TypeScript vs JavaScript - в чем различия и какой из них выбрать?

Синхронизация localStorage в масштабах всего приложения с помощью пользовательского реактивного хука useLocalStorage

Не все нужно хранить на стороне сервера. Иногда все, что вам нужно, это постоянное хранилище на стороне клиента для хранения уникальных для клиента...

Что такое ленивая загрузка в Angular и как ее применять

Ленивая загрузка - это техника, используемая в Angular для повышения производительности приложения путем загрузки модулей только тогда, когда они...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете добавить это вверху своей динамической страницы:

import type { Metadata, ResolvingMetadata } from 'next'

type Props = {
   params: { slug: string }
   searchParams: { [key: string]: string | string[] | undefined }
 }

 export async function generateMetadata(
  { params, searchParams }: Props,
    parent: ResolvingMetadata
   ): Promise<Metadata> {
  // read route params
   const slug = params.slug

 // fetch data or use local json data
 const product = await fetch(`https://.../${slug}`).then((res) => res.json())


return {
   title: product.title,
 }
}

Большое спасибо, я изо всех сил пытался найти точное решение. Я читал документацию, но мне она была не совсем понятна.

— 04.07.2024 14:44

04.07.2024 14:19