Ano ang Next.js? Gabay sa Simpleng Salita para sa mga Gumagawa ng App

Ang Next.js ay framework para gumawa ng mga website at web app gamit ang React. Ibinibigay ng React ang mga pangunahing bloke ng interface — button, form, listahan. Idinadagdag ng Next.js ang natitirang bahagi ng website sa paligid nila: mga page at URL, pag-render ng mga page sa server para dumating na handang basahin, pagkuha ng datos, at pagpapatakbo ng backend code sa iisang project. Open source ito, ginawa ng kumpanyang Vercel, at isa sa pinakamalawak na ginagamit na paraan para gumawa ng React na site.

Bakit mahalaga ang Next.js kapag gumagawa ka gamit ang AI

Kapag inilarawan mo ang app sa AI builder, kailangan nitong pumili ng teknikal na pundasyon. Hinuhubog ng pagpiling iyon ang mga bagay na pinapahalagahan mo sa hinaharap:

• Visibility sa search. Ang pampublikong site na kailangang lumabas sa Google ay nakikinabang sa pagpapadala ng totoong HTML, na mahusay gawin ng Next.js.
• Saan nakatira ang backend. Pinapayagan ng Next.js na magkasama sa iisang project ang mga frontend page at server code (gaya ng “I-save ang form na ito” o “tumawag sa payment API”).
• Hosting. Ang Next.js app na may server feature ay kailangan ng server para tumakbo, samantalang ang simpleng Vite app ay maaaring i-serve bilang static file.

Default ng Mythex ang Vite + React + TypeScript + Tailwind para sa mga bagong project, at gumagamit ng Next.js kapag hiniling mo — sapat na ang “Gamitin ang Next.js” sa unang prompt mo (paano pinipili ang teknolohiya). Kaya makakatulong na malaman kung kailan ito sulit hilingin.

Halimbawang madaling maintindihan

Kung ang React ay kahon ng de-kalidad na Lego brick, ang Next.js ay Lego set na may kasamang instruction, baseplate, at mga piyesa para sa pinto at tubo.

Maaari mong buuin ang parehong bahay mula sa maluwag na brick — kailangan mo lang magpasya nang mag-isa kung paano magkakadugtong ang mga kuwarto, saan ang pintuan sa harap, at paano papasok ang tubig. Ginagawa ng Next.js ang mga desisyong iyon para sa iyo sa karaniwang paraan, kaya magkakahawig ang ayos ng bawat Next.js project at mabilis makakakilala ang bagong developer (o AI) kung saan pupunta.

Ano ang idinadagdag ng Next.js sa React

May dalawang paraan ang Next.js sa pag-aayos ng mga page. Ang App Router (folder na app/) ang mas bago at sumusuporta sa Server Components. Ang Pages Router (folder na pages/) ang orihinal at suportado pa rin. Kadalasang gumagamit ng App Router ang mga bagong project. Kung hindi pamilyar sa iyo ang code ng AI builder mo o ng isang tutorial, kadalasan dahil dito.

Halimbawang sitwasyon: pampublikong direktoryo ng mga cafe sa lugar

Isipin ang isang site na naglilista ng mga cafe sa lungsod mo, na may isang page bawat cafe, at gusto mong lumabas ito sa resulta ng search.

Ang Next.js page para sa isang cafe ay maaaring ganito ang hitsura:

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

Ang nangyayari kapag may bumisita (o ang Google) sa /cafes/blue-door:

1. Itinutugma ng Next.js ang URL sa file na iyon. Ang folder na [slug] ay nangangahulugang “anumang cafe”.
2. Tumatakbo ang component sa server, binabasa ang cafe mula sa database, at binubuo ang HTML.
3. Natatanggap ng browser ang kumpletong page na may pangalan at address na ng cafe — walang hintay sa JavaScript para kumuha ng datos.

Sa simpleng client-side na React app, unang makakatanggap ang browser ng halos walang laman na page, saka mag-download ng JavaScript, saka kukuha ng cafe, at saka ipapakita ito. Kayang harapin iyon ng mga search engine sa maraming pagkakataon, pero mas maaasahan ang kumpletong page. Tingnan ang SEO para sa mga website na gawa sa AI.

Ihambing iyan sa dashboard para lang sa staff na nasa likod ng login: hindi rin ito makikita ng mga search engine, kaya kaunti lang ang benepisyo ng server rendering, at kadalasang mas angkop ang mas simpleng Vite app.

Mga pangunahing termino

Mga karaniwang maling akala

• “Pinapalitan ng Next.js ang React.” Hindi. Ginagamit nito ang React. Ang mga component mo ay React component pa rin.
• “Always na mas mainam ang Next.js.” Mas may kakayahan ito, at mas marami ring dapat maintindihan. Ang server rendering, caching, at ang pagkakaiba ng server at client code ay karaniwang pinagmumulan ng nakalilitong bug. Para sa app na nasa likod ng login, kadalasang mas simple ang simpleng React app.
• “Sa Vercel lang tumatakbo ang Next.js.” Open source ito at puwedeng tumakbo sa anumang Node.js server o sa Docker container. Posible ang buong static export kung hindi ka gumagamit ng server feature.
• “Garantisadong magandang SEO kapag gumamit ng Next.js.” Pinapadali nito ang mga page na nababasa. Nakadepende pa rin ang ranking sa title, nilalaman, bilis, at mga link.
• “Awtomatikong pribado ang server code sa Next.js.” Ang code na minarkahan para sa client ay napupunta sa browser. Dapat manatili ang mga secret sa server-only na code at sa environment variables.

Ano ang itanong sa AI builder mo

• “Gumamit ng Next.js na may App Router” — sa unang prompt mo, kung gusto mo ito.
• “Aling mga page ang nirender sa server, alin ang static, at alin ang tumatakbo sa browser — at bakit?”
• “Gawing server-rendered o static ang mga pampublikong marketing at listing page, na may tamang title at deskripsyon.”
• “Panatilihin ang mga API key sa server-only na code at environment variables. Ipakita mo sa akin kung saan binabasa ang bawat isa.”
• “Kailangan ba ng app na ito ang Next.js, o mas simple ba ang Vite + React app para sa itinatayo natin?”

Next.js sa Mythex

Vite + React + TypeScript + Tailwind ang default ng Mythex at lumilipat sa Next.js kapag hiniling mo sa prompt mo; mas tipid sa credit ang pagbanggit nito nang maaga kaysa magpalit sa bandang huli. Makikita mo ang app sa live na Preview, at dinadala ito ng Publish sa live na URL nang hindi mo kailangang i-set up ang hosting. Ayon sa docs ng Mythex, mas mahina ang SEO ng client-rendered na single-page app kaysa sa server-rendered o static na HTML, kaya kung mahalaga ang search para sa marketing site, sulit itong sabihin nang maaga (SEO para sa app mo).

Mga tanong