Add TypeScript type to Next.js getInitialProps

Have you ever seen a similar message like this:

[ts] Property 'getInitialProps' does not exist on type.

This happens because you haven’t given the right type definition to your Next.js page component.

Let’s take a look at a couple examples, how to get rid of this ugly error.

Solution #1: Define your getInitialProps type

interface StatelessPage<P = {}> extends React.SFC<P> {
  getInitialProps?: (ctx: any) => Promise<P>
}

And you would use it as such:

const HomePage: StatelessPage<AddMoreInterfaces> = () => {
  // ... page markup
};

HomePage.getInitialProps = async () => {
  // ... stuff
}

Solution #2: Use NextPageContext

In the example above, I’ve defined ctx as any.

But in the TypeScript world, using any is a sin. So here’s a definition that you replace any for.

import { NextPageContext } from 'next';

interface StatelessPage<P = {}> extends React.SFC<P> {
  getInitialProps?: (ctx: NextPageContext) => Promise<P>
}

Pretty easy!

Solution #3: Best solution

Just use the NextPage interface that Next.js provides.

import { NextPage } from 'next';

const HomePage: NextPage<AddMoreInterfaces> = () => {
  // ... page markup
};

HomePage.getInitialProps = async () => {
  // ... stuff
}

Happy coding!

I like to tweet about Next.js and post helpful code snippets. Follow me there if you would like some too!