Concepto clave

La estructura de archivos en SvelteKit es como el plano arquitectónico de un edificio moderno. Cada carpeta y archivo tiene un propósito específico que determina cómo se organiza y sirve tu aplicación. El enrutamiento basado en archivos significa que la estructura de carpetas de tu proyecto define directamente las rutas URL de tu aplicación, similar a cómo los departamentos en un edificio se organizan por pisos y números.

Imagina que estás construyendo un centro comercial digital: la carpeta src/routes es el mapa principal donde cada subcarpeta representa una sección diferente (como 'ropa', 'electrónica', 'restaurantes'). Los archivos +page.svelte son las tiendas individuales dentro de cada sección, mientras que +page.server.js sería el almacén tras bambalinas que maneja la lógica del servidor para esa tienda.

Cómo funciona en la práctica

Cuando creas una nueva aplicación SvelteKit, obtienes una estructura predeterminada que puedes expandir según tus necesidades. Vamos a crear un ejemplo paso a paso para un blog simple:

Crea la carpeta src/routes/blog para todas las entradas del blog
Dentro, crea +page.svelte para listar todas las entradas
Para entradas individuales, crea subcarpetas como src/routes/blog/[slug]
En cada subcarpeta, coloca un archivo +page.svelte para mostrar la entrada
Agrega +page.server.js para cargar datos desde una base de datos

Esta estructura automáticamente crea rutas como /blog para el listado y /blog/mi-primera-entrada para entradas individuales, sin necesidad de configuración manual de rutas.

Código en acción

Veamos cómo se ve esto en código real. Primero, la estructura básica de archivos:

src/
├── routes/
│   ├── +layout.svelte
│   ├── +page.svelte
│   ├── about/
│   │   └── +page.svelte
│   └── blog/
│       ├── +page.svelte
│       ├── +page.server.js
│       └── [slug]/
│           ├── +page.svelte
│           └── +page.server.js
└── lib/
    └── utils.js

Ahora, el contenido de src/routes/blog/+page.server.js que carga datos del servidor:

// Cargando datos del servidor para la página del blog
export async function load({ fetch }) {
    // En producción, esto vendría de una API o base de datos
    const response = await fetch('/api/posts');
    const posts = await response.json();
    
    return {
        posts: posts.map(post => ({
            slug: post.slug,
            title: post.title,
            excerpt: post.excerpt
        }))
    };
}

Errores comunes

Anidación excesiva de carpetas: Crear rutas como src/routes/admin/users/list/all/+page.svelte resulta en URLs largas y difíciles de mantener. Mejor: src/routes/admin/users/+page.svelte con parámetros de consulta.
Olvidar los archivos +layout: No usar +layout.svelte para elementos compartidos como navegación, forzando duplicación de código. La solución es crear layouts anidados para secciones específicas.
Mala organización de componentes: Poner todos los componentes en src/lib/components sin subcarpetas. Organiza por dominio: components/ui/ para elementos de interfaz, components/blog/ para componentes específicos del blog.
Confundir +page.server.js con +server.js: El primero es para cargar datos de páginas, el segundo para crear endpoints API. Usa cada uno según su propósito específico.
Ignorar los hooks del servidor: No implementar src/hooks.server.js para manejar autenticación global o transformación de datos, perdiendo capacidades importantes de SvelteKit.

Checklist de dominio

✓ Puedo explicar la diferencia entre +page.svelte, +layout.svelte y +page.server.js
✓ He creado rutas dinámicas usando parámetros como [slug] o [id]
✓ Sé organizar componentes en la carpeta lib/ con una estructura lógica
✓ Puedo implementar layouts anidados para diferentes secciones de mi app
✓ Entiendo cuándo usar load() en el cliente vs en el servidor
✓ He configurado rutas de grupo con (carpetas) para organización
✓ Puedo crear endpoints API usando archivos +server.js

Refactoriza una estructura de archivos desorganizada

Te han entregado un proyecto SvelteKit con la siguiente estructura desorganizada:

src/
├── routes/
│   ├── home.svelte
│   ├── userProfile.svelte
│   ├── allProducts.svelte
│   ├── productDetail.svelte
│   └── adminPanel.svelte
└── components/
    ├── Header.svelte
    ├── Footer.svelte
    ├── ProductCard.svelte
    ├── UserForm.svelte
    └── AdminTable.svelte

Paso 1: Convierte esta estructura al sistema de enrutamiento basado en archivos de SvelteKit. Crea las carpetas necesarias en src/routes/ y renombra los archivos usando la convención +page.svelte.

Paso 2: Identifica qué rutas deberían ser dinámicas (como productDetail) y crea la estructura adecuada usando parámetros entre corchetes.

Paso 3: Reorganiza los componentes en src/lib/ creando subcarpetas lógicas. Considera separar componentes de UI, componentes específicos de dominio, y utilidades.

Paso 4: Crea al menos un archivo +layout.svelte que incluya Header y Footer para todas las páginas, y otro layout específico para la sección de administración.

Paso 5: Para la página de detalle de producto, implementa un archivo +page.server.js que simule cargar datos desde una API usando fetch().

Pistas

Recuerda que SvelteKit ignora el nombre del archivo y solo considera su posición en la estructura de carpetas
Los parámetros dinámicos van entre corchetes: [id], [slug], etc.
Piensa en qué componentes se usan en múltiples lugares vs. componentes específicos de una ruta

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.

Entiende la estructura de archivos y enrutamiento