next.js “语法错误：在生产构建中，位置0”处的JSON中出现意外标记<

yfjy0ee7 于 2023-08-04 发布在其他

关注(0)|答案(2)|浏览(94)

过去一周我一直在想办法我找不到一个答案，也想不出一个合理的解释，为什么当我在localhost上开发时，一切都能正常工作，但是在Vercel上开发总是失败。
所以我使用的是Next 13.4.12，我的所有设置如下：

app/projects/page.tsx
app/API/projects/route.ts

代码如下：

const ProjectList = async () => {
  const baseUrl =
    process.env.NODE_ENV === "development"
      ? "http://localhost:3000"
      : "https://www.example.com";

  const response = await fetch(`${baseUrl}/api/projects`);
  const data = await response.json();
  const projects: Project[] = data.projects;

  return (
    <div>
      {projects?.map((project) => <h1>{project?.name}</h1>)} // etc. etc.
    </div>
  );
};

个字符
我试过使用和不使用JSON. stringify。一切都像我在本地主机上所期望的那样工作。但是，当我尝试部署到Vercel时，我得到以下错误：

SyntaxError: Unexpected token < in JSON at position 0
11:13:00.318        at JSON.parse (<anonymous>)
11:13:00.318        at parseJSONFromBytes (node:internal/deps/undici/undici:6571:19)
11:13:00.318        at successSteps (node:internal/deps/undici/undici:6545:27)
11:13:00.319        at node:internal/deps/undici/undici:1211:60
11:13:00.319        at node:internal/process/task_queues:140:7
11:13:00.319        at AsyncResource.runInAsyncScope (node:async_hooks:203:9)
11:13:00.319        at AsyncResource.runMicrotask (node:internal/process/task_queues:137:8)
11:13:00.319        at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
11:13:00.336    
11:13:00.336    Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
11:13:00.336    SyntaxError: Unexpected token < in JSON at position 0
11:13:00.336        at JSON.parse (<anonymous>)
11:13:00.336        at parseJSONFromBytes (node:internal/deps/undici/undici:6571:19)
11:13:00.337        at successSteps (node:internal/deps/undici/undici:6545:27)
11:13:00.340        at node:internal/deps/undici/undici:1211:60
11:13:00.340        at node:internal/process/task_queues:140:7
11:13:00.340        at AsyncResource.runInAsyncScope (node:async_hooks:203:9)
11:13:00.340        at AsyncResource.runMicrotask (node:internal/process/task_queues:137:8)
11:13:00.340        at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
11:13:00.340    
11:13:00.340    > Export encountered errors on following paths:
11:13:00.340        /page: /
11:13:00.340    - info Generating static pages (5/5)
11:13:00.398    Error: Command "npm run build" exited with 1

型
请帮助我，因为它让我疯狂！谢谢你，谢谢
我试过阅读文档，观看Youtube视频等。但是不能真正找到任何与使用API的新应用程序路由器相关的内容。

next.js

来源：https://stackoverflow.com/questions/76772319/syntaxerror-unexpected-token-in-json-at-position-0-on-production-build

2条答案

按热度按时间

bwleehnv1#

不要从服务器组件调用内部API Route，而是将逻辑移动到那里，如下所示：

const ProjectList = async () => {
  const projectsCollection = collection(db, "projects");
  const projectsSnapshot = await getDocs(projectsCollection);

  // Map the documents in the collection to an array of project objects
  const projects = projectsSnapshot.docs.map((doc) => ({
    id: doc.id,
    ...doc.data(),
  }));

  return (
    <div>
      {projects.map((project, idx) => (
        <h1 key={idx}>{project?.name}</h1>
      ))}
    </div>
  );
};

字符集
API路由很可能被设计为由客户端组件或其他应用程序调用，而不是由服务器组件调用。因为服务器组件将在构建时调用API路由，而此时可能没有应用程序在运行。
它们要求您不要像在这里一样，以前面的等效方式获取数据。

赞(0）回复(0）举报 2023-08-04

s71maibg2#

我解决了这个问题，觉得自己很笨...
为了解决这个问题，我不得不首先将API推向生产环境。然后创建一个用于获取数据的分支。
当试图在build中获取时，localhost或domainname.com都无法获取API，因为它首先不是live。domainname.com/api/projects需要先上线。

赞(0）回复(0）举报 2023-08-04

我来回答

next.js “语法错误：在生产构建中，位置0”处的JSON中出现意外标记<

2条答案

相关问题

热门标签

最新问答