我最近在 Next.js 中从使用页面路由器迁移到应用程序路由器，并相应地从 _app.tsx 转移到布局.tsx。以下是显示使用页面路由器 (①) 的旧设置和使用应用程序路由器 (②) 的新设置的片段。
使用页面路由器时，我在 _app.tsx 中实现了 SEO 元数据，例如 Twitter、Facebook 和 OpenGraph 设置。我应该如何调整它以与应用程序路由器设置一起使用？我应该将 DefaultSeo 组件或等效的 SEO 元数据放置在新结构中的哪里？
①
import { ReactElement, ReactNode } from "react";
import { NextPage } from "next";
import Head from "next/head";
import { DefaultSeo, DefaultSeoProps } from "next-seo";
import type { AppProps } from "next/app";
import { Providers } from "@/components/providers/providers";
import "@/i18n";
import { FB_PIXEL_ID } from "@/lib/fbmeta/metaPixel";
type NextPageWithLayout = NextPage & {
getLayout?: (page: ReactElement) => ReactNode;
};
type AppPropsWithLayout = AppProps & {
Component: NextPageWithLayout;
};
const defaultSeo: DefaultSeoProps = {
title: "test",
defaultTitle: "test",
description: "test",
openGraph: {
type: "website",
url: process.env.NEXT_PUBLIC_BASE_URL,
images: [
{
url: `${process.env.NEXT_PUBLIC_BASE_URL}/ogp.png`,
width: 1200,
height: 630,
alt: "test",
},
],
},
twitter: {
handle: "****",
site: "*****",
},
facebook: {
appId: `${process.env.NEXT_PUBLIC_FACEBOOK_APP_ID}`,
},
};
function App({ Component, pageProps: { session, ...pageProps } }: AppPropsWithLayout) {
return (
<>
<Head>
<DefaultSeo {...defaultSeo} />
<title>{defaultSeo.title}</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
/>
<link rel="icon" href="/favicons/favicon.png" />
<noscript>
<img
style={{ display: "none" }}
src={`https://www.facebook.com/tr?id=${FB_PIXEL_ID}&ev=PageView&noscript=1`}
/>
</noscript>
</Head>
<Providers>
<Component {...pageProps} />
</Providers>
</>
);
}
export default App;
②
import { Metadata } from "next";
import { Providers } from "@/components/providers/providers";
export const metadata: Metadata = {
title: "test",
description: "test",
};
type Props = Readonly<{
children: React.ReactNode;
}>;
export default function RootLayout(props: Props) {
return (
<html suppressHydrationWarning>
<head></head>
<body>
<Providers>{props.children}</Providers>
</body>
</html>
);
}
我应该将 DefaultSeo 组件或等效的 SEO 元数据放置在新结构中的哪里？
您不会在根布局的
export const metadata = {}export function generateMetadata() {}/app/layout.tsx查看有关它的官方文档https://nextjs.org/docs/app/building-your-application/optimizing/metadata#ordering