Hva er Next.js? En enkel guide for appbyggere

Next.js er et rammeverk for å bygge nettsteder og webapper med React. React gir deg byggeklossene i et grensesnitt — knapper, skjemaer, lister. Next.js legger til resten av nettstedet rundt dem: sider og URL-er, rendering av sider på serveren slik at de kommer ferdig å lese, lasting av data og kjøring av backend-kode i samme prosjekt. Det er åpen kildekode, laget av selskapet Vercel, og en av de mest brukte måtene å bygge React-sider på.

Hvorfor Next.js betyr noe når du bygger med AI

Når du beskriver en app for en AI-appbygger, må den velge et teknisk fundament. Det valget former ting du bryr deg om senere:

• Synlighet i søk. Et offentlig nettsted som skal rangeres i Google, tjener på å sende ekte HTML, og det gjør Next.js godt.
• Hvor backend-en bor. Next.js lar sidene i frontend og serverkode (for eksempel «lagre dette skjemaet» eller «kall betalings-API-et») ligge i ett og samme prosjekt.
• Hosting. En Next.js-app med serverfunksjoner trenger en server å kjøre på, mens en ren Vite-app kan serveres som statiske filer.

Mythex starter nye prosjekter med Vite + React + TypeScript + Tailwind som standard, og bruker Next.js når du ber om det — «Bruk Next.js» i første prompt er nok (slik velges teknologien). Så det hjelper å vite når det er verdt å be om det.

En hverdagslig sammenligning

Hvis React er en eske med førsteklasses Lego-klosser, er Next.js et Lego-sett der instruksjonene, grunnplaten og delene til dører og rør allerede er med.

Du kunne bygget det samme huset av løse klosser — du måtte bare bestemme selv hvordan rommene henger sammen, hvor ytterdøren er og hvordan vannet kommer inn. Next.js tar disse avgjørelsene for deg på en standard måte, slik at hvert Next.js-prosjekt er lagt opp likt, og en ny utvikler (eller en AI) finner raskt frem.

Hva Next.js legger til React

Next.js har to måter å organisere sider på. App Router (mappen app/) er den nyere og støtter Server Components. Pages Router (mappen pages/) er den opprinnelige og støttes fortsatt. Nye prosjekter bruker vanligvis App Router. Hvis koden fra AI-byggeren eller en veiledning ser ukjent ut, er det ofte årsaken.

Et konkret eksempel: en offentlig katalog over lokale kafeer

Tenk deg et nettsted som lister kafeer i byen din, med en side per kafé, som du vil skal dukke opp i søkeresultatene.

En Next.js-side for én kafé kan se omtrent slik ut:

// 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>
  );
}

Dette skjer når noen (eller Google) besøker /cafes/blue-door:

1. Next.js matcher URL-en med filen. Mappen [slug] betyr «en hvilken som helst kafé».
2. Komponenten kjører på serveren, leser kafeen fra databasen og bygger HTML-en.
3. Nettleseren får en komplett side med kafeens navn og adresse allerede på plass — uten å vente på at JavaScript henter data.

Med en ren klientside-React-app ville nettleseren først fått en nesten tom side, deretter lastet ned JavaScript, deretter hentet kafeen, og først da vist den. Søkemotorer klarer ofte det, men en ferdig side er mer pålitelig. Se SEO for AI-bygde nettsider.

Sammenlign med et dashbord for ansatte bak innlogging: søkemotorer kan uansett ikke se det, så server-rendering gir mindre nytte, og en enklere Vite-app er ofte det bedre valget.

Viktige begreper

Vanlige misforståelser

• «Next.js erstatter React.» Det gjør det ikke. Det bruker React. Komponentene dine er fortsatt React-komponenter.
• «Next.js er alltid det beste valget.» Det er mer kapabelt, og det er også mer å forstå. Server-rendering, caching og forskjellen mellom server- og klientkode er vanlige kilder til forvirrende feil. For en app som stort sett ligger bak innlogging, er en ren React-app ofte enklere.
• «Next.js kjører bare på Vercel.» Det er åpen kildekode og kan kjøre på enhver Node.js-server eller i en Docker-container. En ren statisk eksport er mulig hvis du ikke bruker serverfunksjoner.
• «Å bruke Next.js garanterer god SEO.» Det gjør lesbare sider lettere å indeksere. Rangering avhenger fortsatt av titler, innhold, hastighet og lenker.
• «Serverkode i Next.js er automatisk privat.» Kode merket for klienten havner i nettleseren. Hemmeligheter må holdes i serverkode og i miljøvariabler.

Hva du bør spørre AI-appbyggeren om

• «Bruk Next.js med App Router» — i første prompt, hvis du vil ha det.
• «Hvilke sider rendres på serveren, hvilke er statiske, og hvilke kjører i nettleseren — og hvorfor?»
• «Gjør de offentlige markedsførings- og listesidene serverrenderte eller statiske, med ordentlige titler og beskrivelser.»
• «Hold API-nøkler i serverkode og miljøvariabler. Vis meg hvor hver enkelt leses.»
• «Trenger denne appen Next.js, eller ville en Vite + React-app vært enklere for det vi bygger?»

Next.js i Mythex

Mythex bruker Vite + React + TypeScript + Tailwind som standard og bytter til Next.js når du ber om det i prompten din; å nevne det tidlig sparer kreditter sammenlignet med å endre senere. Du ser appen i live Preview, og Publish deployer den til en live URL uten at du setter opp hosting selv. Mythex-dokumentasjonen påpeker at klientrenderte enkeltside-apper har svakere SEO enn serverrenderte eller statiske HTML-sider, så for et markedsføringsnettsted der søk betyr noe, er det verdt å si det tidlig (SEO for appen din).

Spørsmål