Producción Lista
v16.3Next.js App Router + TypeScript + Hostinger

Proyecto Base Next.js
Optimizado para Hostinger

Plantilla arquitectónica moderna y de alto rendimiento configurada para compilar en modo estático autónomo con soporte nativo de .htaccess para servidores Apache y LiteSpeed de Hostinger hPanel o VPS.

🚀 Ver Guía de Despliegue🛠️ Explorar Arquitectura
$npm run build
> nextjsbase@0.1.0 build
> next build
▲ Next.js 16.3.4 (Static Export Mode)
✓Compiled successfully in 1.4s
✓Generating static pages (App Router)
○ /                               (Static - HTML export)
○ /_not-found                   (Static - 404.html)
✓Exporting (3/3) pages to /out
✓Copiado automático de public/.htaccess a out/.htaccess
🚀 ¡Compilación completada! Listo para subir a public_html en Hostinger.
Arquitectura de Alto Rendimiento

Diseñado para la Nube y Hosting Tradicional

Aprovecha toda la potencia del desarrollo con Next.js moderno sin necesidad de pagar por servicios Node.js dedicados en servidores compartidos.

📦

Exportación Estática Universal (`output: 'export'`)

Genera automáticamente una carpeta out/ con HTML, CSS, fuentes y JavaScript autónomos. No requiere ejecución persistente de Node.js en el servidor web, permitiendo desplegar en cualquier plan de Hosting Web de Hostinger con costo mínimo y máxima velocidad.

Cero dependencias de servidor runtime
⚡

Reglas Apache & LiteSpeed (.htaccess)

Incluye un archivo .htaccess listo para producción con redirección HTTPS forzada, compresión GZIP, cabeceras de seguridad y caché optimizada de assets.

Apache / LiteSpeed compatible
🖼️

Optimización de Imágenes Estáticas

Configuración unoptimized: true aplicada en next.config.ts para permitir el uso directo del componente <Image /> sin errores en hostings estáticos.

next/image 100% funcional
🛡️

TypeScript & App Router

Estructura basada en el nuevo App Router de Next.js con tipado estricto, React 19 y arquitectura modular y escalable dentro de src/.

TypeScript 5 + React 19
📈

Core Web Vitals 100/100

Puntuación perfecta de rendimiento: CSS nativo sin sobrecarga, fuentes optimizadas con next/font y tiempo de respuesta inferior a 50ms.

Ultra ligero & veloz
Guía Oficial Hostinger

Despliegue Paso a Paso en Hostinger

Elige el método que estás utilizando en tu panel de Hostinger:

Archivo recomendado a subir: hostinger-webapp.zip (72 KB)
Progreso:25%
✓ Listo

1. Empaquetar para Hostinger Web Apps

Ejecuta el script de empaquetado de la app web. Genera 'hostinger-webapp.zip' con package.json en la raíz (sin node_modules).

Tip: Este archivo contiene el código fuente listo para que Hostinger auto-detecte Next.js sin errores de estructura.
npm run pack:webapp
Paso 2

2. Arrastrar a 'Subí los archivos de tu app'

En la pantalla de Hostinger Web Apps, arrastra y suelta el archivo 'hostinger-webapp.zip' generado (72 KB).

Tip: Hostinger leerá package.json e identificará Next.js 16 de inmediato con el logo oficial.
Paso 3

3. Confirmar comandos de Build y Start

Verifica que en hPanel los comandos sean: Build Command: 'npm run build' y Start Command: 'npm start'.

Tip: Hostinger Web Apps instalará las dependencias en sus servidores y levantará el runtime de Node.js.
Paso 4

4. Desplegar y conectar dominio

Haz clic en 'Subir' o 'Deploy'. Hostinger compilará la app y te asignará una URL o tu dominio con SSL gratuito.

Tip: En caso de requerir variables de entorno, puedes añadirlas directamente en la sección 'Environment Variables' de hPanel.
Ficha Técnica

Especificaciones del Entorno

Componentes y tecnologías configuradas en este proyecto base.

Framework
Next.js 16.3
Librería UI
React 19.2
Destino Hosting
Hostinger hPanel
Carpeta Salida
/out (public_html)
Preguntas Frecuentes Hostinger

Buenas Prácticas para Mantener tu Proyecto

¿Cómo aplico cambios en mi web?

Haz tus modificaciones en el código, corre npm run build, y vuelve a subir los archivos generados en la carpeta out/ reemplazando los existentes en public_html de Hostinger.

¿El archivo .htaccess se sobrescribirá?

Next.js copia automáticamente public/.htaccess dentro de out/.htaccess en cada compilación. Al subir el contenido de out/, tu servidor Hostinger conservará todas las reglas intactas.

¿Qué hago si quiero usar API Routes o SSR?

Si requieres Server-Side Rendering (SSR) o API routes dinámicas en Hostinger, puedes migrar fácilmente a un VPS de Hostinger quitando output: 'export' y levantando el servidor con Node.js y PM2.