I have two pages; index.js and other.js, In the index.js I have a method getServerSideProps;
export async function getServerSideProps(context)
{
//code here
}
I want to use this same function in the other.js page. Because the code in index.js getServerSideProps is pretty long, I had to import the getServerSideProps in index.js to other.js, doing something like;
import { getServerSideProps } from "./index";
...
export { getServerSideProps };
It works alright, but the problem is, I want to make another request in the getServerSideProps that only runs in the other.js page. One way of doing this is to copy the getServerSideProps code I wrote for the index.js and paste it in other.js and modify the code. The problem is, like I mentioned earlier, the code is quite huge in the getServerSideProps and I don't want to copy it and paste it in all the pages I need it.
My question is, how do I add another getServerSideProps to the one I already exported from another page. Basically, I want to merge the exported getServerSideProps in index.js to the getServerSideProps I have locally in other.js
If you want to reuse the same getServerSideProps function, but conditionally run specific code based on which page it's being called from, you can try making use of the context.req object:
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 };