TypeScript

Next.js ofrece una experiencia de desarrollo con TypeScript como prioridad para construir tu aplicación React.

Incluye soporte integrado para TypeScript que instala automáticamente los paquetes necesarios y configura los ajustes adecuados.

Proyectos nuevos

create-next-app ahora incluye TypeScript por defecto.

npx create-next-app@latest

Proyectos existentes

Agrega TypeScript a tu proyecto renombrando un archivo a .ts / .tsx. Ejecuta next dev y next build para instalar automáticamente las dependencias necesarias y agregar un archivo tsconfig.json con las opciones de configuración recomendadas.

Si ya tenías un archivo jsconfig.json, copia la opción del compilador paths del antiguo jsconfig.json al nuevo archivo tsconfig.json, y elimina el antiguo jsconfig.json.

Versión mínima de TypeScript

Se recomienda encarecidamente usar al menos la versión v4.5.2 de TypeScript para obtener características de sintaxis como modificadores de tipo en nombres de importación y mejoras de rendimiento.

Generación estática y renderizado del lado del servidor

Para getStaticProps, getStaticPaths, y getServerSideProps, puedes usar los tipos GetStaticProps, GetStaticPaths, y GetServerSideProps respectivamente:

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

Bueno saber: satisfies se agregó a TypeScript en la versión 4.9. Recomendamos actualizar a la última versión de TypeScript.

Rutas API

El siguiente es un ejemplo de cómo usar los tipos integrados para rutas API:

import type { NextApiRequest, NextApiResponse } from 'next'

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

También puedes tipar los datos de respuesta:

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 personalizado

Si tienes un App personalizado, puedes usar el tipo integrado AppProps y cambiar el nombre del archivo a ./pages/_app.tsx así:

import type { AppProps } from 'next/app'

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

Alias de rutas y baseUrl

Next.js soporta automáticamente las opciones "paths" y "baseUrl" de tsconfig.json.

Puedes aprender más sobre esta característica en la documentación de Alias de rutas de módulo.

Verificación de tipos en next.config.js

El archivo next.config.js debe ser un archivo JavaScript ya que no es analizado por Babel o TypeScript, sin embargo puedes agregar alguna verificación de tipos en tu IDE usando JSDoc como se muestra a continuación:

// @ts-check

/**
 * @type {import('next').NextConfig}
 **/
const nextConfig = {
  /* opciones de configuración aquí */
}

module.exports = nextConfig

Verificación de tipos incremental

Desde v10.2.1 Next.js soporta verificación de tipos incremental cuando está habilitada en tu tsconfig.json, esto puede ayudar a acelerar la verificación de tipos en aplicaciones grandes.

Ignorar errores de TypeScript

Next.js falla tu compilación de producción (next build) cuando hay errores de TypeScript en tu proyecto.

Si deseas que Next.js produzca peligrosamente código de producción incluso cuando tu aplicación tiene errores, puedes desactivar el paso de verificación de tipos integrado.

Si está desactivado, asegúrate de ejecutar verificaciones de tipos como parte de tu proceso de compilación o despliegue, de lo contrario esto puede ser muy peligroso.

Abre next.config.js y habilita la opción ignoreBuildErrors en la configuración de typescript:

module.exports = {
  typescript: {
    // !! ADVERTENCIA !!
    // Permite peligrosamente que las compilaciones de producción se completen con éxito incluso si
    // tu proyecto tiene errores de tipos.
    // !! ADVERTENCIA !!
    ignoreBuildErrors: true,
  },
}

Cambios de versión