If you're using TypeScript, you can use the NextPage type for function components:

import { NextPage } from 'next'

interface Props {
  userAgent?: string;
}

const Page: NextPage<Props> = ({ userAgent }) => (
  <main>Your user agent: {userAgent}</main>
)

Page.getInitialProps = async ({ req }) => {
  const userAgent = req ? req.headers['user-agent'] : navigator.userAgent
  return { userAgent }
}

export default Page
And for React.Component, you can use NextPageContext:

import React from 'react'
import { NextPageContext } from 'next'

interface Props {
  userAgent?: string;
}

export default class Page extends React.Component<Props> {
  static async getInitialProps({ req }: NextPageContext) {
    const userAgent = req ? req.headers['user-agent'] : navigator.userAgent
    return { userAgent }
  }

  render() {
    const { userAgent } = this.props
    return <main>Your user agent: {userAgent}</main>
  }
}
You can use the built-in DocumentContext type and change the file name to ./pages/_document.tsx like so:

import Document, { DocumentContext } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const initialProps = await Document.getInitialProps(ctx)

    return initialProps
  }
}

export default MyDocument
For function components the NextPage type is exported, here's how to use it:

import { NextPage } from 'next'

interface Props {
  userAgent?: string;
}

const Page: NextPage<Props> = ({ userAgent }) => (
  <main>Your user agent: {userAgent}</main>
)

Page.getInitialProps = async ({ req }) => {
  const userAgent = req ? req.headers['user-agent'] : navigator.userAgent
  return { userAgent }
}

export default Page
And for React.Component you can use NextPageContext:

import React from 'react'
import { NextPageContext } from 'next'

interface Props {
  userAgent?: string;
}

export default class Page extends React.Component<Props> {
  static async getInitialProps({ req }: NextPageContext) {
    const userAgent = req ? req.headers['user-agent'] : navigator.userAgent
    return { userAgent }
  }

  render() {
    const { userAgent } = this.props
    return <main>Your user agent: {userAgent}</main>
  }
}

Recommend

Nextjs getInitialProps

Nextjs getStaticProps getStaticProps with TypeScript

Nextjs getStaticProps Reading files: Use process.cwd()

Nextjs getStaticProps getStaticProps return values redirect

Nextjs getStaticProps getStaticProps return values notFound

Nextjs getStaticProps getStaticProps return values revalidate

Nextjs getStaticProps getStaticProps return values props

Nextjs getStaticProps

Nextjs next/amp AMP First Page

Nextjs next/amp

Nextjs next/router withRouter TypeScript

Nextjs next/router withRouter Usage

Nextjs next/router Potential ESLint errors Potential solutions

Nextjs next/router router object router.events Usage

Nextjs next/router router object router.reload Usage

Nextjs next/router router object router.back Usage

Nextjs next/router router object router.beforePopState Usage

Nextjs next/router router object router.beforePopState

Nextjs next/router router object router.prefetch Usage

Nextjs next/router router object router.prefetch

Nextjs next/router router object router.replace Usage

Nextjs next/router router object router.replace

Nextjs next/router router object router.push With URL object

Nextjs next/router router object router.push Usage

Nextjs next/router router object router.push

Nextjs next/router useRouter

Nextjs next/head

Nextjs next/link Disable scrolling to the top of the page

Nextjs next/link Replace the URL instead of push

Nextjs next/link With URL Object

Nextjs next/link If the child is a functional component

Nextjs next/link If the child is a custom component that wraps an tag

Nextjs next/link If the route has dynamic segments

Nextjs next/link

Nextjs next/server NextResponse How do I access Environment Variables?

Nextjs next/server NextResponse Setting the cookie before a redirect

Nextjs next/server NextResponse Static methods

Nextjs next/server NextResponse Public methods

Nextjs next/server NextFetchEvent

Nextjs next/server NextRequest

Nextjs next/server NextMiddleware

Nextjs next/streaming unstable_useRefreshRoot

Nextjs next/streaming unstable_useWebVitalsReport

Nextjs next/image Caching Behavior Experimental raw layout mode

Nextjs next/image Caching Behavior Dangerously Allow SVG

Nextjs next/image Caching Behavior Disable Static Imports

Nextjs next/image Caching Behavior Minimum Cache TTL

Nextjs next/image Advanced Acceptable Formats

Nextjs next/image Advanced Device Sizes

Nextjs next/image Configuration Options Loader Configuration

Nextjs next/image Configuration Options Domains

Nextjs next/image Advanced Props lazyRoot

Nextjs next/image Optional Props loader

Nextjs next/script Optional Props onLoad

Nextjs Create Next App

Nextjs Next.js CLI Info

Nextjs Next.js CLI Lint

Nextjs Next.js CLI Development

Nextjs Next.js CLI Build

Nextjs Next.js CLI

Nextjs Dynamic Routes Optional catch all routes

Nextjs Dynamic Routes Catch all routes

Nextjs Dynamic Routes

Nextjs Routing Linking between pages Linking to dynamic paths

Nextjs Routing Linking between pages

Nextjs Imperatively

Nextjs Shallow Routing Caveats

Nextjs Shallow Routing

Nextjs React 18 Using React 18 with Next.js

Nextjs React Server Components (Alpha) Supported Next.js APIs Routing

Nextjs React Server Components (Alpha) Supported Next.js APIs next/app

Nextjs React Server Components (Alpha) Supported Next.js APIs next/document

Nextjs React Server Components (Alpha) Server Components Conventions

Nextjs React Server Components (Alpha) Enable React Server Components