How can i change type of context.req in GetServerSideProps?

[Sh031224]

I'm use custom server by express.

In express, adding a new attribute to the request by using express middleware.

// express
const isDev = process.env.NODE_ENV !== 'production';
const app = next({
  dir: './src',
  dev: isDev,
});

const middleware = (req, res, next) => {
  req.test = 'test';

  next();
}

app.prepare().then(() => {
  const handle = app.getRequestHandler();
  const server = express();
  
  server.use(middleware());

  server.get('*', (req, res) => {
    handle(req, res);
  });
})

// pages/index.tsx
export const getServerSideProps: GetServerSideProps = ({ req, res }) => {
  // error
  const { test } = req;

  return {
    props: {}
  };
};

How can i change type of req?

It was originally a JavaScript project, but an error occurred while changing it to TypeScript.

[icyJoseph]

Mmm, because the types GetServerSideProps and GetServerSidePropsContext are type aliases, they can't really be augmented, which is a natural property of interfaces. I think, if you create a global.d.ts file and add this:

import type {GetServerSidePropsContext as OriginalGetServerSidePropsContext} from 'next/types';

declare module 'next' {
    export type GetServerSidePropsContext<
        Q extends ParsedUrlQuery = ParsedUrlQuery,
        D extends PreviewData = PreviewData
    > = OriginalGetServerSidePropsContext<Q, D> & {
        req: {
            foo: string;
        };
    };

    export type GetServerSideProps<
        P extends {[key: string]: any} = {[key: string]: any},
        Q extends ParsedUrlQuery = ParsedUrlQuery,
        D extends PreviewData = PreviewData
    > = (context: GetServerSidePropsContext<Q, D>) => Promise<GetServerSidePropsResult<P>>;
}

export {};

Maybe it works, but you have also have to redefine InferGetServerSidePropsType - not ideal, but I guess it works. It is not ideal because if you ever drop the custom express server, or change the types it injects, you need to maintain this global file.