I'm using express - next.js in my application and I'm passing some configuration to the client from the server through the res.locals, my project is in typescript and I using "@types/next": "^8.0.6".
the problem: typescript say "Property 'locals' does not exist on type 'ServerResponse | Partial<ServerResponse>'."
Expected answer: 
- a way to overwrite "NextContext.res" or "NextResponse" to be equal to Express.res instead of http.ServerResponse
- A way to overwrite NextResponse to add locals: any | {x:strong}.
this is the simplify example of what we have and how to reproduce:
import React from 'react';
import Document, { Head, Main, NextScript } from 'next/document';
type Props = {
  locals: {};
}
export default class MyDocument extends Document<Props> {
  render() {
    const { locals } = this.props;
    return (
      <html>
        <Head>
          <ComponentUsingLocalsInfo locals={locals} />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
}
MyDocument.getInitialProps = async (ctx) => {
  const { locals } = ctx.res;
  const initialProps = await Document.getInitialProps(ctx);
  return {
    ...initialProps,
    locals,
  }
}
                For a quick solution this is what worked for me:
    import { Response } from 'express';
    MyDocument.getInitialProps = async (ctx) => {
        const { locals } = (ctx.res as Response);
    }
                        If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With