时间戳

首页 > 解决方案 > Next.js getServerSideProps | 函数的奇怪行为

reactjs - Next.js getServerSideProps | 函数的奇怪行为

问题描述

函数的奇怪行为。有时服务器请求的地址错误

console.log ({url: context.req.url})

并打印到控制台

{url: '/_next/data/development/en-gb/b.json?culture=en-gb'}

这破坏了与当前请求地址相关的所有逻辑。为什么会发生这种情况以及如何解决它

我正在为标准函数使用函数包装器

export function getServerSidePropsWithPageInitData(options: PropsOptions = {}) {

  //redux-wrapper
  return wrapper.getServerSideProps((store) => {

    const { getState, dispatch } = store;

    return async function(context: GetServerSidePropsContext) {


      console.log({ url: context.req.url }) // {url: '/_next/data/development/en-gb/b.json?culture=en-gb'}
      
      return  await getPageInitialData(serverContext);

      // some logic and return object look like
      // { props: {key: value } }
      // or redirect
      // redirect: {
      //  permanent: false,
      //  destination: destination
      // }
    };
  })
}

标签： reactjsnext.js

解决方案

使用resolvedUrl属性：

resolvedUrl：请求 URL 的规范化版本，去除客户端转换的 _next/data 前缀并包含原始查询值。

更多：https ://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering

推荐阅读