LABORATORIO NEXT.JS - LISTADO DE CASAS

Descripción

Aplicación web desarrollada con Next.js 15 (App Router) que muestra un catálogo de casas en alquiler con funcionalidad de búsqueda por ciudad.

Características

• Routing dinámico - Páginas de detalle de cada casa con rutas dinámicas
• Server Components - Renderizado del lado del servidor con uso de ISR (Incremental Static Regeneration) y SSG (Static Site Generation). Para el ejemplo, la página de listado de casas utiliza ISR pre-generada y la página de detalle de casa utiliza ISR bajo demanda.
• Client Components - Interactividad para el filtrado de búsqueda. Filtrado por ciudad en el cliente sin recargar la página.
• Optimización de imágenes - Next.js Image con optimización automática
• TypeScript - Tipado estático
• Tailwind CSS - Estilos responsivos
• API Server - Mock server con Hono para simular backend

Estructura del Proyecto

• src/app: Contiene las rutas y páginas de la aplicación Next.js
• src/pods/house-list: Módulo para el listado de casas, incluyendo componentes, mapeadores y llamadas a la API
• src/pods/house: Módulo para la página de detalle de una casa
• src/pods/search-input: Componente de entrada de búsqueda
• src/core/constants: Constantes

Instalación

1. Clonar el repositorio

git clone <repository-url>
cd nextjs-lab

2. Instalar dependencias

npm install

Esto instalará tanto las dependencias del cliente como del servidor API automáticamente.

🚀 Ejecución

Modo Desarrollo

Ejecuta tanto el servidor Next.js como el API server simultáneamente:

npm start

Esto inicia:

• Next.js dev server: http://localhost:3000
• API server: http://localhost:3001

Solo Next.js Dev Server

npm run start:dev

Solo API Server

npm run start:api-server

Modo Producción

1. Compilar el proyecto

npm run build

2. Iniciar en producción

npm run start:prod

La aplicación estará disponible en http://localhost:8080

Configuración

El archivo .env.local

Crea un archivo .env.local en la raíz del proyecto para configurar las URLs de la API si es necesario:

BASE_API_URL=http://localhost:3001/api
BASE_PICTURES_URL=http://localhost:3001
IMAGES_DOMAIN=localhost

Variables de Entorno

Las URLs de la API se configuran en src/core/constants/env.constants.ts:

export const ENV = {
  BASE_API_URL: process.env.BASE_API_URL ?? 'http://localhost:3001/api',
  BASE_PICTURES_URL: process.env.BASE_PICTURES_URL ?? 'http://localhost:3001',
};

Aliases de Importación

Configurado en package.json:

"imports": {
  "#*": "./src/*"
}