Kom i gang med LLM-First Boilerplate: Fra null til lansering

Du har hørt om AI-assistert utvikling. Du har sett folk bygge hele applikasjoner på timer i stedet for uker. Nå er det din tur.

Denne guiden tar deg fra en tom mappe til en fullstendig fungerende Next.js-applikasjon — med autentisering, database, betalinger, og alt du trenger for å lansere.

Det beste? Du kommer til å skrive nesten ingen kode selv.

Hva du trenger

Før vi starter, sørg for at du har:

• Node.js 18+ installert
• Claude Code CLI (Anthropics offisielle kodingsassistent)
• En Neon-konto for PostgreSQL-database (gratis tier fungerer fint)
• En Stripe-konto for betalinger (test-modus er greit for å starte)

Steg 1: Klon boilerplaten

Start med å klone repoet:

git clone https://github.com/your-username/llm-first-boilerplate.git my-app
cd my-app
npm install

Dette gir deg en komplett Next.js 15-applikasjon med:

• App Router og Server Components
• Drizzle ORM for typesikre database-queries
• Better Auth for fleksibel autentisering
• shadcn/ui for vakre komponenter
• Stripe-integrasjon klar til bruk

Steg 2: Kjør oppsettsveiviseren

Her skjer magien. I stedet for å manuelt konfigurere alt, la Claude Code gjøre jobben:

claude

Når Claude Code starter, skriv:

/setup

Oppsettsveiviseren vil guide deg gjennom:

1. Appnavn og beskrivelse — Hva skal du bygge?
2. Database-tilkobling — Koble til din Neon PostgreSQL
3. Autentisering — Velg Google, Apple, eller e-post
4. Analytics — PostHog, Meta Pixel, eller begge
5. Miljøvariabler — Alt konfigureres automatisk

Steg 3: Sett opp databasen

Etter at veiviseren er ferdig, kjør database-migrasjonen:

npm run db:migrate

Dette oppretter alle nødvendige tabeller:

• users — Brukerkontoer
• sessions — Aktive sesjoner
• accounts — OAuth-tilkoblinger
• subscriptions — Stripe-abonnementer

Vil du se databasen visuelt? Drizzle Studio er innebygd:

npm run db:studio

Steg 4: Start utviklingsserveren

npm run dev

Åpne http://localhost:3000 og se din nye app i aksjon.

Du har nå en fullstendig fungerende applikasjon med:

• Innloggingsside med OAuth
• Dashboard-layout
• Brukerprofilhåndtering
• Abonnementssystem

Steg 5: Tilpass med Claude Code

Her kommer den virkelige kraften. Alt du trenger å gjøre er å beskrive hva du vil ha.

Eksempel: Legg til en ny funksjon

Si at du bygger en oppgaveliste-app. Skriv til Claude Code:

Legg til en oppgaveliste-funksjon. Brukere skal kunne:
- Opprette nye oppgaver med tittel og beskrivelse
- Markere oppgaver som fullført
- Slette oppgaver
- Se alle sine oppgaver på dashboard

Claude Code vil:

1. Opprette database-skjema for oppgaver
2. Generere API-ruter for CRUD-operasjoner
3. Bygge React-komponenter for UI
4. Koble alt sammen med riktig autentisering via Better Auth

Du gjennomgår endringene, godkjenner, og funksjonen er live.

Eksempel: Legg til e-postvarsler

Legg til e-postvarsler når en bruker oppretter en konto.
Bruk Resend API. E-posten skal ønske velkommen og ha en CTA
for å fullføre profilen sin.

Claude Code forstår konteksten fra CLAUDE.md og implementerer dette med riktig mønster for prosjektet. Les mer om hvorfor AI-først utvikling fungerer.

Steg 6: Deploy til produksjon

Når du er klar for verden, er deployment enkelt:

Vercel (anbefalt)

vercel

Følg instruksjonene for å koble til Git-repoet ditt. Vercel oppdager automatisk Next.js og konfigurerer alt riktig.

Husk å legge til miljøvariablene i Vercel-dashbordet:

