Next.js项目报getStaticProps导出错误，商品列表及详情页功能实现求助

问题根因 #

你遇到的报错是因为pages/index.tsx作为Next.js的页面文件，必须默认导出页面组件，你当前是用的具名导出export const ProductById，不符合Next.js页面文件的导出规则，导致框架识别不到合法的页面默认组件，误认为你把getStaticProps绑定到了组件内部，所以抛出该错误。

修复方案 #

1. 修复index.tsx代码 #

将原来的具名导出的组件改为默认导出即可：

import fs from "fs/promises";
import path from "path";
import Link from "next/link";

export interface Product {
  id: string;
  title: string;
  description: string;
}
export interface Products {
  products: Product[];
}

// 此处改为默认导出
export default function ProductList(props: Products) {
  return (
    <ul>
      {props.products.map((pro) => (
        <li key={pro.id}>
          <Link href={`/${pro.id}`}>
            <a>{pro.title}</a>
          </Link>
        </li>
      ))}
    </ul>
  );
}

export const getStaticProps = async () => {
  console.log("Pre Generate ");
  const filePath = path.join(process.cwd(), "data", "dummy-backend.json");
  const readFile = await fs.readFile(filePath);
  const { products } = JSON.parse(readFile.toString());

  return {
    props: {
      products,
    },
  };
};

2. 修复[pid].tsx隐藏问题 #

你当前getStaticProps返回的props是{product: 商品对象}，但组件里直接从props根层级取字段会取不到值，调整如下：

import fs from "fs/promises";
import path from "path";
import { Fragment } from "react";
import { Product } from ".";
import { GetStaticProps } from "next";

export default function ProductDetail(props: {product: Product}) {
  return (
    <Fragment>
      <h1>{props.product.title}</h1>
      <h2>{props.product.description}</h2>
    </Fragment>
  );
}

export const getStaticProps: GetStaticProps = async (context) => {
  console.log("Pre Generate ");
  const { params } = context;
  const productId = params?.pid as string;
  const filePath = path.join(process.cwd(), "data", "dummy-backend.json");
  const readFile = await fs.readFile(filePath);
  const data = JSON.parse(readFile.toString());
  const product = data.products.find((pro: Product) => pro.id === productId);

  return {
    props: {
      product,
    },
  };
};

export const getStaticPaths = async () => {
  return {
    paths: [
      { params: { pid: "p1" } },
      { params: { pid: "p2" } },
      { params: { pid: "p3" } },
    ],
    fallback: false,
  };
};

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