⚡Features

CSV Import/Export

Daten rein und raus mit CSV-Dateien

Jeder Kunde will irgendwann seine Daten exportieren oder Daten aus Excel importieren. CSV ist das universelle Format dafuer. Mit Papa Parse und ein paar Zeilen Code baust du Import und Export in Minuten.

Pro-Tip — Der schnelle Weg

Validiere importierte CSV-Daten genau wie API-Input. Nutzer schicken dir kaputte Dateien mit fehlenden Spalten, falschen Typen und Sonderzeichen. Zod-Validierung pro Zeile ist Pflicht.

Seite 1

Papa Parse installieren

Papa Parse ist die Standard-Library fuer CSV in JavaScript. Sie parst und generiert CSV-Dateien zuverlaessig, auch mit Sonderzeichen und Umlauten.

npm install papaparse
npm install -D @types/papaparse

CSV Export bauen

Hole die Daten aus der Datenbank, konvertiere sie in CSV und sende sie als Download. Papa Parse macht die Konvertierung zuverlaessig.

// app/api/export/users/route.ts
import Papa from 'papaparse';

export async function GET() {
const users = await db.user.findMany({
select: { name: true, email: true, role: true, createdAt: true },
});

const csv = Papa.unparse(users);
return new Response(csv, {
headers: {
'Content-Type': 'text/csv; charset=utf-8',
'Content-Disposition': 'attachment; filename="users.csv"',
},
});
}

CSV Import mit Validierung

Parse die hochgeladene CSV-Datei und validiere jede Zeile mit Zod. Sammle Fehler und gib sie dem User zurueck.

import Papa from 'papaparse';
import { z } from 'zod';

const RowSchema = z.object({
name: z.string().min(1),
email: z.string().email(),
role: z.enum(['admin', 'editor', 'user']),
});

export async function POST(request: Request) {
const formData = await request.formData();
const file = formData.get('file') as File;
const text = await file.text();
const { data } = Papa.parse(text, { header: true, skipEmptyLines: true });

const results = { success: 0, errors: [] as string[] };
for (const [i, row] of data.entries()) {
const parsed = RowSchema.safeParse(row);
if (!parsed.success) {
results.errors.push(`Zeile ${i + 2}: ${parsed.error.issues[0].message}`);
continue;
}
await db.user.create({ data: parsed.data });
results.success++;
}
return Response.json(results);
}

Frontend Upload-Komponente

Bau ein einfaches File-Input mit Drag-and-Drop das die CSV-Datei zur API sendet und das Ergebnis anzeigt.

'use client';
import { useState } from 'react';

export function CsvImport() {
const [result, setResult] = useState<{ success: number; errors: string[] } | null>(null);

async function handleUpload(e: React.ChangeEvent<HTMLInputElement>) {
const file = e.target.files?.[0];
if (!file) return;
const formData = new FormData();
formData.append('file', file);
const res = await fetch('/api/import/users', { method: 'POST', body: formData });
setResult(await res.json());
}

return (
<div>
<input type='file' accept='.csv' onChange={handleUpload} />
{result && <p>{result.success} importiert, {result.errors.length} Fehler</p>}
</div>
);
}

Seite 2

Warum das funktioniert

CSV ist universell, jedes Programm von Excel bis Google Sheets kann es oeffnen
Papa Parse behandelt Edge-Cases wie Kommas in Werten und Zeilenumbrueche korrekt
Zod-Validierung pro Zeile gibt praezise Fehlermeldungen statt kryptischer Crashes
FormData-Upload funktioniert nativ im Browser ohne extra Libraries

Tipps

Setze ein Limit fuer die Dateigroesse, 10MB reicht fuer hunderttausende Zeilen
Fuer grosse Imports nutze Streaming statt alles auf einmal in den Speicher zu laden
Fuege einen BOM-Header hinzu damit Excel die Umlaute korrekt anzeigt
Teste mit echten Kundendaten, nicht nur mit sauberen Testdaten

Seite 3

Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen