How to use getServerSideProps for every pages in next.js?

Question

I have set a cookie with nookies which store the values of all the products selected by user. I want to fetch the cookie in server side using getServerSideProps and pass the value as props. I have to display the value of cookie on all pages.

When I tried getServerSideProps in _app.js. It did not worked and it did not even run the code.

Is there any way to do it?

Have you solved this issue? I too need user data on all pages, it seems so simple but it's not. Any help would be appreciated. — Ariel Mirra, Sep 09 '21 at 00:15
no, I haven't solved it yet. Seems like the only way to do it is on client side. — angelo, Sep 10 '21 at 14:20

code · Answer 1 · 2022-05-21T04:06:18.947

35

As of now, there isn't a built-in way to do it, so I've resorted to doing the following.

First, I created a file that holds the getServerSideProps function I want to run on every page:

// lib/serverProps.js
export default async function getServerSideProps(ctx) {
  // do something
  return {
    // data
  };
}

Then in every page (yes, every, I can't find a workaround; it might even be helpful if you don't need the code to execute on server pages), do:

import getServerSideProps from "../lib/serverProps";

// other stuff...

export { getServerSideProps };

or

// other stuff...

export { default as getServerSideProps } from "../lib/serverProps";

If you want to add other code to run inside getServerSideProps for a specific page, you could do something along the lines...

import serverProps from "../lib/serverProps";

// other stuff...

export async function getServerSideProps(ctx) {
  // do custom page stuff...
  return {
    ...await serverProps(ctx),
    ...{
      // pretend this is what you put inside
      // the return block regularly, e.g.
      props: { junk: 347 }
    }
  };
}

edited May 21 '22 at 04:06

answered May 21 '22 at 01:07

code

5,690
4
17
39

4

This method helps me to integrate **protected** and **auth** route from server side, very easily. Thank you. Marking this as useful. – Avkash Sep 21 '22 at 21:33
what if the page has its own `getServerSideProps` it wanna run alongside with this common `getServerSideProps`? – Sumit Wadhwa Jul 29 '23 at 17:47
1

@sumit see the last code block – code Jul 31 '23 at 09:10
@code I see that now. thanks. – Sumit Wadhwa Jul 31 '23 at 11:18

score 23 · Answer 2 · answered Jan 11 '21 at 16:29

23

getServerSideProps does not work in _app.js. see docs.

you could use the older getInitialProps in your custom app component but then the automatic static optimisation is disabled, which is something Next.js bets on heavily.

it might be worth digging into your cookie use case and figure out if you really need to read it on the server side.

answered Jan 11 '21 at 16:29

dmudro

2,894
1
21
23

15

Thanks for the info! Although having some user data available on all pages seems pretty common, how would you solve this issue in nextjs? Thank you! – Ariel Mirra Sep 09 '21 at 00:16
6

Is there any resolution around this? I desperately need it. – Shivam Sahil Jan 06 '22 at 04:05

score 4 · Answer 3 · answered Aug 04 '22 at 10:36

For those wanting to share state received from a page's getServerSideProps function to global components in pages/_app.tsx, I've pieced this solution together.

Create a shared getServerSideProps function to include on all pages
Create a shared useSetUserStorage custom hook to include on all pages
Listen for localStorage changes with custom event listener in global component (e.g. GlobalNav)

It's a work around, but is working for me so far (note that it includes some specifics to my use of getServerSideProps function).

It's a fair amount of code but hopefully this helps someone:

// src/pages/_app.tsx

import type { AppProps } from "next/app";

import GlobalNav from "../components/GlobalNav";

