Next JS 中的页面预渲染发生错误 [重复]
Posted
技术标签:
【中文标题】Next JS 中的页面预渲染发生错误 [重复]【英文标题】:Error occurred prerendering page in Next JS [duplicate] 【发布时间】:2021-09-03 23:01:35 【问题描述】:我在下一个 JS 中(在 pages/api
文件夹中)创建了一个 API,并在 pages
文件夹中的页面上使用了它。
当我在本地主机(开发阶段)运行时,可以正确调用 API。但是当我部署到 Vercel 时,构建过程中出现错误。
这是我调用 pages/api
文件夹中的 API 时的代码
export const getStaticProps = async () =>
const baseUrlDribble = 'https://api.dribbble.com/v2';
const baseUrl = process.env.NODE_ENV === 'production' ?
'https://jovanka-samudra.vercel.app/api' : 'http://localhost:3000/api';
const resShots = await fetch(`$baseUrlDribble/user/shots?access_token=$process.env.TOKEN_DRIBBLE&page=1&per_page=9`);
const shots = await resShots.json();
const resResult = await fetch(`$baseUrl/projects`);
const result = await resResult.json();
const projects = result.data.projects;
return
props:
shots,
projects,
,
revalidate: 1,
这是从数据库(pages/api/projects
文件夹)检索数据的 API 代码
import ProjectService from "@services/ProjectService";
import connectDB from "@utils/connectDB";
import projectValidator from "@validators/project";
import ClientError from '@exceptions/ClientError';
const handler = async (req, res) =>
const projectService = new ProjectService();
if (req.method === 'GET')
try
const projects = await projectService.getProjects();
return res.status(200).json(
success: true,
length: projects.length,
data:
projects
);
catch (error)
return res.status(500).json(
success: false,
message: error.message,
);
else if (req.method === 'POST')
...
return res.status(404).json(
success: false,
message: 'Method not alowed'
);
export default connectDB(handler);
服务/ProjectService 文件夹
import InvariantError from '@exceptions/InvariantError';
import NotFoundError from '@exceptions/NotFoundError';
import Project from '@models/Project';
class ProjectService
async getProjects()
const projects = await Project.find().sort( 'createdAt': -1 );
return projects;
...
export default ProjectService;
【问题讨论】:
也许问题是您在/pages/api/projects
中的文件,而不是在 fetch 调用中。可以分享一下文件吗?
我已经更新了,也许你可以看看@CássioLacerda
这是否回答了您的问题:Fetch error when building Next.js static website in production?您应该直接在 getStaticProps 中使用 API 路由中的逻辑,而不是从内部 API 中获取。
【参考方案1】:
您不应该从 getStaticProps 获取内部 API 路由 - 相反,您可以直接在 getStaticProps 中编写 API 路由中的获取代码。
https://nextjs.org/docs/basic-features/data-fetching#write-server-side-code-directly
【讨论】:
以上是关于Next JS 中的页面预渲染发生错误 [重复]的主要内容,如果未能解决你的问题,请参考以下文章