Next.js & Typescript
Tags: nextjs, typescript
Published: 2019-05-06 23:38:05

---
title: Next.js & Typescript
published: true
description: Configurar Next.js con Typescript
tags: next.js, typescript
---
![Next.js & Typescript](https://thepracticaldev.s3.amazonaws.com/i/07s4mg36kkoot4vsw452.png)

Gente querida hablahispana, voy a compartir con ustedes la manera de integrar Next.js con Typescript.

Estoy empezando a utilizar este framework que promete mucho, en el cúal ya nos da un **tooling** de React bastante completo.

- Server rendering
- Static exporting
- CSS-in-JS
- SEO friendly, y más...

Entonces, decidí inclinarme por usar este súper Framework en conjunto con Typescript, el súper set de Javascript, dónde podemos manejar tipados, interfaces, clases, etc.

Genial!

Si bien en la [documentación oficial de Next.js podemos encontrar](https://nextjs.org/docs#customizing-webpack-config), quisiera ahorrarlos con este post.

Lo primero que debemos hacer es iniciar un proyecto web, creando la carpeta de nuestro proyecto y posicionarnos en él:

```
mkdir NewProject && cd $_
```

Luego iniciamos nuestro package.json para definir nuestras dependencias (estos son los pasos iniciales para cualquier projecto de Next.js)

```
yarn init
```
_Si no poseen yarn, que es el manejador de dependencias de Node que utilizo yo, lo pueden descargar [aquí](https://yarnpkg.com/es-ES/)_

Una vez ingresado y ejecutado el comando en la consola, completamos las informaciones que nos solicita yarn para crear nuestro `package.json`, que es donde se encuentran toda la información de nuestro proyecto, dependencias y scripts.

Creamos la estructura mínima e inicial de Next.js

```
mkdir pages
```

```
touch pages/index.tsx
```

Abrimos con un editor de código `index.tsx`, en mi caso uso VS Code, y creamos nuestra página principal index.


```javascript
import React from "react"

class Index extends React.Component {
    public render() {
        return (<div>Next.js & Typescript boilerplate</div>)
    }
}

export default Index;
```

Ahora sólo nos queda decirle a Next.js que vamos a utilizalo con Typescript.

Y para eso debemos crear dos archivos en el **root** del proyecto, paralelo a `package.json`.

Creamos primero el archivo `next.config.js`:

```bash
touch next.config.js
```

Y completamos con lo siguiente:

```javascript
// Configuramos para que Next.js pueda trabajar con Typescript

const withTypescript = require("@zeit/next-typescript");

module.exports = withTypescript();
```

Luego creamos el último archivo que es `.babelrc.js`:
```
touch .babelrc.js
```

Y escribimos lo siguiente:

```javascript
// Definimos los presets para que nos transpile de TS a JS.
module.exports = {
    presets: ['next/babel', '@zeit/next-typescript/babel']
}
```

##Conclusion
Manejar este genial React framework que es Next.js con Typescript, nos da una base muy sólida para empezar nuestro proyecto web.

Cualquier cosa, les dejo el link al repo dónde estan todos los archivos del proyecto que fuimos detallando en este post.

[Next.js & Typescript](https://github.com/agustin107/nextjs-typescript-boilerplate)

_Cualquier consulta o dudas que tengan, pueden dejar sus comentarios y estaré ahí para ayudarlos_

Saludos cordiales,

**Happy coding.**