Paso 1: Instalación y Configuración

Configura tu entorno de desarrollo para trabajar con Spline en Next.js

Inicializa un nuevo proyecto Next.js con TypeScript

pnpm create next-app@latest mi-proyecto-spline
cd mi-proyecto-spline

Instala el paquete oficial de Spline para React

pnpm add @splinetool/react-spline

Agrega los tipos necesarios para Spline

pnpm add -D @types/react @types/react-dom

Estructura del Proyecto

src/app/page.tsx - Página principal

src/app/layout.tsx - Layout de la aplicación

src/app/globals.css - Estilos globales

public/scene.splinecode - Archivo de escena Spline

package.json - Dependencias del proyecto

pnpm add -D tailwindcss postcss autoprefixer
pnpm dlx tailwindcss init -p

Para estilizar fácilmente tus componentes y posicionar las escenas de Spline

# .env.local
NEXT_PUBLIC_SPLINE_SCENE_URL=/scene.splinecode

Para gestionar las URLs de las escenas de manera centralizada