javascript - import a single getServerSideProps method to multiple pages in Nextjs - Stack Overflow

admin管理员组

文章数量:1287165

I'm trying to import the getServerSideProps method from this page to another and use it throughout multiple pages. How can I do that?

Heres my code:

import DashboardLayout from "@app/layout/DashboardLayout";
import Overview from "@containers/dashboard/Overview";
import { parsedCookie } from "@infrastructure/utils/functions";

const OverviewPage = () => {
  return (
    <DashboardLayout>
      <Overview />
    </DashboardLayout>
  );
};

export default OverviewPage;

export const getServerSideProps = async (context) => {
  const token = parsedCookie(context.req);
  const { accessToken, refreshToken } = token;
  if (!accessToken || !refreshToken) {
    return {
      redirect: {
        destination: "/",
        permanent: false,
      },
    };
  }

  return {
    props: {},
  };
};

I'm trying to import the getServerSideProps method from this page to another and use it throughout multiple pages. How can I do that?

Heres my code:

import DashboardLayout from "@app/layout/DashboardLayout";
import Overview from "@containers/dashboard/Overview";
import { parsedCookie } from "@infrastructure/utils/functions";

const OverviewPage = () => {
  return (
    <DashboardLayout>
      <Overview />
    </DashboardLayout>
  );
};

export default OverviewPage;

export const getServerSideProps = async (context) => {
  const token = parsedCookie(context.req);
  const { accessToken, refreshToken } = token;
  if (!accessToken || !refreshToken) {
    return {
      redirect: {
        destination: "/",
        permanent: false,
      },
    };
  }

  return {
    props: {},
  };
};

• javascript
• reactjs
• ecmascript-6
• next.js
• es6-modules

Share Improve this question Follow edited Dec 5, 2021 at 11:55 Samira 2,75311 gold badge1818 silver badges2929 bronze badges asked Dec 5, 2021 at 11:40 Kamrul IslamKamrul Islam 26511 gold badge55 silver badges1717 bronze badges 1

• 1 Put this function in a separate file and import it wherever you need it. – Imanpal Singh Commented Dec 5, 2021 at 11:50

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 12

I found the answer . heres how you can use a pages datafetching method on a another page

import DashboardLayout from "@app/layout/DashboardLayout";
import MyCourses from "@containers/dashboard/MyCourses";
import { getServerSideProps } from "../index";

const MyCoursesPage = () => {
  return (
    <DashboardLayout>
      <MyCourses />
    </DashboardLayout>
  );
};

export default MyCoursesPage;

export { getServerSideProps };

You can not import getServerSideProps they are unique for each page but if all pages in first load should get same data you can add getIntialProps in your _app.js file. for more info you can read customizing _app.js files

You can create a generic function where you can pass the page which you want to used and fetch data according that prop. i.e

In the NextJs page you can use like this

export const getStaticProps = createGetStaticProps("home")

and the method can be created like this

export function createGetStaticProps(
  page: PageType,
): GetStaticProps<any> {
  const getStaticProps: GetStaticProps<any> = async (context) => {
  // Load any data related to page  
  const data = await loadData(page, context.params)

    return {
      props: serializeStaticProps(data),
      revalidate: 5000,
    }
  }

  return getStaticProps
}

本文标签： javascriptimport a single getServerSideProps method to multiple pages in NextjsStack Overflow