Next.js & Typescript

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, 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í

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.

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:

touch next.config.js

Y completamos con lo siguiente:

// 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:

// 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

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

Saludos cordiales,

Happy coding.