Next.js es un marco bien conocido para React que te ayuda a crear sitios web rápidos y modernos, que es fácil de usar y tiene características poderosas como renderizado del lado del servidor, creación de páginas estáticas y construcción de APIs.
Si estás buscando comenzar un proyecto de Next.js en tus sistemas basados en Ubuntu, esta guía te llevará a través del proceso paso a paso.
Requisitos previos
Antes de comenzar a configurar un proyecto de Next.js, hay algunas cosas que necesitarás instalar en tu sistema Linux, que incluyen:
Node.js: Next.js está construido sobreNode.js, así que necesitas tener Node.js instalado.npm: npm (Node Package Manager) se utiliza para gestionar los paquetes y dependencias de tu proyecto.
Vamos a repasar el proceso de instalación tanto de Node.js como de npm.
Paso 1: Instalar Node.js y NPM en Linux
Antes de instalar cualquier nuevo software, es una buena idea actualizar tu lista de paquetes para asegurarte de que estás instalando la última versión del software disponible en los repositorios.
sudo apt update
A continuación, puedes instalar Node.js (también se instala npm), es mejor instalar la versión de Node.js que está marcada como LTS (Soporte a Largo Plazo), ya que es la versión más estable y utilizada.
sudo apt install nodejs
Una vez completada la instalación, verifica que Node.js esté instalado correctamente comprobando su versión:
node -v npm -v
Ahora tienes tanto Node.js como npm instalados en tu sistema.
Paso 2: Instalar y Configurar el Proyecto Next.js
Ahora que tienes Node.js y npm instalados, es hora de crear un nuevo proyecto Next.js. La forma más fácil de instalar Next.js es utilizando create-next-app, que es un paquete oficial proporcionado por el equipo de Next.js.
sudo npm install -g create-next-app
Ahora que create-next-app está instalado, puedes crear un nuevo proyecto Next.js.
npx create-next-app@latest my-next-app
Aquí, my-next-app es el nombre de tu carpeta de proyecto. Puedes reemplazarlo con cualquier nombre que prefieras. El comando npx descargará y ejecutará el paquete create-next-app, y configurará un nuevo proyecto Next.js para ti.
Una vez que el comando termine de ejecutarse, tendrás una nueva carpeta llamada my-next-app con la estructura básica de una aplicación Next.js.
Paso 3: Ejecuta tu Proyecto Next.js
Después de que el proyecto se haya creado, entra en tu carpeta de proyecto y comienza el servidor de desarrollo:
cd my-next-app npm run dev
Este comando iniciará el servidor de desarrollo de Next.js. Por defecto, el servidor se ejecutará en http://localhost:3000.
Abre tu navegador y ve a esa URL, y deberías ver la página de bienvenida predeterminada de Next.js.
Puedes comenzar a crear nuevas páginas en la carpeta app. Por ejemplo, crea un nuevo archivo about.js dentro del directorio app para crear una página de Acerca de.
Conclusión
¡Has configurado exitosamente un nuevo proyecto de Next.js en tu máquina Ubuntu! Ahora puedes comenzar a construir tu aplicación web añadiendo nuevas páginas, componentes y características.
Next.js facilita la construcción de aplicaciones web modernas, y con la ayuda de esta guía, has aprendido cómo instalar y configurar un proyecto de Next.js.