如何将getInitialProps替换为getStaticProps并兼顾SEO与Props传递

Next.js 规定单个页面文件只能使用一种数据获取方法，你只需要完全移除homePage.getInitialProps的定义，启用并完善getStaticProps即可，同时调整返回结构适配你的_app.tsx逻辑，保证SEO属性和业务数据正常传递。

具体修改步骤 #

• 直接删除旧的homePage.getInitialProps代码块
• 启用并完善getStaticProps，确保返回的props包含SEO相关配置和业务请求数据
• 页面组件声明接收传递过来的Props（如果需要直接使用的话）

修改后的完整代码 #

index.tsx

import type { NextPage } from 'next';

// 声明组件接收的Props类型
const HomePage: NextPage<{
  data: any;
  pageProps: {
    pageName: string;
    pageDescription: string;
    pageClassName: string;
    mobileHeaderTitle: MobileMenuPageTitleEnum;
  }
}> = ({ data, pageProps }) => {
  // 可直接使用data和pageProps中的属性，用于页面渲染或SEO设置
  return (
    <>
      {/* JSX代码 */}
    </>
  );
};

export const getStaticProps = async () => {
  // 定义SEO相关页面属性
  const pageProps = {
    pageName: "abc",
    pageDescription: dataPageDescription.home,
    pageClassName: "home",
    mobileHeaderTitle: MobileMenuPageTitleEnum.home
  };
  // 执行业务数据请求
  const data = await request(HomePage);
  // 返回所有需要传递的Props
  return { props: { data, pageProps } };
};

export default HomePage;

_app.tsx

import type { AppProps } from 'next/app';
import Head from 'next/head';

function Website({ Component, pageProps }: AppProps) {
  const { data, pageProps: seoProps } = pageProps;

  return (
    <>
      {/* 全局统一处理SEO */}
      <Head>
        <title>{seoProps.pageName}</title>
        <meta name="description" content={seoProps.pageDescription} />
      </Head>
      {/* 将数据传递给页面组件 */}
      <Component data={data} pageProps={seoProps} />
    </>
  );
}

export default Website;

关键说明 #

• SEO适配：可以在_app.tsx里通过seoProps统一设置全局SEO标签，也可以在页面组件内单独处理，静态生成的HTML对搜索引擎抓取更友好
• Props流转：getStaticProps返回的所有数据会完整传递到_app.tsx的pageProps中，再由你分发给页面组件，确保数据正常传递
• 静态生成特性：getStaticProps在构建阶段执行，生成静态HTML文件，兼顾性能和SEO需求

内容的提问来源于stack exchange，提问作者Jatin Chawla