Què és Next.js? Una guia senzilla per a constructors d'apps

Next.js és un framework per construir llocs web i apps web amb React. React et dona els blocs de construcció d'una interfície —botons, formularis, llistes—. Next.js afegeix la resta del lloc web al voltant: pàgines i URL, renderitzar les pàgines al servidor perquè arribin llestes per llegir, carregar dades i executar codi de backend dins del mateix projecte. És de codi obert, el fa l'empresa Vercel, i és una de les maneres més utilitzades per construir llocs amb React.

Per què Next.js importa quan construeixes amb IA

Quan descrius una app a un constructor amb IA, aquest ha de triar una base tècnica. Aquesta elecció modela coses que t'importaran més endavant:

• Visibilitat en cerca. Un lloc públic que ha de posicionar-se a Google es beneficia d'enviar HTML real, cosa que Next.js fa bé.
• On viu el backend. Next.js permet que les pàgines del frontend i el codi del servidor (com « desa aquest formulari » o « crida l'API de pagaments ») visquin en un sol projecte.
• Allotjament. Una app de Next.js amb funcions de servidor necessita un servidor on executar-se, mentre que una app de Vite simple es pot servir com a fitxers estàtics.

Mythex crea projectes nous amb Vite + React + TypeScript + Tailwind per defecte, i fa servir Next.js quan ho demanes: amb « Fes servir Next.js » al teu primer prompt n'hi ha prou (com es tria la tecnologia). Per això convé saber quan val la pena demanar-ho.

Una analogia quotidiana

Si React és una caixa de peces de Lego d'alta qualitat, Next.js és un joc de Lego amb les instruccions, la base i les peces de portes i fontaneria ja incloses.

Podries construir la mateixa casa amb peces soltes; només hauries de decidir tu mateix com connecten les habitacions, on va la porta principal i com entra l'aigua. Next.js pren aquestes decisions per a tu de manera estàndard, de manera que cada projecte de Next.js té una disposició similar i un nou developer (o una IA) s'hi orienta ràpidament.

Què afegeix Next.js a React

Next.js té dues maneres d'organitzar les pàgines. L'App Router (la carpeta app/) és la més nova i admet Server Components. El Pages Router (la carpeta pages/) és l'original i encara té suport. Els projectes nous generalment fan servir l'App Router. Si el codi del teu constructor d'IA o un tutorial et resulta estrany, aquesta sovint és la raó.

Un exemple pas a pas: un directori públic de cafeteries locals

Imagina un lloc que llisti cafeteries de la teva ciutat, amb una pàgina per a cada cafeteria, que vols que aparegui als resultats de cerca.

Una pàgina de Next.js per a una cafeteria podria semblar més o menys així:

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

Què passa quan algú (o Google) visita /cafes/blue-door:

1. Next.js relaciona la URL amb aquest fitxer. La carpeta [slug] vol dir « qualsevol cafeteria ».
2. El component s'executa al servidor, llegeix la cafeteria de la base de dades i construeix l'HTML.
3. El navegador rep una pàgina completa amb el nom i l'adreça de la cafeteria ja inclosos —sense esperar que JavaScript en vagi a buscar les dades—.

Amb una app de React simple al client, el navegador primer rebria una pàgina gairebé buida, després descarregaria JavaScript, després buscaria la cafeteria i finalment la mostraria. Els motors de cerca sovint ho poden gestionar, però una pàgina completament formada és més fiable. Consulta SEO per a llocs web creats amb IA.

Compara-ho amb un tauler per a personal darrere d'un inici de sessió: els motors de cerca no el poden veure de totes maneres, així que el renderitzat al servidor aporta menys benefici, i una app de Vite més simple sovint és la millor opció.

Termes clau

Idees errònies habituals

• « Next.js substitueix React.» No. Fa servir React. Els teus components continuen sent components de React.
• « Next.js és sempre la millor opció.» És més capaç, però també més complex d'entendre. El renderitzat al servidor, la memòria cau i la diferència entre codi de servidor i de client són fonts habituals d'errors confusos. Per a una app que està sobretot darrere d'un inici de sessió, una app de React simple sovint és més senzilla.
• « Next.js només funciona a Vercel.» És de codi obert i pot funcionar en qualsevol servidor Node.js o en un contenidor Docker. És possible fer una exportació completament estàtica si no fas servir funcions de servidor.
• « Fer servir Next.js garanteix un bon SEO.» Fa que les pàgines llegibles siguin més fàcils de rastrejar. El posicionament continua depenent dels títols, el contingut, la velocitat i els enllaços.
• « El codi de servidor de Next.js és privat automàticament.» El codi marcat per al client acaba al navegador. Els secrets han de quedar al codi només de servidor i a les variables d'entorn.

Què demanar al teu constructor d'IA

• « Fes servir Next.js amb l'App Router » —al teu primer prompt, si ho vols.
• « Quines pàgines es renderitzen al servidor, quines són estàtiques i quines s'executen al navegador, i per què? »
• « Fes que les pàgines públiques de màrqueting i de llistat siguin renderitzades al servidor o estàtiques, amb títols i descripcions adequats. »
• « Guarda les claus d'API al codi només de servidor i a les variables d'entorn. Mostra'm on es llegeix cadascuna. »
• « Aquesta app necessita Next.js, o una app de Vite + React seria més simple per al que estem construint? »

Next.js a Mythex

Mythex fa servir Vite + React + TypeScript + Tailwind per defecte i canvia a Next.js quan ho demanes al prompt; esmentar-ho d'entrada t'estalvia crèdits en comparació amb canviar-ho més tard. Veus l'app a la previsualització en directe, i Publicar la desplega en una URL en directe sense que hagis de configurar l'allotjament tu mateix. La documentació de Mythex indica que les apps de client d'una sola pàgina tenen pitjor SEO que l'HTML renderitzat al servidor o estàtic, així que, per a un lloc de màrqueting on la cerca és important, val la pena dir-ho des del principi (SEO per a la teva app).

Preguntes