Comenzando con Next.js

La manera más fácil

Similarmente como existe una librería de NPM para iniciar proyecto con React llamada "create-react-app", existe también una denominada "create-next-app" que puedes instalar como un paquete global:

$ npm install -g create-next-app

y usarla simplemente:

$ npx create-next-app

o con Yarn

$ yarn create-next-app

Esto instalará una aplicación de ejemplo (un boilerplate) con todas las dependencias requeridas y demás en nuestro archivo package.json tendremos ya todos los scripts configurados listos para ser usados.

Sin embargo exploremos como sería crear nuestro proyecto completamente dede cero e instalando todo por nosotros mismos.

La otra manera fácil

Podemos crear nuestra carpeta donde contendremos nuestro proyecto e inicializarlo como un proyecto vacio de npm.

$ npm init -y

Luego necesitamos instalar tres dependencias,

• i. React (por supuesto)
• ii. React DOM (También por supuesto)
• iii. Next.js (Si, en realidad next es un paquete de npm)

el comando con NPM y con yarn sería algo así:

npm

$ npm i next react react-dom --save

yarn

$ yarn add next react react-dom

Lo siguiente que vamos a tener que hacer es añadir los script que necesitamos a nuestro package.json

"scripts": {
        "dev": "next",
        "build": "next build",
        "start": "next start"
    }

¿Que hacen estos comandos?

• El comando next inicializa nuestra aplicación en modo de desarrollo y con "hot reloading" o mejor dicho con una recarga cada vez que haces un cambio en el código.

• next build construye tu proyecto y lo deja optimizado y limpio para producción, (crea un nuevo folder "out" o "dist")

• next start Inicializa y ejecuta tu proyecto de producción (el que construiste con next build)

🧠 Recuerda: Next.js es un framework full-stack que necesita estar hosteado en una plataforma (servidor) que corra o soporte node.js

Eso es todo, espero que este post te sea de utilidad y lo puedas aplicar a algún proyecto que tengas en mente o que simplemente te haya ayudado a entender como iniciar tu proyecto de Next.js

Te dejo el enlace al siguiente post sobre Next.js, Enrutando páginas con Next.js

Déjame un comentario si te sirvió o si quieres añadir alguna opinión o si tienes alguna duda no dudes en dejarme un comentario en la parte de abajo, recuerda que si te gustó también puedes compartir usando los links a las redes sociales en la parte de abajo.