React är ett bibliotek för att bygga gränssnitt. Det är kraftfullt. Det är välskrivet. Och det berättar absolut ingenting om hur du faktiskt ska använda det.
Routing? Välj ett paket. Datahämtning? Välj ett till. Server-rendering? Det är tre paketval och en halvdag av konfiguration. Deployment? Klarar du dig. Innan du byggt den första komponenten av din faktiska app har du tagit trettio beslut om ramverk och infrastruktur.
Next.js är det opinionerade lager ovanpå React som tar alla de besluten åt dig.
En mapp är en URL
Det mest direkta konceptet i Next.js är filbaserad routing. Du skapar en fil, du har en sida. Filen `app/om/page.tsx` motsvarar adressen `/om`. Filen `app/blogg/[slug]/page.tsx` matchar `/blogg/vad-som-helst` och ger dig sluggen som variabel.
Det är det. Ingen router att konfigurera, ingen lista att underhålla. Mappstrukturen är routern.
Servern som standard
Här är idén som förändrar hur man bygger moderna webbappar: komponenter körs på servern som standard.
Det låter tekniskt men konsekvenserna är praktiska. En komponent som hämtar produkter från din databas gör det direkt på servern, utan att skicka databasanropet till webbläsaren, utan att vänta på att sidan laddat, utan att visa en laddningsspinnare. Datan är redan där när sidan renderas.
Det är skillnaden mot det gamla sättet att bygga React-appar, där allt hämtades i webbläsaren med `useEffect`, med tillhörande laddningstillstånd, race conditions och onödiga nätverksanrop.
Client Components: exakt när du behöver dem
Inte allt kan köras på servern. Knappar som ska reagera på klick, formulär som uppdaterar sig medan du skriver, animationer som svarar på musrörelser. Det kräver webbläsarens JavaScript-motor.
Next.js löser detta med ett enkelt direktiv. Du lägger till `'use client'` längst upp i en komponent och den komponenten körs i webbläsaren som ett traditionellt React-element. Resten av appen stannar på servern.
Principen är att hålla serverfootprinten så stor som möjligt. Varje sak som inte behöver interaktivitet ska stanna på servern.
Hela stacken i ett paket
Det som gör Next.js till mer än ett routing-bibliotek är att det innehåller hela applikationslagret. API-endpoints skapas som route handlers i samma mappstruktur. Server Actions hanterar formulärsubmissions utan att du behöver skriva ett separat API. Image-optimering, fontladdning, metadata och performance-optimeringar är inbyggda.
Vercel, som bygger Next.js, har optimerat sin plattform specifikt för det. En app som deployats på Vercel tar automatiskt hand om caching, global distribution och serverless-infrastruktur utan att du behöver konfigurera något.
Stacken i det här bootcampet — Next.js plus Supabase plus Vercel plus Claude Code — är inte en slumpmässig kombination. Den valdes för att de fyra delarna är designade att fungera tillsammans med minimal friktion.