Vad är Next.js? En lättförståelig guide för appbyggare

Next.js är ett ramverk för att bygga webbplatser och webbappar med React. React ger dig byggstenarna i ett gränssnitt — knappar, formulär, listor. Next.js lägger till resten av webbplatsen runt dem: sidor och URL:er, rendering av sidor på servern så att de kommer fram redo att läsas, hämtning av data, och körning av backendkod i samma projekt. Det är öppen källkod, skapat av företaget Vercel, och ett av de mest använda sätten att bygga React-sajter.

Varför Next.js spelar roll när du bygger med AI

När du beskriver en app för en AI-byggare måste den välja en teknisk grund. Det valet formar saker du bryr dig om senare:

• Synlighet i sök. En publik sajt som ska rankas i Google gynnas av att skicka riktig HTML, vilket Next.js gör bra.
• Var backenden finns. Next.js låter frontend-sidor och serverkod (som ”spara det här formuläret” eller ”anropa betal-API:et”) ligga i ett och samma projekt.
• Hosting. En Next.js-app med serverfunktioner behöver en server att köra på, medan en vanlig Vite-app kan serveras som statiska filer.

Mythex startar nya projekt på Vite + React + TypeScript + Tailwind som standard, och använder Next.js när du ber om det — ”Använd Next.js” i din första prompt räcker (så väljs tekniken). Så det hjälper att veta när det är värt att be om det.

En vardagsliknelse

Om React är en låda med högkvalitativa Lego-klossar, är Next.js ett Lego-set med instruktionerna, grundplattan och bitarna för dörrar och rörledningar redan inkluderade.

Du kunde bygga samma hus av lösa klossar — du skulle bara själv behöva bestämma hur rummen hänger ihop, var ytterdörren ska vara och hur vattnet kommer in. Next.js fattar dessa beslut åt dig på ett standardiserat sätt, så varje Next.js-projekt är uppbyggt ungefär likadant och en ny utvecklare (eller en AI) hittar snabbt runt.

Vad Next.js lägger till i React

Next.js har två sätt att organisera sidor. App Router (mappen app/) är den nyare och stöder Server Components. Pages Router (mappen pages/) är den ursprungliga och stöds fortfarande. Nya projekt använder i allmänhet App Router. Om din AI-byggares kod eller en handledning ser främmande ut är det ofta därför.

Ett praktiskt exempel: en publik katalog över lokala kaféer

Föreställ dig en sajt som listar kaféer i din stad, med en sida per café, som du vill ska synas i sökresultaten.

En Next.js-sida för ett café kan se ut ungefär så här:

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

Vad som händer när någon (eller Google) besöker /cafes/blue-door:

1. Next.js matchar URL:en mot den filen. Mappen [slug] betyder ”vilket café som helst”.
2. Komponenten körs på servern, läser caféet från databasen och bygger HTML:en.
3. Webbläsaren får en komplett sida med caféets namn och adress redan i sig — ingen väntan på att JavaScript ska hämta data.

Jämför med en klientsidig React-app där webbläsaren först får en nästan tom sida, sedan laddar ner JavaScript, sedan hämtar caféet och sedan visar det. Sökmotorer klarar ofta det, men en färdigformad sida är mer pålitlig. Se SEO för AI-byggda webbplatser.

Jämför med en personalinstrumentpanel bakom en inloggning: sökmotorer kan inte se den ändå, så serverrendering ger mindre nytta, och en enklare Vite-app är ofta det bättre valet.

Nyckeltermer

Vanliga missuppfattningar

• ”Next.js ersätter React.” Det gör det inte. Det använder React. Dina komponenter är fortfarande React-komponenter.
• ”Next.js är alltid det bästa valet.” Det är mer kapabelt, men också mer att förstå. Serverrendering, cachning och skillnaden mellan kod på servern och hos klienten är vanliga källor till förvirrande buggar. För en app som mest ligger bakom en inloggning är en vanlig React-app ofta enklare.
• ”Next.js körs bara på Vercel.” Det är öppen källkod och kan köras på vilken Node.js-server som helst eller i en Docker-container. En helt statisk export är möjlig om du inte använder serverfunktioner.
• ”Att använda Next.js garanterar bra SEO.” Det gör läsbara sidor enklare. Rankingen beror fortfarande på titlar, innehåll, hastighet och länkar.
• ”Serverkod i Next.js är automatiskt privat.” Kod som markerats för klienten hamnar i webbläsaren. Hemligheter måste stanna i kod som bara körs på servern och i miljövariabler.

Vad du ska fråga din AI-byggare

• ”Använd Next.js med App Router” — i din första prompt, om du vill ha det.
• ”Vilka sidor renderas på servern, vilka är statiska och vilka körs i webbläsaren — och varför?”
• ”Gör de publika marknadsförings- och listningssidorna serverrenderade eller statiska, med ordentliga titlar och beskrivningar.”
• ”Håll API-nycklar i kod som bara körs på servern och i miljövariabler. Visa mig var varje nyckel läses.”
• ”Behöver den här appen Next.js, eller skulle en Vite + React-app vara enklare för det vi bygger?”

Next.js i Mythex

Mythex använder Vite + React + TypeScript + Tailwind som standard och byter till Next.js när du ber om det i din prompt; att nämna det tidigt sparar krediter jämfört med att byta senare. Du ser appen i den levande förhandsvisningen, och Publicera driftsätter den till en levande URL utan att du själv behöver sätta upp hosting. Mythex dokumentation noterar att klientrenderade ensidesappar har svagare SEO än serverrenderad eller statisk HTML, så för en marknadsföringssajt där sök spelar roll är det värt att säga det i förväg (SEO för din app).

Frågor