Natuurlijk! Hier is een stapsgewijze handleiding om SvelteKit te integreren in je bestaande Svelte-project "MijnPortfolio", inclusief routing, pagina's, API endpoints en best practices: ### 1. Overstappen van Svelte naar SvelteKit - **Nieuwe project aanmaken:** Het is het meest overzichtelijk om een nieuw SvelteKit-project te starten en je bestaande code te migreren. ```bash npm create svelte@latest MijnPortfolio cd MijnPortfolio ``` - **Installatie:** Volg de prompts om je project op te zetten, bijvoorbeeld met TypeScript of JavaScript. - **Dependencies installeren:** ```bash npm install ``` ### 2. Routing en Pagina's - **Bestandsstructuur:** In SvelteKit gebruik je de map `src/routes` voor routing. - **Pagina's maken:** Voor bijvoorbeeld een homepagina: ``` src/routes/+page.svelte ``` - **Dynamische routes:** Voor gebruikersprofielen maak je een map met een parameter: ``` src/routes/profielen/[username]/+page.svelte ``` Dit zorgt voor dynamische routing op basis van `username`. ### 3. Voorbeeld van een dynamische profielpagina `src/routes/profielen/[username]/+page.svelte`: ```svelte <script> export let params; let username = params.username; // eventueel API-oproep om gegevens te laden </script> <h1>Profiel van {username}</h1> <!-- inhoud profiel --> ``` ### 4. API Endpoints - **API maken:** Plaats API endpoints in `src/routes/api/`. - **Voorbeeld van een API endpoint:** ``` src/routes/api/profiel/[username]/+server.js ``` ```js export async function GET({ params }) { const { username } = params; // Hier haal je databronnen of mock data op return new Response(JSON.stringify({ username, naam: "Voorbeeld Naam" }), { headers: { 'Content-Type': 'application/json' } }); } ``` - **Gebruik in +page.svelte:** ```svelte <script> import { onMount } from 'svelte'; let profiel = {}; export let params; const { username } = params; onMount(async () => { const res = await fetch(`/api/profiel/${username}`); profiel = await res.json(); }); </script> <h1>Profiel van {profiel.naam}</h1> ``` ### 5. Best practices voor projectstructuur - **Routes:** Organiseer routes overzichtelijk, bijvoorbeeld: ``` src/ routes/ +page.svelte (home) profielen/ [username]/ +page.svelte (profielpagina) ``` - **API endpoints:** Plaats ze in een aparte map en houd ze gescheiden van de frontend componenten. - **Componenten:** Plaats herbruikbare componenten in `src/lib/components/`. - **Stores:** Gebruik Svelte stores voor gedeelde state. ### 6. Server-side functionaliteiten en data - **Load functies:** Gebruik `+page.server.js` of `+page.js` met `load()` om data server-side te laden en te injecteren in je pagina. Bijvoorbeeld: ```js // src/routes/profielen/[username]/+page.server.js export async function load({ params }) { const { username } = params; // haal data op uit database of API const profielData = await fetchProfileFromDB(username); return { profiel: profielData }; } ``` - **Gebruik in +page.svelte:** ```svelte <script> export let data; let { profiel } = data; </script> ``` ### Samenvatting - Start een nieuw SvelteKit-project. - Structureer je routes met `src/routes`, gebruik dynamische routes voor gebruikersprofielen. - Maak API endpoints in `src/routes/api/`. - Gebruik `load()` functies voor server-side data laden. - Houd je project overzichtelijk met duidelijke mappen voor componenten en data. Wil je nog specifieke voorbeelden of hulp bij migratie van bestaande code?

Hallo! Ik help je graag met het integreren van SvelteKit in je MijnPortfolio project. Hier zijn de gedetailleerde stappen: ## 1. SvelteKit toevoegen aan bestaand project ```bash # Navigeer naar je projectmap cd MijnPortfolio # Voeg SvelteKit toe npm install @sveltejs/kit # Update je package.json scripts # Vervang "svelte" door "kit" in build/dev scripts ``` ## 2. Projectstructuur aanpassen ``` MijnPortfolio/ ├── src/ │ ├── routes/ │ │ ├── +page.svelte # Homepage │ │ ├── about/ │ │ │ └── +page.svelte # Over pagina │ │ ├── profielen/ │ │ │ ├── +page.svelte # Profielen overzicht │ │ │ └── [slug]/ │ │ │ └── +page.svelte # Dynamische routing │ ├── lib/ │ │ ├── components/ │ │ ├── utils/ │ │ └── stores/ │ └── app.html ├── static/ │ └── assets/ ├── svelte.config.js └── package.json ``` ## 3. Dynamische routing voor profielen **src/routes/profielen/[slug]/+page.svelte**: ```svelte <script> import { page } from '$app/stores'; export let data; $: ({ profiel } = data); </script> {#if profiel} <h1>{profiel.naam}</h1> <p>{profiel.bio}</p> {/if} ``` **src/routes/profielen/[slug]/+page.server.js**: ```javascript export async function load({ params }) { // Haal profiel data op (bijv. uit database) const profiel = await getProfielBySlug(params.slug); if (!profiel) { return { status: 404, error: new Error('Profiel niet gevonden') }; } return { profiel }; } // Voorbeeld data functie async function getProfielBySlug(slug) { // Hier zou je je database query doen const profielen = { 'jan-jansen': { naam: 'Jan Jansen', bio: 'Frontend developer' }, 'marie-meijer': { naam: 'Marie Meijer', bio: 'UX Designer' } }; return profielen[slug] || null; } ``` ## 4. API Endpoints maken **src/routes/api/profielen/+server.js**: ```javascript import { json } from '@sveltejs/kit'; export async function GET() { const profielen = await getAllProfielen(); return json(profielen); } export async function POST({ request }) { const data = await request.json(); // Valideer en sla op const nieuwProfiel = await createProfiel(data); return json(nieuwProfiel, { status: 201 }); } ``` ## 5. Best practices voor projectstructuur **svelte.config.js**: ```javascript import adapter from '@sveltejs/adapter-auto'; /** @type {import('@sveltejs/kit').Config} */ const config = { kit: { adapter: adapter() } }; export default config; ``` **src/lib/stores/profielen.js**: ```javascript import { writable } from 'svelte/store'; export const profielenStore = writable([]); export async function loadProfielen() { const response = await fetch('/api/profielen'); const profielen = await response.json(); profielenStore.set(profielen); } ``` ## 6. Server-side functionaliteiten **src/hooks.server.js**: ```javascript export async function handle({ event, resolve }) { // Authentication/logging voor alle requests console.log(`Request: ${event.request.method} ${event.url.pathname}`); const response = await resolve(event); return response; } ``` ## 7. TypeScript ondersteuning (optioneel) **src/app.d.ts**: ```typescript declare global { namespace App { interface Locals { user: any; // Pas aan naar je user type } } } export {}; ``` ## 8. Build en deployment ```bash # Development npm run dev # Build voor productie npm run build # Preview build npm run preview ``` ## Belangrijke tips: 1. **Gebruik `+page.server.js`** voor server-side data loading 2. **Implementeer error handling** in load functies 3. **Gebruik SvelteKit's fetch** voor server-side requests 4. **Cache strategieën** implementeren voor betere performance 5. **Environment variables** gebruiken voor gevoelige data Wil je dat ik specifieke onderdelen verder uitwerk of heb je vragen over bepaalde implementaties?