Nextjs/Vercel 错误：仅支持绝对 URL。我的路由参数中的“.json”来自哪里？

Question

问题： 我是 Next.js（1 个月）和 Vercel（1 天）的新手，他们之间似乎在我的 search 路由上的网址中插入了 .json，导致它们失败并出现错误：

[GET] /_next/data/9MJcw6afNEM1L-eax6OWi/search/hand.json?term=hand
10:21:52:87
Function Status:None
Edge Status:500
Duration:292.66 ms
Init Duration: 448.12 ms
Memory Used:88 MB
ID:fra1:fra1::ldzhz-1644484912454-0a30b71b6c90
User Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:97.0) Gecko/20100101 Firefox/97.0

TypeError: Only absolute URLs are supported    
at getNodeRequestOptions (/var/task/node_modules/next/dist/compiled/node-fetch/index.js:1:61917)    
at /var/task/node_modules/next/dist/compiled/node-fetch/index.js:1:63448    
at new Promise (<anonymous>)    
at Function.fetch [as default] (/var/task/node_modules/next/dist/compiled/node-fetch/index.js:1:63382)    
at fetchWithAgent (/var/task/node_modules/next/dist/server/node-polyfill-fetch.js:38:39)    
at getServerSideProps (/var/task/.next/server/chunks/730.js:238:28)    
at Object.renderToHTML (/var/task/node_modules/next/dist/server/render.js:566:26)    
at processTicksAndRejections (internal/process/task_queues.js:95:5)    
at async doRender (/var/task/node_modules/next/dist/server/base-server.js:855:38)    
at async /var/task/node_modules/next/dist/server/base-
server.js:950:28

2022-02-10T09:21:53.788Z    994c9544-0bbe-4a68-af83-f0e4c322151e    ERROR   
Error: Your `getServerSideProps` function did not return an object. Did you forget to add a `return`?
at Object.renderToHTML (/var/task/node_modules/next/dist/server/render.js:592:19)    
at processTicksAndRejections (internal/process/task_queues.js:95:5)    
at async doRender (/var/task/node_modules/next/dist/server/base-server.js:855:38)    
at async /var/task/node_modules/next/dist/server/base-server.js:950:28    
at async /var/task/node_modules/next/dist/server/response-cache.js:63:36 {  page: '/search/[term]'}

RequestId: 994c9544-0bbe-4a68-af83-f0e4c322151e Error: Runtime exited with error: exit status 1
Runtime.ExitError

虽然浏览器应该说https://.../search/hand。 不过，在我的本地服务器构建上没有发生这样的事情，而且效果很好。

背景/代码片段： 搜索路由是唯一使用 SSR 的路由，也是唯一存在此问题的路由。这是一条动态路由，因此它似乎是生产中的下一个，或者 vercel 需要某种 json - 可能是预渲染的内容 - 并且正在用 json 替换路由 URL。

我还不得不使用 VERCEL_URL 环境变量来为获取请求准备一个 URL，所以这也可能会弄乱 URL，但是错误消息中的 .json 让我不这么认为，因为搜索不应该是 pre -渲染。

搜索路径的页面结构（索引导入 [term] 中的组件并定义自己的 getServerSide 属性以适应不带参数的搜索路径）：

|-Search
  |- [term].js
  |- Index.js

[term].js的代码：

...
export default function Search({results, currentSearch}){
...
}

export async function getServerSideProps(req) {
  const { criteria, page } = req.query;
  const { term } = req.params || { term: '' };
  try {
    const data = await fetch(`${process.env.VERCEL_URL}/api/search/${term}?criteria=${criteria || 'name'}&page=${page}`);
    const searchRes = await data.json();
    return {
      props: {
        results: searchRes.data,
        currentSearch: searchRes.query
      }
    }
  } catch (e) {
    console.log(e)
  }
}

Index.js 类似：

import Search from "./[term]";
export default Search;

export async function getServerSideProps(req) {
  const { criteria, page } = req.query;
  const { term } = req.params || { term: '' };
  if(!term){
    return {
      props: {
        results: [],
        currentSearch: {}
      }
    }
  }
  try {
    const data = await fetch(`${process.env.VERCEL_URL}/api/search/${term}?criteria=${criteria || 'name'}&page=${page}`);
    const searchRes = await data.json();
    return {
      props: {
        results: searchRes.data,
        currentSearch: searchRes.query
      }
    }
  } catch (e) {
    console.log(e)
  }
}

我尝试从中获取的 API 已确认可以正常工作，因此此问题与页面有关，或者 .json 从路由器参数提供给 fetch 方法。

Answer 1

原来VERCEL_URL 实际上是一个绝对 URL（它不包含协议）。我必须部署 console.log 语句才能找到它。有点不好意思，错过了docs。

• .json 实际上不在query 或params 中，因此不在提取请求中。获取失败，因为 url 没有协议。
• 页面url中的.json必须来自Next的内部操作，并不代表页面正在提前构建。是的，它正在使用一些 json 进行渲染，但我认为 json 表示预渲染页面（SSG/ISR）是错误的。这一定意味着服务器端渲染也将使用此类 json，但仅在运行时发出请求时使用。
• 在页面的 GET 请求中的 params slug 之后使用 .json 不会影响应用程序的内部流程，前提是它可以正常工作。如果您在错误消息中看到它，请知道它来自 Next，并在故障点检查代码的其他部分。
• 我尝试的页面结构（[param].js + index.js 在同一 目录）很好，这就是为什么我的本地构建可以正常工作的原因。

我想删除这个问题，因为解决方案本质上是一个彻底查看文档就会发现的问题，但同时我认为错误本身很容易犯，并且上面列出的一些结论（尤其是关于在所有后续路线中使用 json 的内容）可以为 Next/Vercel 的一些新用户节省调试时间。