Como agregar TypeScript a Nextjs en 2 pasos

Nextjs puede ser de gran ayuda para sacarle provecho a Reactjs, cuando le agregamos TypeScript puede llegar a ser aún mejor.

1- Crear un proyecto de Nextjs, como de costumbre usando npx:

npx create-next-app nextjs-con-typescript --use-npm

2- Agregamos las dependencias necesarias:

npm install --save-dev typescript @types/react @types/node

Una vez instalado todo lo necesario le puedes cambiar la extension al archivo pages/index.js a pages/index.tsx entonces Nextjs generará automáticamente el archivo tsconfig.json que es donde se guardan las configuraciones para transpilar TypeScript.

Listo! Ahora puedes ejecutar tu proyecto y funcionará según lo esperado

npm run dev

Puedes notar que también se generó el archivo next-env.d.ts en la raíz del proyecto, no necesitamos tocarlo.

Tipos incluidos

Por otro lado Nextjs incluye los tipos que puedas necesitar, para cada uno de los métodos de renderizado:

1import { GetStaticProps, GetStaticPaths, GetServerSideProps } from 'next'
2 
3export const getStaticProps: GetStaticProps = async context => {
4 // ...
5}
6 
7export const getStaticPaths: GetStaticPaths = async () => {
8 // ...
9}
10 
11export const getServerSideProps: GetServerSideProps = async context => {
12 // ...
13}

Tipos para los controladores del api:

import { NextApiRequest, NextApiResponse } from 'next'
 
export default (req: NextApiRequest, res: NextApiResponse) => {
 // ...
}

Para el archivo _app.tsx en caso de que quieras personalizarlo:

1import type { AppProps } from 'next/app'
2
3function MyApp({ Component, pageProps }: AppProps) {
4  return <Component {...pageProps} />
5}
6
7export default MyApp

También para el archivo _document.tsx:

1import Document, { DocumentContext, Html, Head, Main, NextScript } from "next/document";
2 
3class MyDocument extends Document {
4 static async getInitialProps(ctx: DocumentContext) {
5   const initialProps = await Document.getInitialProps(ctx);
6 
7   return initialProps;
8 }
9 
10 render() {
11   return (
12     <Html>
13       <Head />
14       <body>
15         <Main />
16         <NextScript />
17       </body>
18     </Html>
19   );
20 }
21}
22 
23export default MyDocument;

De estas formas Nextjs nos permite incluir TypeScript y sacarle el máximo provecho.

Actualizado 02/11/2020 a las 12:48

typescript

nextjs