Version History
v12.0.0SWC is now used by default to compile TypeScript and TSX for faster builds.
v10.2.1Incremental type checking support added when enabled in your tsconfig.json.

Next.js は、IDE のように統合された革新的なTypeScript体験を提供します。

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

create-next-app support

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

npx create-next-app@latest --ts
# or
yarn create next-app --typescript

Existing projects

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

touch tsconfig.json

Next.js はこのファイルをデフォルト値で自動的に構成します。独自の tsconfig.json カスタムコンパイラオプションを提供することもサポートされています。

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.

Next.js は .babelrc が存在する場合、 TypeScript を処理するために Babel を用いますが、これはいくつかの注意点があり、一部のコンパイラオプションの挙動が異なります

次に、next(通常は npm run dev or yarn dev)を実行すると、セットアップのために Next.js が必要なパッケージのインストールを案内します:

npm run dev

# 次のような指示が表示されます:
# Please install TypeScript, @types/react, and @types/node by running:
#         yarn add --dev typescript @types/react @types/node
# ...

これで、ファイルを .js から .tsx に変換し、TypeScript の利点を活用する準備が整いました!


TypeScript の strict モードはデフォルトでオフになっています。TypeScriptに慣れてきたら tsconfig.json でオンにすることをお勧めします。

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

Instead of editing next-env.d.ts, you can include additional types by adding a new file e.g. additional.d.ts and then referencing it in the include array in your tsconfig.json.



getStaticPropsgetStaticPathsgetServerSidePropsに対して、 それぞれ GetStaticPropsGetStaticPathsGetServerSideProps型を使用できます。

import { GetStaticProps, GetStaticPaths, GetServerSideProps } from 'next';

export const getStaticProps: GetStaticProps = async (context) => {
  // ...

export const getStaticPaths: GetStaticPaths = async () => {
  // ...

export const getServerSideProps: GetServerSideProps = async (context) => {
  // ...



以下は、API ルートにビルトインの型を使用する方法の例です:

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' })

カスタム App

カスタム App がある場合は、ビルトインの AppProps 型を使用して、ファイル名を ./pages/_app.tsx に変更できます:

import type { AppProps } from 'next/app'

export default function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />


Next.js は、tsconfig.json"paths" および "baseUrl" オプションを自動的にサポートします。


Type checking next.config.js

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:

// @ts-check

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

module.exports = nextConfig

Incremental type checking

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 best performance when leveraging this feature.

Ignoring TypeScript Errors

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.

If disabled, be sure you are running type checks as part of your build or deploy process, otherwise this can be very dangerous.

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,