[docs] Next.js integration improvements

[mnajdova]

Steps to reproduce

Following https://mui.com/material-ui/integrations/nextjs/#pages-router using the create-next-app@latest you will get the following bugs/confusions:

• when adding the props param in the MyDocument component it throws a TS error that props is any
• following adding the in the _app.tsx file is not intuitive, as the code snippet is not using the default generated template, is not intuitive what props should be forwarded to the vs to the . The initial code looks like this:

  import "@/styles/globals.css";
  import type { AppProps } from "next/app";
  
  export default function App({ Component, pageProps }: AppProps) {
    return <Component {...pageProps} />;
  }
  

• on the Cascade layers (optional) section, there are TS issues when copying the code, e.g. ctx should have the DocumentContext type set
• the pages/_app.tsx codesnippet is missing the line for defining the clientCache variable

  const clientCache = createEmotionCache({ enableCssLayer: true });
  

Current behavior

No response

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: next.js, docs