我最近开始学习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.log(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/app/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;
我尝试使用generateStaticParams，但没有成功
generateMetaDatagenerateMetadata