Next.js 13.4中getStaticProps无法正常工作的原因咨询

• 核心原因：你当前使用的是Next.js 13.4的App Router（文件命名为page.js），而getStaticProps是Pages Router（pages/目录下的页面文件）专属的静态生成API，App Router体系已不再支持该函数。

• 替代方案与修复要点：

  1. App Router下的静态数据获取：
     App Router默认支持静态渲染，直接在组件顶层使用fetch即可实现预取数据，Next.js会自动将数据构建到静态页面中：

     import react from 'react';
     
     // 组件顶层直接发起请求，自动静态处理
     const data = await fetch('目标API地址').then(res => res.json());
     
     export default function Page() {
         return (
             <div>Hello, {data.content}</div>
         );
     }
     

     若需增量静态再生，可通过revalidate配置：

     export const revalidate = 300; // 每5分钟重新生成页面
     
     export default async function Page() {
         const data = await fetch('目标API地址', { next: { revalidate: 300 } });
         const result = await data.json();
         return <div>{result.title}</div>;
     }
     

  2. 切换回Pages Router使用getStaticProps：
     若要继续使用getStaticProps，需将页面文件移至pages/目录下（比如pages/index.js），同时必须保证函数返回包含props的对象，还要修正你代码里的函数名拼写错误（getStaticPros应为getStaticProps）：

     import react from 'react';
     import { NextPage } from "next";
     
     const HomePage: NextPage = (props) => {
         return (
             <div>Hello, {props.msg}</div>
         );
     };
     
     export default HomePage;
     
     export async function getStaticProps() {
         console.log("getStaticProps执行");
         // 必须返回包含props的结构
         return {
             props: {
                 msg: "World"
             }
         };
     }
     

内容的提问来源于stack exchange，提问作者MHSN27 MHSN