Next.js

Next.js es un framework de React para desarrollar aplicaciones 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.

—