我不断收到此服务器错误 - 错误：默认导出不是页面中的 React 组件：“/products/all”

Question

我想为我在 server.json 中列出的所有产品创建一个页面（以下是文件）

{ “产品”：[

{
  "slug": "live-by-the-sun-love-by-the-moon",      
  "title": "Live by the sun, love by the moon.",
  "price": "40,99",
  "published_at": "2021-01-22 16:35:40",
  "thumbnail": "https://storage.googleapis.com/golden-wind/nextlevelweek/05-podcastr/opensource.jpg",
  "description": "<p>Camiseta feita com tecido totalmente artesanal, fabricada com algodão 99%</p>"
},
{
  "slug": "believe-in-your-visions",       
  "title": "Believe in your visions",
  "price": "59,90",
  "published_at": "2021-01-15 13:00:00",
  "thumbnail": "https://storage.googleapis.com/golden-wind/nextlevelweek/05-podcastr/funcional.jpg",
  "description": "<p>Camiseta feita com tecido totalmente artesanal, fabricada com algodão 99%, disponível em branco, azul e preto</p>\n"
}

] }

但我不断收到此错误，我认为我的 /pages/products/all.tsx 文件有问题（如下），我不知道它是什么。

import styles from "./all.module.scss"

从“../../../server.json”导入产品 从“下一个/链接”导入链接

输入产品 = [{

slug: string; 
title: string; 
price: string; 
published_at: string; 
thumbnail: string; 
description: string;

}]

输入产品列表 = { 产品：产品 }

导出函数 allProducts({ products }: ProductList) {

{products.map(product =>
    <div key={product.slug} className={styles.wholeProduct}>
        <Link href={`products/${product.slug}`}>
            <a>
                <div className={styles.productRow}>
                    <div className={styles.productColumnImage}>
                        {product.thumbnail}
                    </div>
                    <div className={styles.productColumn}>
                        {product.title} {product.price}
                    </div>
                </div>
            </a>
        </Link>
    </div>
)}

}

我对 nextJS 有点陌生，所以如果这是一个愚蠢的问题，我很抱歉。

Answer 1

您的组件文件没有默认导出。将您的导入更改为：

import {allProducts as products} from "../../../server.json"

或将其设为default 导出：

export default function allProducts({ products }: ProductList) {