如何组合多个 getServerSideProps 函数

Question

我有两个页面； index.js 和 other.js, 在 index.js 我有一个方法 getServerSideProps;

export async function getServerSideProps(context) 
{
   //code here
}

我想在 other.js 页面中使用相同的功能。因为 index.js getServerSideProps 中的代码很长，所以我不得不将 index.js 中的 getServerSideProps 导入到 other.js，做类似的事情；

import { getServerSideProps } from "./index";
...
export { getServerSideProps };

它工作正常，但问题是，我想在 getServerSideProps 中发出另一个仅在 other.js 页面中运行的请求。一种方法是复制我为 index.js 编写的 getServerSideProps 代码并将其粘贴到 other.js 中并修改代码。问题是，正如我之前提到的，getServerSideProps 中的代码非常庞大，我不想将其复制并粘贴到我需要的所有页面中。

我的问题是，如何将另一个 getServerSideProps 添加到我已经从另一个页面导出的那个。基本上，我想将 index.js 中导出的 getServerSideProps 合并到 other.js

中本地的 getServerSideProps

Answer 1

如果您想重用相同的 getServerSideProps 函数，但有条件地运行根据调用它的页面的特定代码，您可以尝试使用 context.req 对象:

index.js

export default function Home({ data }) {
  return <>{data}</>;
}

export async function getServerSideProps(context) {
  let foo;

  // Parse `message.url` into parts. An alternative to using the `URL` class
  // would be to use `context.resolvedUrl`, but that will take more effort to
  // isolate pathnames when query parameters are involved.
  const reqUrl = new URL(
    context.req.url,
    `https://${context.req.headers.host}`
  );
  const thisPage = reqUrl.pathname;
  const queryParams = reqUrl.searchParams;

  switch (thisPage) {
    case "/":
      // code for index.js
      foo = "Hello, index.js!";
      break;

    case "/other":
      // code for other.js
      foo = "Hello, other.js!";
      break;

    default:
      foo = "Hello, world!";
  }

  // common code
  console.log("`thisPage`:", thisPage);
  console.log("`context.resolvedUrl`:", context.resolvedUrl);
  console.log("`queryParams`:", queryParams);

  return {
    props: { data: foo },
  };
}

other.js

import { getServerSideProps } from "./index";

export default function Other({ data }) {
  return <>{data}</>;
}

export { getServerSideProps };

如何组合多个 getServerSideProps 函数

How to combine multiple getServerSideProps function

javascript

reactjs

next.js