Следующие 14 Создание метаданных

Недавно я начал изучать Next. И я просто не понимаю, почему у меня не может быть параметра Id. установить в заголовок.

id получает строку.

Мой макет настроен правильно.

//src/app/characters/[id]/page.tsx

import graphqlClient from "@/lib/client";
import GET_CHARACTER from "@/lib/graphql/character";
import { CharacterDetail } from "@/components/characters";
import { notFound } from "next/navigation";
import { Metadata } from "next";

type Props = {
  params: {
    id: string;
  };
};
export async function generateMetaData({ params }: Props): Promise<Metadata> {
  const id = params.id;
  console.info(id);
  return { title: id };
}

const CharacterPage = async ({ params }: Props) => {
  try {
    await generateMetaData({ params });
    const { id } = params;
    const {
      data: { character },
    } = await graphqlClient.query<{ character: Character }>({
      query: GET_CHARACTER,
      variables: { id },
    });
    return (
      <div className = "container">
        <CharacterDetail character = {character} />
      </div>
    );
  } catch (error) {
    return notFound();
  }
};

export default CharacterPage;

Моя планировка. src/приложение/layout.tsx

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import React from "react";
import { HeaderLayout, FooterLayout, MainLayout } from "@/components/layout";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: {
    template: "%s | Rick and Morty",
    default: "Rick and Morty",
  },
  description: "Rick and Morty by ortima",
};
interface RootLayoutProps {
  children: React.ReactNode;
}
const RootLayout: React.FC<RootLayoutProps> = ({ children }) => {
  return (
    <html lang = "en">
      <body className = {inter.className}>
        <HeaderLayout />
        <MainLayout>{children}</MainLayout>
        <FooterLayout />
      </body>
    </html>
  );
};
export default RootLayout;

Я пытался использоватьgenerStaticParams, но безуспешно.

typescript graphql metadata dynamically-generated next.js14

05.05.2024 13:40

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

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

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

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

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

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

TypeScript против JavaScript

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

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

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

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

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

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

Ответы 1

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

generateMetaData — неправильное имя, просто измените его на generateMetadata

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const id = params.id;
  console.info(id);
  return { title: id };
}

08.06.2024 10:31

Другие вопросы по теме

HotChocolate И фильтрация в DateTime Enumerable

Как добиться соответствия между Graphql в Virtuoso и Python

Оператор GraphQL `in` не работает при использовании статического веб-приложения Azure

Возможность получения нескольких метаполей через GraphQL в Shopify

Обновление запросов в apollo-клиенте независимо от входных параметров

Запрос GraphQL всегда имеет код 403 даже при наличии действующего токена JWT

Как обойти ограничение на количество символов для позиции Shopify при создании варианта продукта?

Поддерживает ли API GraphQL GitHub фильтрацию файлов/деревьев по таким базовым вещам, как имя?

График конечной точки не работает в приложении Spring Boot

Работа с нулевыми значениями в ответе API GraphQL

Следующие 14 Создание метаданных

Ответы 1

Другие вопросы по теме

Похожие вопросы