Comenzando con Next.js

¿Quieres aprender a comenzar con Next.js? ¡No busques más! En este post, aprenderás dos formas diferentes de comenzar con este potente marco de trabajo y cómo configurar los scripts necesarios en tu archivo package.json. ¡Vamos a sumergirnos! 🏊

🎉 La manera más fácil: Usando create-next-app 📦

Al igual que existe una librería de NPM para iniciar un proyecto con React llamada create-react-app, también existe una llamada create-next-app. Puedes instalarla como un paquete global con el siguiente comando:

$ npm install -g create-next-app

Luego, simplemente úsala para crear una nueva aplicación:

$ 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.

🛠 La otra manera fácil: Creando tu proyecto desde cero 🌱

Puedes crear tu carpeta donde contendrás tu proyecto e inicializarlo como un proyecto vacío de npm con el siguiente comando:

$ npm init -y

Luego, necesitarás instalar tres dependencias:

1. React (por supuesto) 🎨
2. React DOM (también por supuesto) 🌐
3. Next.js (sí, en realidad Next es un paquete de npm) 🚀

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

# Con npm
$ npm i next react react-dom --save

# Con yarn
$ yarn add next react react-dom

Lo siguiente que haremos es añadir los scripts necesarios a nuestro archivo package.json:

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

¿Qué hacen estos comandos? 🤔

• dev: Ejecuta Next.js en modo de desarrollo.
• build: Crea una versión optimizada de producción de tu aplicación.
• start: Inicia el servidor de producción.

🧠 Recuerda: Next.js es un framework full-stack que necesita estar alojado en una plataforma (servidor) que soporte Node.js.

🎯 Conclusiones

En este post, aprendimos dos formas diferentes de comenzar con Next.js:

1. Usando create-next-app para instalar un boilerplate con todas las dependencias requeridas.
2. Creando nuestro propio proyecto desde cero e instalando las dependencias necesarias.

💪 Ejercicios para practicar

1. Crea un nuevo proyecto de Next.js utilizando ambas formas mencionadas en este post.
2. Experimenta con la adición de páginas y componentes a tu aplicación Next.js.
3. Investiga cómo implementar tu aplicación Next.js en un servidor de producción.

📚 Resumen

1. Aprendimos a crear un proyecto de Next.js utilizando create-next-app.
2. Aprendimos cómo instalar y configurar las dependencias necesarias para un proyecto de Next.js desde cero.
3. Configuramos los scripts necesarios en nuestro archivo `package.json

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.