====== Next.js ======

**Next.js** es un **[[framework]] de [[React]]** para desarrollar [[aplicacion]]es web modernas. Está diseñado para ofrecer una experiencia de desarrollo optimizada con:

---

### 🚀 **Características clave**

* **Rendering híbrido:** puedes usar *Static Generation (SSG)*, *Server-Side Rendering (SSR)* o ambos.

* **Routing automático:** estructura de archivos = rutas.

* **API Routes:** crea funciones backend directamente en tu app (sin necesidad de un servidor aparte).

* **Optimización de imágenes:** con `next/image`.

* **Soporte TypeScript integrado.**

* **Built-in CSS y CSS Modules**, y soporte para Tailwind, Sass, etc.

* **Despliegue fácil** en plataformas como **[[Vercel]]** (creado por los mismos autores de Next.js).


----
Aquí tienes un **tutorial paso a paso para crear una web moderna con Next.js**, ideal si estás empezando desde cero.

---

## 🚀 Tutorial básico: Web con Next.js

### 🧱 Requisitos previos

Antes de comenzar, asegúrate de tener instalado:

* [[[Node.js]](https://nodejs.org) (recomendado: v18 o superior)

* [[Git]](https://git-scm.com/)

* Editor de código (recomendado: [[Visual Studio Code]])

---

### 1. 📦 Crear proyecto con Next.js

Abre la terminal y ejecuta:
----
npx create-next-app@latest mi-web
cd mi-web
npm run dev
----
Esto:

* Crea una carpeta `mi-web`

* Instala todo lo necesario

* Inicia el servidor local en `http://localhost:3000`

---

### 2. 🛠 Estructura del proyecto

```
mi-web/
├─ pages/           → Páginas web (home, about, etc.)
│  ├─ index.js      → Página principal ("/")
│  ├─ about.js      → Otra página ("/about")
├─ public/          → Imágenes y recursos estáticos
├─ styles/          → CSS global o módulos
├─ components/      → Componentes reutilizables (crear tú mismo)
├─ package.json     → Dependencias y scripts
```

---

### 3. ✏️ Editar la página principal

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

```jsx
export default function Home() {
  return (
    <main>
      <h1>Bienvenido a mi web con Next.js</h1>
      <p>Esta es una web moderna creada paso a paso.</p>
    </main>
  );
}
```

---

### 4. ➕ Crear una nueva página

Crea el archivo `pages/about.js`:

```jsx
export default function About() {
  return (
    <main>
      <h1>Sobre nosotros</h1>
      <p>Información adicional sobre el sitio.</p>
    </main>
  );
}
```

Accede a ella en `http://localhost:3000/about`.

---

### 5. 🔗 Añadir navegación entre páginas

Edita `pages/index.js`:

```jsx
import Link from 'next/link';

export default function Home() {
  return (
    <main>
      <h1>Página principal</h1>
      <Link href="/about">Ir a Sobre nosotros</Link>
    </main>
  );
}
```

---

### 6. 🎨 Estilos

Modifica `styles/globals.css` o crea módulos CSS específicos para cada componente.

Ejemplo en `styles/Home.module.css`:

```css
.titulo {
  color: blue;
  text-align: center;
}
```

Y en tu página:

```jsx
import styles from '../styles/Home.module.css';

<h1 className={styles.titulo}>Hola mundo</h1>
```

---

### 7. 📦 Desplegar en Vercel (gratis)

1. Crea una cuenta en [vercel.com](https://vercel.com)
2. Conecta tu repositorio de GitHub
3. Vercel detectará que es un proyecto Next.js y lo desplegará automáticamente.

---