Nextjs

Next.js es un framework de React que permite crear aplicaciones web modernas con funcionalidades avanzadas, como renderizado del lado del servidor (SSR), generación de páginas estáticas (SSG), enrutamiento integrado, soporte para API, y optimización de rendimiento. Es ideal para construir aplicaciones rápidas, escalables y con excelente SEO.

Requisitos para usar Next.js

1. Node.js: Asegúrate de tener Node.js instalado. Puedes descargarlo Cómo instalar y usar NVM para gestionar versiones de Node.js en Ubuntu y Windows
2. Editor de código: Te recomiendo Visual Studio Code, pero puedes usar cualquier otro que prefieras.
3. Conocimientos básicos de React: Next.js se basa en React, así que tener una idea de cómo funciona React será útil.

Pasos para crear tu primera app con Next.js

Ejecuta los siguientes comandos en tu terminal

npx create-next-app@latest

Realizara la siguiente configuración 

√ What is your project named? ... primer-app
√ Would you like to use TypeScript? ... No / Yes
√ Would you like to use ESLint? ... No / Yes
√ Would you like to use Tailwind CSS? ... No / Yes
√ Would you like to use `src/` directory? ... No / Yes
√ Would you like to use App Router? (recommended) ... No / Yes
√ Would you like to customize the default import alias (@/*)? ... No / Yes
√ What import alias would you like configured? ... @/*
Creating a new Next.js app in C:\code\nextjs\primer-app.

Entra al directorio del proyecto

cd primer-app

Crea la siguiente estructura

Estructura principal:

1. /pages: Esta es una de las carpetas más importantes, ya que cada archivo dentro de ella representa una ruta o página en tu aplicación. Algunas páginas predefinidas que encontrarás son:

   • index.js: Esta es la página principal de tu aplicación, o sea, lo que verás cuando accedas a la URL raíz (/). Es el equivalente a la "home" de tu sitio.
   • _app.js: Este archivo es un componente personalizado que permite modificar el comportamiento global de tu aplicación, como incluir layouts, estilos globales o proveer contexto.
   • _document.js (opcional): Aquí puedes personalizar el documento HTML que se sirve a las páginas. Este archivo se usa comúnmente para modificar la estructura HTML por defecto.

2. /public: Esta carpeta contiene todos los archivos estáticos, como imágenes, videos, iconos, etc. Cualquier archivo que coloques aquí será accesible en la web desde la raíz, por ejemplo: si colocas logo.png en esta carpeta, será accesible en http://localhost:3000/logo.png.

3. /styles: Aquí encontrarás los archivos CSS para los estilos de tu aplicación. Los que vienen por defecto son:

   • globals.css: Se aplica globalmente a toda la aplicación.
   • Home.module.css: Estilos específicos para la página index.js. Next.js soporta módulos CSS, lo que permite tener estilos locales a un componente o página.

4. /node_modules: Esta carpeta contiene todas las dependencias que instalaste con npm o yarn. No necesitas interactuar directamente con esta carpeta.

5. .next: Esta carpeta es generada automáticamente al compilar tu proyecto en modo de desarrollo o producción. Contiene el código empaquetado y optimizado que se ejecuta en el servidor.

Archivos de configuración:

1. package.json: Este archivo es crucial para la administración de dependencias y scripts del proyecto. Aquí verás los comandos para ejecutar el proyecto, por ejemplo:

   • npm run dev: Inicia el servidor de desarrollo.
   • npm run build: Compila el proyecto para producción.
   • npm run start: Sirve la aplicación en modo producción después de compilarla.

   También encontrarás las dependencias que usa tu proyecto, como react, next, y react-dom.

2. next.config.js (opcional): Este archivo se utiliza para configurar ciertos comportamientos de Next.js, como la optimización de imágenes, la configuración de rutas, el uso de variables de entorno y otras opciones avanzadas. Por defecto, puede que no esté creado, pero puedes agregarlo para personalizaciones avanzadas.

3. .eslintrc.json: Es un archivo de configuración para ESLint, una herramienta que te ayuda a identificar problemas con el código y mantener un estilo consistente. Next.js incluye una configuración básica que puedes personalizar.

4. .gitignore: Este archivo indica qué archivos y carpetas deben ser ignorados por Git (como node_modules y .next). Es útil para evitar subir archivos innecesarios o sensibles a tu repositorio.

Ejecutar el proyecto

npm run dev

Esto levantará un servidor local (por defecto en http://localhost:3000) donde podrás ver tu aplicación en tiempo real.

Abre el archivo pages/index.js y modifica el contenido:

Crear tu primera página

Abre el archivo pages/index.js y modifica el contenido

export default function Home() {
  return (
    <div>
      <h1>¡Hola, Next.js!</h1>
      <p>Esta es mi primera aplicación con Next.js.</p>
    </div>
  );
}

Construir y desplegar

Cuando estés listo para llevar tu aplicación a producción:

Construye el proyecto:

npm run build

Inicia el servidor de producción:

npm start

También puedes desplegar fácilmente en plataformas como Vercel, que fue creada por los desarrolladores de Next.js.