Using NextJS with TypeScript

Create an empty tsconfig.json file in the root of your project and add dependencies:

1
# If you’re using npm
2
npm install --save-dev typescript @types/react @types/node
3

4
# If you’re using Yarn
5
yarn add --dev typescript @types/react @types/node

Now run yarn dev to start the server and Next.js will:

Populate the tsconfig.json file for you. You may customize this file.
Create the next-env.d.ts file, which ensures Next.js types are picked up by the TypeScript compiler. You should not touch this file.

Here is how you use the types:

1
import { GetStaticProps, GetStaticPaths, GetServerSideProps } from 'next'
2

3
export const getStaticProps: GetStaticProps = async context => {
4
  // ...
5
}
6

7
export const getStaticPaths: GetStaticPaths = async () => {
8
  // ...
9
}
10

11
export const getServerSideProps: GetServerSideProps = async context => {
12
  // ...
13
}

This is how you use API Routes with TypeScript:

1
import { NextApiRequest, NextApiResponse } from 'next'
2

3
export default (req: NextApiRequest, res: NextApiResponse) => {
4
  // ...
5
}

You can convert pages/_app.js into pages/_app.tsx and use the built-in type AppProps, like so:

1
import { AppProps } from 'next/app'
2

3
function App({ Component, pageProps }: AppProps) {
4
  return <Component {...pageProps} />
5
}
6

7
export default App