Que es Next.js?

Next.js al dia de hoy uno de los frameworks mas potentes dentro del desarollo web, ya que con el podras crear increibles y potentes productos sin la necesidad de perderte en la configuracion del proyecto, ya que toda esa arda y cansada configuracion lo hace Next por nosotros. Pero tranquilo tambien podras modificar y crear tu propia configuracion custom.

Pero ahora como funciona Next.js?

Next.js es un framework de JavaScript que utiliza React. Pero la gran caracteristica que posee Next.js es que te permite crear una aplicacion que se renderiza del lado del servidor(SSR) y a la su vez tambien del lado del cliente(CSR).

Pero que es esto de SSR y CSR?

Bueno para resumir este tema porque no me quiero ir mucho por las ramas. El Server Side Rendering o mas conocido por SSR, es una tecnica de desarollo web en la cual permite crear una aplicacion que se renderiza del lado del servidor y luego enviar esta aplicacion como un HTML completo al cliente. La gran ventaja de esto es que es mucho mas rapido ya que el cliente solo tiene que mostrar un HTML que ya fue procesado por el servidor, el cual sabemos que el servidor siempre es mucho mas rapido que el cliente.

En cambio el Cliente Side Rendering o tambien CSR, es lo contrario al SSR todo el HTML y JavaScript lo ejecuta del lado del cliente.

Creemos una aplicacion en Next.js

Ya te di una introduccion de que es Next.js pero ahora vamos a crear una aplicacion, yo soy partidario de que es mejor aprender con la practica que con la teoria(aunque ella ayuda mucho).

Bueno primero chequeemos si tenemos todo para crear un projecto en Next.js

1. Debemos revisar si tenemos Node instalado, yo estoy usando la version 18.15.0

2. Con Node tenemos npm, la version que uso yo es la 9.5.0

Ya que chequeamos lo primordial para crear una aplicacion en Next.js empecemos!

Para crear el proyecto de Next.js vamos a usar el siguiente comando

copy
npx create-next-app@latest

Aqui nos va a salir un mensaje que dice que necesitas instalar create-next-app, le damos que si y continuamos

A continuacion nos preguntara el nombre del proyecto, yo le colocare tutorial-next

Recuerda que para el nombre no tiene que tener espacios ni caracteres raros

La siguiente configuracion nos pregunta si queremos usar TypeScript en el proyecto, yo por el momento no voy a usar TypeScript, pero en un futuro vamos a crear proyectos con TypeScript.

Esta configuracion indica si queremos agregar eslint, yo le indicare que si.

EsLint es una herramienta que analiza nuestro codigo y nos indica si hay algun error en el.

Ahora esta configuracion ya es propia de cada uno, ya que nos pregunta si queremos agregar TailwindCSS al proyecto, yo voy a decir que si ya que no quiero estar peleando con el CSS

TailwindCSS es un framework CSS

, a mi parecer queda mas ordenado el codigo con esta carpeta asi que le dare que si

en la siguiente opcion voy a colocar que si, esto nos crea la carpeta app la cual en ella se encontrara las pages que crearemos para nuestra aplicacion

Por ultimo nos pregunta si queremos crear alias para poder manejar las importaciones, por el momento no me interesa esta opcion asi que le dare a que no

Y listo con estas configuraciones ya next sabe que hacer y va a crear nuestro proyecto, cuando next.js termine de crear el proyecto tendrias que ver algo como esto

Ahora solo queda entrar a la carpeta que nos creo Next con el siguiente comando

copy
cd tutorial-next

Una vez posicionado en la carpeta vamos a levantar el proyecto en modo de desarollador y aunque no lo creas es tan facil como solo colar este comando

copy
npm run dev

http://localhost:3000

Conclusion

Bueno creo que pudimos ver que era Next.js y a la vez vimos como crear un proyecto en Next.js, ya en el siguiente post vamos a ver como crear pages y algunas que otras cositas interesantes de Next.js 13.

Asi que me despido por el momento un gusto poder compartir mis conocimientos con ustedes, hasta luego!