• DATABASE_URL
• BETTER_AUTH_SECRET
• STRIPE_SECRET_KEY
• STRIPE_WEBHOOK_SECRET
• og de andre fra .env

Railway (alternativ)

railway init
railway up

Railway er et godt alternativ hvis du vil ha database og app på samme plattform.

Tips for effektiv AI-utvikling

Vær spesifikk

I stedet for:

"Lag et betalingssystem"

Skriv:

"Legg til mulighet for brukere å oppgradere til premium-plan via Stripe. Vis en upgrade-knapp på dashboard for gratisbrukere. Premium-brukere får tilgang til /dashboard/premium-features."

Jo mer kontekst du gir, jo bedre blir resultatet.

Bruk inkrementell utvikling

Ikke prøv å bygge alt på én gang. Start med en minimal versjon:

1. Først: Grunnleggende CRUD
2. Deretter: Validering og feilhåndtering
3. Så: UI-polish og animasjoner
4. Til slutt: Edge cases og optimalisering

Les gjennom koden

Selv om Claude Code skriver koden, er det viktig at du forstår den. Les gjennom endringene før du godkjenner. Still spørsmål hvis noe er uklart.

Commit ofte

Bruk Git aktivt. Etter hver fungerende funksjon:

git add .
git commit -m "Lagt til oppgaveliste-funksjon"

Dette gir deg trygghet til å eksperimentere — du kan alltid gå tilbake.

Vanlige problemer og løsninger

Database-tilkobling feiler

Sjekk at DATABASE_URL i .env er riktig. Neon-URL-en skal se slik ut:

postgresql://user:password@ep-xxx.eu-central-1.aws.neon.tech/neondb?sslmode=require

OAuth-innlogging fungerer ikke

Sørg for at redirect-URL-ene er konfigurert riktig i Google/Apple-konsollen:

• Development: http://localhost:3000/api/auth/callback/google
• Production: https://yourapp.com/api/auth/callback/google

Stripe-webhooks mottas ikke

I development, bruk Stripe CLI:

stripe listen --forward-to localhost:3000/api/webhooks/stripe

I produksjon, konfigurer webhook-URL-en i Stripe-dashbordet.

Hva nå?

Du har nå en produksjonsklar applikasjon. Her er noen ideer for å ta den videre:

• Legg til flere features — Beskriv dem til Claude Code
• Tilpass designet — Endre farger i tailwind.config.ts med Tailwind CSS
• Optimaliser ytelsen — Be Claude Code om å analysere og forbedre
• Legg til tester — Når du er klar for det

Det viktigste er å lansere. En enkel app som er live er verdt mer enn en perfekt app som aldri blir ferdig. Se hvordan LLM-First Boilerplate sammenligner seg med ShipFast.

Les mer

Lær mer om AI-først utvikling og hvorfor denne boilerplaten skiller seg ut:

• LLM-First vs ShipFast: Hvorfor AI-først vinner — Sammenligning med den populære konkurrenten
• Hvorfor AI-først utvikling er fremtiden — De fire pilarene i moderne webutvikling
• Better Auth vs NextAuth — Dypdykk i autentiseringsløsningen
• Drizzle ORM PostgreSQL guide — Mestre database-queries
• Stripe betalingsintegrasjon — Sett opp betalinger raskt
• Deploy til Vercel — Lansér appen din til verden

Kilder

• Claude Code — Anthropics offisielle kodingsassistent
• Neon PostgreSQL — Serverless database for moderne apper
• Better Auth — Fleksibel autentisering for Next.js
• Vercel — Deploy-plattform for Next.js

Konklusjon

LLM-First Boilerplate kombinerer det beste fra to verdener: en solid, velprøvd teknisk stack, og en arkitektur optimalisert for AI-assistert utvikling.

Resultatet er at du kan fokusere på hva du vil bygge, ikke hvordan du skal bygge det. Claude Code tar seg av implementasjonen, og du tar deg av visjonen.

Klar til å lansere din neste store idé? Start med /setup og se hvor langt du kommer på én dag.