✨ Características y funcionalidades

NK Next Starter incluye funcionalidades comunes que sirven como base para comenzar nuevos proyectos de /nk.studio.

🌐 Internacionalización

• Inglés y español configurados.
• Inglés como idioma predeterminado.
• Rutas localizadas.
• URLs traducidas.
• Navegación tipada.
• Selector de idioma.
• Detección de idioma en la página principal.
• Preferencia de idioma mediante cookies.
• Redirección del prefijo del idioma predeterminado.
• Normalización de URLs a minúsculas.
• Etiquetas hreflang.

🔗 Rutas y navegación

• App Router de Next.js.
• Rutas estáticas y dinámicas.
• Rutas centralizadas en constantes.
• Helpers para enlaces internos y externos.
• Localización automática de enlaces internos.
• Apertura segura de enlaces externos.
• Tipos compartidos para páginas.
• Ejemplos de generateStaticParams.

🎨 Sistema de diseño

• Tailwind CSS 4.
• Tokens de colores y tipografías.
• Breakpoints compartidos.
• Reset de estilos.
• Wrapper global.
• Grilla responsive de 4 columnas en mobile y 12 desde tablet.
• Utilidades de layout.
• Clases globales para animaciones.
• Debug Grid disponible en desarrollo.

🧩 Componentes base

• Header.
• Footer.
• Button.
• LangPicker.
• Loader.
• PageTransition.
• SmoothScroll.
• ScrollTrigger.
• MotionProvider.
• ErrorPage.
• DebugGrid.
• ByNk.

🎬 Animaciones

• GSAP.
• ScrollTrigger.
• SplitText.
• Smooth scroll con Lenis.
• Loader inicial.
• Contador animado.
• Círculo SVG animado.
• Transición de página tipo cortina.
• Animación de entrada para el primer viewport.
• Animaciones activadas por scroll.
• Easings y duraciones centralizados.
• Bloqueo global del scroll.
• Espera de fuentes antes de animar textos.
• Compatibilidad con prefers-reduced-motion.

Clases declarativas

• js-s-lines
• js-s-fade-in
• js-s-scale
• js-s-fade-out
• js-s-print-opacity
• js-s-print-blur
• js-s-blur
• js-s-fade-in-out
• js-s-parallax
• js-s-translate-x
• js-s-mask-x
• js-s-mask-y

🔍 SEO y analítica

• Metadata centralizada.
• Canonical URLs.
• Open Graph.
• Twitter Cards.
• Etiquetas hreflang.
• JSON-LD.
• Sitemap.
• robots.txt.
• llms.txt.
• Google Analytics.
• Google Tag Manager.

🚨 Manejo de errores

• Página global de error.
• Página 404.
• Componente reutilizable para páginas de error.
• Reintento de operaciones.
• Reporte opcional de errores mediante Slack.

🧠 Estado global

Zustand administra:

• Disponibilidad del scroll.
• Estado del loader.
• Carga de fuentes.
• Estado de las transiciones.

🧰 Herramientas de desarrollo

• React Compiler.
• Turbopack.
• TypeScript.
• ESLint.
• Prettier.
• Husky.
• lint-staged.
• Importación de SVG como componentes React.
• Eliminación de console.log en producción.
• Debug Grid disponible únicamente en desarrollo.

🔐 Seguridad

• Headers de seguridad configurados desde Next.js.
• Eliminación del header X-Powered-By.
• Restricción de cámara, micrófono y geolocalización.
• Restricción del sitio dentro de frames.
• Política de referentes.
• Protección contra interpretación incorrecta de tipos MIME.