Hvad er Next.js? En letforståelig guide til appbyggere

Next.js er et framework til at bygge websites og webapps med React. React giver dig byggeklodserne til en brugerflade – knapper, formularer, lister. Next.js tilføjer resten af websitet omkring dem: sider og URL'er, rendering af sider på serveren, så de ankommer klar til at læse, indlæsning af data og kørsel af backend-kode i samme projekt. Det er open source, udviklet af virksomheden Vercel, og en af de mest brugte måder at bygge React-sites på.

Hvorfor Next.js betyder noget, når du bygger med AI

Når du beskriver en app for en AI-builder, skal den vælge et teknisk fundament. Valget former ting, du bryder dig om senere:

• Synlighed i søgning. Et offentligt site, der skal ranke i Google, har gavn af at sende rigtig HTML, hvilket Next.js gør godt.
• Hvor backend'en ligger. Next.js lader frontend-sider og serverkode (som „gem denne formular“ eller „kald betalings-API'et“) leve i ét projekt.
• Hosting. En Next.js-app med serverfunktioner skal have en server at køre på, mens en almindelig Vite-app kan serveres som statiske filer.

Mythex starter nye projekter på Vite + React + TypeScript + Tailwind som standard og bruger Next.js, når du beder om det – „Brug Next.js“ i din første prompt er nok (sådan vælges teknologien). Så det hjælper at vide, hvornår det er umagen værd at bede om.

En hverdagsanalogi

Hvis React er en kasse med førsteklasses Lego-klodser, er Next.js et Lego-sæt med vejledningen, grundpladen og delene til døre og rør allerede med.

Du kunne bygge det samme hus af løse klodser – du skulle bare selv beslutte, hvordan rummene hænger sammen, hvor hoveddøren er, og hvordan vandet kommer ind. Next.js træffer de beslutninger for dig på en standardiseret måde, så hvert Next.js-projekt er indrettet ens, og en ny udvikler (eller en AI) hurtigt finder rundt.

Hvad Next.js tilføjer til React

Next.js har to måder at organisere sider på. App Router (app/-mappen) er den nyere og understøtter Server Components. Pages Router (pages/-mappen) er den oprindelige og understøttes stadig. Nye projekter bruger generelt App Router. Hvis din AI-builders kode eller en vejledning ser ukendt ud, er det ofte derfor.

Et konkret eksempel: en offentlig liste over lokale caféer

Forestil dig et site, der lister caféer i din by, med en side pr. café, som du gerne vil have frem i søgeresultaterne.

En Next.js-side for én café kunne se nogenlunde sådan ud:

// app/cafes/[slug]/page.tsx  →  /cafes/blue-door, /cafes/hilltop ...
export default async function CafePage({ params }) {
  const { slug } = await params;
  const cafe = await db.cafe.findUnique({ where: { slug } });
  return (
    <main>
      <h1>{cafe.name}</h1>
      <p>{cafe.address}</p>
    </main>
  );
}

Det der sker, når nogen (eller Google) besøger /cafes/blue-door:

1. Next.js matcher URL'en til den fil. Mappen [slug] betyder „enhver café“.
2. Komponenten kører på serveren, læser caféen fra databasen og bygger HTML'en.
3. Browseren modtager en komplet side med caféens navn og adresse allerede i – ingen ventetid, mens JavaScript henter data.

Med en almindelig klientside-React-app ville browseren først få en næsten tom side, så downloade JavaScript, så hente caféen og så vise den. Søgemaskiner kan ofte klare det, men en færdig side er mere pålidelig. Se SEO for AI-byggede websites.

Sammenlign det med et internt dashboard bag et login: søgemaskiner kan alligevel ikke se det, så serverrendering giver mindre gavn, og en enklere Vite-app er ofte det bedre valg.

Centrale begreber

Almindelige misforståelser

• „Next.js erstatter React.“ Det gør det ikke. Det bruger React. Dine komponenter er stadig React-komponenter.
• „Next.js er altid det bedre valg.“ Det er mere kapabelt og også mere at forstå. Serverrendering, caching og forskellen mellem server- og klientkode er almindelige kilder til forvirrende fejl. For en app, der for det meste er bag et login, er en almindelig React-app ofte enklere.
• „Next.js kører kun på Vercel.“ Det er open source og kan køre på enhver Node.js-server eller i en Docker-container. En fuldt statisk eksport er mulig, hvis du ikke bruger serverfunktioner.
• „Brug af Next.js garanterer god SEO.“ Det gør læsbare sider lettere at finde. Rangeringer afhænger stadig af titler, indhold, hastighed og links.
• „Serverkode i Next.js er automatisk privat.“ Kode markeret til klienten ender i browseren. Hemmeligheder skal blive i serverkode og miljøvariabler.

Hvad du kan spørge din AI-builder om

• „Brug Next.js med App Router“ – i din første prompt, hvis du vil have det.
• „Hvilke sider renderes på serveren, hvilke er statiske, og hvilke kører i browseren – og hvorfor?“
• „Gør de offentlige marketing- og listesider serverrenderede eller statiske, med ordentlige titler og beskrivelser.“
• „Hold API-nøgler i serverkode og miljøvariabler. Vis mig, hvor hver enkelt læses.“
• „Har denne app brug for Next.js, eller ville en Vite + React-app være enklere til det, vi bygger?“

Next.js i Mythex

Mythex bruger Vite + React + TypeScript + Tailwind som standard og skifter til Next.js, når du beder om det i din prompt; at nævne det tidligt sparer credits i forhold til at skifte senere. Du ser appen i den live Preview, og Publish udgiver den til en live URL uden at du selv sætter hosting op. Mythex' dokumentation bemærker, at klientrenderede single-page-apps har svagere SEO end serverrenderet eller statisk HTML, så for et marketingsite, hvor søgning betyder noget, er det værd at sige det fra start (SEO for din app).

Spørgsmål