TypeScript

Next.js предоставляет опыт разработки, ориентированный на TypeScript, для создания вашего приложения React.

Он поставляется с встроенной поддержкой TypeScript для автоматической установки необходимых пакетов и настройки соответствующих параметров.

Новые проекты

create-next-app теперь по умолчанию поставляется с TypeScript.

npx create-next-app@latest

Существующие проекты

Добавьте TypeScript в свой проект, переименовав файл в .ts / .tsx. Запустите next dev и next build, чтобы автоматически установить необходимые зависимости и добавить файл tsconfig.json с рекомендуемыми параметрами конфигурации.

Если у вас уже был файл jsconfig.json, скопируйте параметр компилятора paths из старого файла jsconfig.json в новый файл tsconfig.json, и удалите старый файл jsconfig.json.

Минимальная версия TypeScript

Настоятельно рекомендуется использовать как минимум v4.5.2 версии TypeScript, чтобы получить такие возможности синтаксиса, как модификаторы типа в именах импорта и улучшения производительности.

Статическая генерация и рендеринг на стороне сервера

Для getStaticProps, getStaticPaths и getServerSideProps вы можете использовать типы GetStaticProps, GetStaticPaths, и GetServerSideProps соответственно:

import { GetStaticProps, GetStaticPaths, GetServerSideProps } from 'next'
 
export const getStaticProps = (async (context) => {
  // ...
}) satisfies GetStaticProps
 
export const getStaticPaths = (async () => {
  // ...
}) satisfies GetStaticPaths
 
export const getServerSideProps = (async (context) => {
  // ...
}) satisfies GetServerSideProps

Важно знать: satisfies был добавлен в TypeScript в версии 4.9. Мы рекомендуем обновить до последней версии TypeScript.

Маршруты API

Следующий пример демонстрирует использование встроенных типов для маршрутов API:

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

Вы также можете типизировать данные ответа:

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

Пользовательское приложение

Если у вас есть пользовательское App, вы можете использовать встроенный тип AppProps и изменить имя файла на ./pages/_app.tsx следующим образом:

import type { AppProps } from 'next/app'
 
export default function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

Псевдонимы путей и baseUrl

Next.js автоматически поддерживает опции tsconfig.json "paths" и "baseUrl".

Вы можете узнать больше об этой функции в документации по псевдонимам путей модулей.

Проверка типов next.config.js

Файл next.config.js должен быть файлом JavaScript, так как он не анализируется Babel или TypeScript, однако вы можете добавить проверку типов в своём IDE с использованием JSDoc, как показано ниже:

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

Инкрементная проверка типов

Так как v10.2.1 Next.js поддерживает инкрементную проверку типов, если она включена в вашем tsconfig.json, это может ускорить проверку типов в крупных приложениях.

Игнорирование ошибок TypeScript

Next.js прерывает вашу **производственную сборку** (next build) при наличии ошибок TypeScript в вашем проекте.

Если вы хотите, чтобы Next.js небезопасно генерировал производственный код даже при наличии ошибок в вашем приложении, вы можете отключить встроенный шаг проверки типов.

Если отключение выполнено, убедитесь, что вы выполняете проверки типов как часть процесса сборки или развертывания, иначе это может быть очень опасно.

Откройте next.config.js и включите опцию ignoreBuildErrors в конфигурацию typescript:

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

Пользовательские объявления типов

Когда вам нужно объявить пользовательские типы, вы можете быть искушены изменить next-env.d.ts. Однако этот файл генерируется автоматически, поэтому все ваши изменения будут перезаписаны. Вместо этого создайте новый файл, назовём его new-types.d.ts, и укажите на него в своём tsconfig.json:

{
  "compilerOptions": {
    "skipLibCheck": true
    //...truncated...
  },
  "include": [
    "new-types.d.ts",
    "next-env.d.ts",
    ".next/types/**/*.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": ["node_modules"]
}

Изменения версий