TypeScript

Next.js provides an integrated TypeScript experience, including zero-configuration set up and built-in types for Pages, APIs, and more.

• View an example application

You can create a TypeScript project with create-next-app using the --ts, --typescript flag like so:

Existing projects

To get started in an existing project, create an empty tsconfig.json file in the root folder:

touch tsconfig.json

Next.js will automatically configure this file with default values. Providing your own tsconfig.json with custom is also supported.

You can also provide a relative path to a tsconfig.json file by setting typescript.tsconfigPath prop inside your next.config.js file.

Starting in v12.0.0, Next.js uses SWC by default to compile TypeScript and TSX for faster builds.

Then, run next (normally npm run dev or yarn dev) and Next.js will guide you through the installation of the required packages to finish the setup:

npm run dev
# You'll see instructions like these:
#
# Please install TypeScript, @types/react, and @types/node by running:
#         yarn add --dev typescript @types/react @types/node
#
# ...

By default, Next.js will do type checking as part of next build. We recommend using code editor type checking during development.

If you want to silence the error reports, refer to the documentation for .

For getStaticProps, getStaticPaths, and getServerSideProps, you can use the GetStaticProps, GetStaticPaths, and GetServerSideProps types respectively:

The following is an example of how to use the built-in types for API routes:

import type { NextApiRequest, NextApiResponse } from 'next'
export default (req: NextApiRequest, res: NextApiResponse) => {
  res.status(200).json({ name: 'John Doe' })
}

import type { NextApiRequest, NextApiResponse } from 'next'
type Data = {
  name: string
}
export default (req: NextApiRequest, res: NextApiResponse<Data>) => {
  res.status(200).json({ name: 'John Doe' })
}

Custom App

If you have a , you can use the built-in type AppProps and change file name to ./pages/_app.tsx like so:

Next.js automatically supports the "paths" and "baseUrl" options.

You can learn more about this feature on the Module Path aliases documentation.

The next.config.js file must be a JavaScript file as it does not get parsed by Babel or TypeScript, however you can add some type checking in your IDE using JSDoc as below:

/**
 * @type {import('next').NextConfig}
 **/
const nextConfig = {
  /* config options here */
}
module.exports = nextConfig

Since v10.2.1 Next.js supports incremental type checking when enabled in your tsconfig.json, this can help speed up type checking in larger applications.

It is highly recommended to be on at least v4.3.2 of TypeScript to experience the when leveraging this feature.

Next.js fails your production build (next build) when TypeScript errors are present in your project.

If you’d like Next.js to dangerously produce production code even when your application has errors, you can disable the built-in type checking step.

Open next.config.js and enable the ignoreBuildErrors option in the typescript config:

module.exports = {
  typescript: {
    // !! WARN !!
    // Dangerously allow production builds to successfully complete even if
    // your project has type errors.
    // !! WARN !!
    ignoreBuildErrors: true,