Nextjs/Vercel錯誤：僅支持絕對URL。我的路由引數中的“.json”來自哪里？-有解無憂

問題：.json我是 Next.js（1 個月）和 Vercel（1 天）的新手，在他們之間，我的 url 中似乎插入了一些東西search，導致它們失敗并出現錯誤：

[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 讓我不這么認為，因為不應該預先呈現搜索。

搜索路由的頁面結構（索引在 [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 已確認可以正常作業，因此此問題嚴格與頁面或從路由器引數提供給 fetch 方法的 .json 相關。

uj5u.com熱心網友回復：

事實證明，這VERCEL_URL 實際上是一個絕對 URL（它不包含協議）。我必須部署 console.log 陳述句才能找到它。有點尷尬，我在檔案中錯過了它。

.json實際不在queryor中，因此params不在 fetch 請求中。獲取失敗，因為 url 沒有協議。
頁面 url 中的 .json 必須來自 Next 的內部操作，并不意味著頁面正在提前構建。是的，它是使用一些 json 渲染的，但我認為 json 表示預渲染頁面（SSG/ISR）是錯誤的。這一定意味著服務器端渲染也將使用此類 json，但僅在運行時發出請求時使用。
在對頁面的 GET 請求中使用.jsonafter params slug 不會影回應用程式的內部流程，前提是它可以正常作業。如果您在錯誤訊息中看到它，請知道它來自 Next，并在故障點檢查代碼的其他部分。
我嘗試的頁面結構（同一目錄中的[param].js index.js）很好，這就是我的本地構建可以正常作業的原因。

我想洗掉這個問題，因為解決方案本質上是一個徹底查看檔案會發現的問題，但同時我認為錯誤本身很容易犯，并且上面列出的一些結論（尤其是那個json 在所有后續路線中使用）可以為 Next/Vercel 的一些新用戶節省除錯時間。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/427902.html

標籤：json 网址下一个.js 韦尔塞尔

上一篇：如何獲取AmazonS3物件的物件URL

下一篇：通過谷歌地圖API獲取一個區域的所有經緯度集