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

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

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

Для 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

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

import type { AppProps } from 'next/app'

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

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

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

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

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

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

// @ts-check

/**
 * @type {import('next').NextConfig}
 **/
const nextConfig = {
  /* параметры конфигурации здесь */
}

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: {
    // !! ВНИМАНИЕ !!
    // Опасное разрешение на успешное завершение продакшен-сборок,
    // даже если в вашем проекте есть ошибки типов.
    // !! ВНИМАНИЕ !!
    ignoreBuildErrors: true,
  },
}

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