Nextjs/Vercel error: only absolute URLs are supported. Where is the '.json' in my route params coming from?

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，但它应该如此。虽然在我的本地服务器构建上没有发生这样的事情，但它运行良好。

Background/Code 片段： 搜索路由是唯一使用SSR的路由，也是唯一存在该问题的路由。这是一条动态路线，所以它似乎要么是生产中的下一个，要么是 Vercel 期望某种 json 它 - 大概是预渲染的内容 - 并且正在用 json 替换路线 URL .

此外，我不得不使用 VERCEL_URL 环境变量为获取请求准备一个 URL，所以这也可能会弄乱 URL，但是 .[=错误消息中的 49=] 让我不这么认为，因为不应预呈现搜索。

搜索路径的页面结构（Index 在 [term] 中导入组件并定义自己的 getServerSide props 以适应没有参数的搜索路径）:

|-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 从路由器参数提供给获取方法。

Answer 1

原来VERCEL_URL 实际上是绝对的URL（它不包括协议）。我必须部署 console.log 语句才能找到它。有点尴尬，我错过了 docs.

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

我想删除这个问题，因为解决方案本质上是一个彻底查看文档就会发现的解决方案，但同时我认为错误本身很容易犯，而且列出的一些结论上面（特别是关于 json 在所有后续路由中使用的那个）可以为 Next/Vercel.

的一些新用户节省调试时间

Nextjs/Vercel error: only absolute URLs are supported. Where is the '.json' in my route params coming from?

Nextjs/Vercel error: only absolute URLs are supported. Where is the '.json' in my route params coming from?

url

json

next.js

vercel