尝试在vercel上部署next.js应用程序时遇到typeError
TypeError: items.map is not a function
at SearchResults (/vercel/path0/.next/server/app/exercises/page.js:568:29)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
Error occurred prerendering page "/exercises". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: items.map is not a function
at SearchResults (/vercel/path0/.next/server/app/exercises/page.js:568:29)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
字符串
我有一个组件SearchResults,它应该呈现使用getAll函数获取的练习项列表。
import React from "react";
import getAll from "@/lib/getAll";
import ResultItem from "./ResultItem";
import { Exercise } from "@prisma/client";
export default async function SearchResults() {
const items: Exercise[] = await getAll();
return (
<div>
<div>
{items.map((item: Exercise) => {
return (
<ResultItem
key={item.id}
id={item.id}
title={item.name}
image={item.image}
/>
);
})}
</div>
</div>
型
); }
export default async function getAll() {
const res = await fetch(`${process.env.CLIENT_URL}/api/exercises`);
if (!res.ok) return new Error("Failed to fetch data");
return res.json();
}
型
我在本地测试了组件,一切正常。即使在本地使用“next build”命令构建项目时,也不会显示任何错误或警告。我很感激任何关于如何解决这个错误的见解或建议。- 谢谢-谢谢
我尝试的是:我尝试创建一个typescript接口,而不是使用prisma客户端类型。硬编码项目变量中的值似乎工作,但这不是我要找的。
我希望发生的事情:我希望构建过程能够成功完成。
实际结果是:TypeError:items.map不是一个函数
1条答案
按热度按时间pqwbnv8z1#
在Vercel环境中,
process.env.CLIENT_URL
很可能是undefined
。在Vercel项目设置中仔细检查其值。另外,没有前缀为NEXT_CLIENT_
的变量不会暴露在客户端,我相信这就是您现在正在使用的。最后,items
没有导致items.map is not a function
的值,您可能还需要为此添加一个检查。我邀请您阅读有关NextJs环境变量的内容。