function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
  return (
    <>
      <GlobalNav /> // <— your global component
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

// src/utils/getServerSideProps.ts

import { ppinit, ppsession, sess } from "../authMiddleware";
import nc from "next-connect";
import { NextApiRequest, NextApiResponse } from "next";

import { User } from "../types/types";

interface ExtendedReq extends NextApiRequest {
  user: User;
}

interface ServerProps {
  req: ExtendedReq;
  res: NextApiResponse;
}

interface ServerPropsReturn {
  user?: User;
}

//
// Here we use middleware to augment the `req` with the user from passport.js
// to pass to the page
// src: https://github.com/hoangvvo/next-connect/tree/21c9c73fe3746e66033fd51e2aa01d479e267ad6#runreq-res
//
const getServerSideProps = async ({ req, res }: ServerProps) => {
  // ADD YOUR CUSTOM `getServerSideProps` code here
  const middleware = nc()
    .use(sess, ppinit, ppsession)
    .get((req: Express.Request, res: NextApiResponse, next) => {
      next();
    });

  try {
    await middleware.run(req, res);
  } catch (e) {
    // handle the error
  }

  const props: ServerPropsReturn = {};
  if (req.user) props.user = req.user;
  return { props };
};

export interface Props {
  user?: User;
}

export default getServerSideProps;

// src/hooks.ts

import { useEffect } from "react";

import { User } from "./types/types";

export const useSetUserStorage = (user?: User) => {
  useEffect(() => {
    if (user) {
      localStorage.setItem("user", JSON.stringify(user));
    } else {
      localStorage.removeItem("user");
    }

    // whether setting or removing the user, dispatch event so that `GlobalNav`
    // component (which is above the page implementing this hook in the
    // component hierarchy) can be updated to display the user status.  we
    // can't use `window.addEventListener('storage', handler)` as this only
    // works for listening for events from other pages
    document.dispatchEvent(new Event("localStorageUserUpdated"));
  });

  return null;
};

// src/pages/index.tsx (or any page)

import { useSetUserStorage } from "../hooks";

import { Props } from "../utils/getServerSideProps";
export { default as getServerSideProps } from "../utils/getServerSideProps";

export default function Home({ user }: Props) {
  useSetUserStorage(user);

  return (
    <>
      <h1>Welcome to my app {user?.username}</h1>
    </>
  );
}

// src/components/GlobalNav.ts (or another global component)

import { useEffect, useState, MouseEvent } from "react";

import { User } from "../types/types";

const GlobalNav = () => {
  const [user, setUser] = useState<User | null>(null);

  useEffect(() => {
    const handleUserLocalStorage = () => {
      const userString = localStorage.getItem("user");

      try {
        if (userString) {
          setUser(JSON.parse(userString));
        } else {
          setUser(null);
        }
      } catch (e) {
        // handle parse error
      }
    };

    handleUserLocalStorage();
    // this component (`GlobalNav`) lives at the application level, above the
    // pages, but the pages receive the user object from `getServerSideProps`,
    // so this listener listens for when a page tells us the user object has
    // changed so we can update the `user` state here.
    document.addEventListener(
      "localStorageUserUpdated",
      handleUserLocalStorage,
      false,
    );

    return () => {
      // remove listener if component unmounts
      document.removeEventListener(
        "localStorageUserUpdated",
        handleUserLocalStorage,
      );
    };
  }, []);

  return (
    <div>
      {user?.username}
    </div>
  );
};
export default GlobalNav;

score 0 · Answer 4 · answered Jun 23 '22 at 15:41

I used a slightly different technique. Every page, in my case, has its own getServerSideProps and I was looking for a more functional approach. Also I'm using GraphQL, but the idea is the same no matter which data fetching API you choose. A regular getServerSideProps would look like this -

export const getServerSideProps: GetServerSideProps = async (context) => {

    const { slug } = context.query

    const { data: profile } = await client.query({ query: GetProfileDocument, variables: { slug } })

    return {
        props: {
            ...(await getSelf(context)),
            profile: profile?.GetProfile[0],
        },
    }
}

In the props you can see the await statement, which is called in all pages. And in the few cases I don't need it, it's gone. This is what getSelf looks like -

const getSelf = async (context: GetServerSidePropsContext<ParsedUrlQuery, PreviewData>) => {
    const session = await getSession(context)

    let self = null

    if (session) {
        const { data } = await client.query({
            query: GetProfileDocument,
            variables: { secret: session?.secretSauce as string },
        })

        self = data.GetProfile[0]
    }

    return { self, sessionData: session }
}

Hope it helped.

JustDisgusting · Answer 5 · 2023-08-04T08:54:16.820

If you want to run something server action(like router.use("*", handler) in express) for every page, not run literally getServerSideProps, do following.

// pages/api/cookie.js

export default function setLocalehandler(req, res) {
  // do some server action
  return res.json(data); //cookie data
}

// context/CookieContext.js

const LocaleContext = createContext();

const LocaleProvider = ({ children }) => {
  const router = useRouter();
  const [data, setData] = useState();
  useEffect(() => {
    fetch("/api/cookie").then((res) => res.json()).then((data) => setData(data));
  }, [router.pathname]);
  return <LocaleContext.Provider value={data}>{children}</LocaleContext.Provider>;
};

export { LocaleProvider, LocaleContext };

// pages/_app.js

function App({ Component, pageProps }) {
  return (
    <LocaleProvider>
      <Component {...pageProps} />
    </LocaleProvider>
  );
}

so now, If you want to use cookie data in page

// pages/foo/bar.js
export default function Page() {
  const cookie = useContext(CookieContext);
}

How to use getServerSideProps for every pages in next.js?

5 Answers5

Linked