Hvað er Next.js? Leiðsögn í einföldu máli fyrir smiði forrita

Next.js er rammi til að smíða vefsíður og vefforrit með React. React gefur þér byggingarkubba viðmótsins: hnappa, eyðublöð, lista. Next.js bætir restinni af vefsíðunni utan um þá: síðum og slóðum, birtingu síðna á þjóninum svo þær berist tilbúnar til lestrar, gagnasöfnun, og keyrslu bakendakóða í sama verkefni. Hann er opinn hugbúnaður, smíðaður af fyrirtækinu Vercel, og einn mest notaði kosturinn til að smíða React-síður.

Af hverju Next.js skiptir máli þegar þú smíðar með gervigreind

Þegar þú lýsir appi fyrir AI-smið þarf hann að velja tæknilegan grunn. Það val mótar hluti sem þú hugsar um síðar:

• Sýnileiki í leit. Opinber síða sem þarf að raðast á Google nýtur góðs af því að senda raunverulegt HTML, og það gerir Next.js vel.
• Hvar bakendinn býr. Next.js gerir framsíðum og kóða á þjóni (eins og „vista þetta eyðublað“ eða „kalla á greiðslu-API“) kleift að búa í einu verkefni.
• Hýsing. Next.js-app með þjónustueiginleikum þarf þjón til að keyra á, en venjulegt Vite-app er hægt að þjóna sem kyrrum skrám.

Mythex byrjar ný verkefni á Vite + React + TypeScript + Tailwind sjálfgefið, og notar Next.js þegar þú biður um það. „Use Next.js“ í fyrstu beiðninni nægir (hvernig tæknin er valin). Því er gott að vita hvenær það er þess virði að biðja um það.

Hliðstæða úr daglegu lífi

Ef React er kassi af hágæða Lego-kubbum, þá er Next.js Lego-sett með leiðbeiningunum, grunnplötunni og hlutunum fyrir hurðir og pípulagnir þegar innifalin.

Þú gætir smíðað sama húsið úr lausum kubbum. Þá yrðir þú sjálf/ur að ákveða hvernig herbergin tengjast, hvar aðaldyrnar eru og hvernig vatnið kemst inn. Next.js tekur þær ákvarðanir fyrir þig á staðlaðan hátt, þannig að sérhvert Next.js-verkefni er skipulagt svipað og nýr forritari (eða gervigreind) finnur sig fljótt.

Það sem Next.js bætir við React

Next.js hefur tvær leiðir til að skipuleggja síður. App Router (app/-mappan) er nýrri og styður Server Components. Pages Router (pages/-mappan) er upprunalega leiðin og er enn studd. Ný verkefni nota yfirleitt App Router. Ef kóði AI-smiðsins eða kennsluefni er þér framandi er þetta oft ástæðan.

Dæmi: opinber skrá yfir kaffihús í bænum

Ímyndaðu þér síðu sem skráir kaffihús í borginni þinni, með síðu fyrir hvert kaffihús, sem þú vilt að birtist í leitarniðurstöðum.

Next.js-síða fyrir eitt kaffihús gæti litið svona út, í grófum dráttum:

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

Það sem gerist þegar einhver (eða Google) heimsækir /cafes/blue-door:

1. Next.js paraar slóðina við þessa skrá. Mappan [slug] þýðir „hvaða kaffihús sem er“.
2. Íhluturinn keyrir á þjóninum, sækir kaffihúsið úr gagnagrunninum og smíðar HTML.
3. Vafrinn fær fullgerða síðu með nafni og heimilisfangi kaffihússins þegar í henni, án þess að bíða eftir að JavaScript sæki gögnin.

Með hreinu React-appi sem keyrir í vafranum fengi vafrinn fyrst nær tóma síðu, síðan JavaScript, síðan sækir hann kaffihúsið og birtir það. Leitarvélar ráða oft við það, en fullmótuð síða er áreiðanlegri. Sjá SEO fyrir vefsíður smíðaðar með gervigreind.

Berðu það saman við innra mælaborð á bak við innskráningu: leitarvélar sjá það hvort sem er ekki, svo birting á þjóni skilar þar minni ávinningi, og einfaldara Vite-app er oft betri kostur.

Lykilhugtök

Algengar ranghugmyndir

• „Next.js kemur í stað React.“ Nei. Það notar React. Íhlutirnir þínir eru áfram React-íhlutir.
• „Next.js er alltaf betri kostur.“ Það er getumeira, en líka meira til að skilja. Birting á þjóni, skyndiminni og munurinn á kóða á þjóni og kóða í vafra eru algengar uppsprettur ruglandi villna. Fyrir app sem er að mestu á bak við innskráningu er venjulegt React-app oft einfaldara.
• „Next.js keyrir aðeins á Vercel.“ Hann er opinn hugbúnaður og getur keyrt á hvaða Node.js-þjóni sem er eða í Docker-íláti. Hreinn kyrr útflutningur er mögulegur ef þú notar ekki þjónustueiginleika.
• „Að nota Next.js tryggir góða SEO.“ Það gerir lesanlegar síður auðveldari. Röðun fer samt eftir titlum, efni, hraða og tenglum.
• „Kóði á þjóni í Next.js er sjálfkrafa einkamál.“ Kóði sem er merktur fyrir viðskiptavininn endar í vafranum. Leyndarmál verða að vera áfram í kóða sem keyrir eingöngu á þjóni og í umhverfisbreytum.

Hvað á að biðja AI-smiðinn um

• „Notaðu Next.js með App Router“, í fyrstu beiðninni, ef þú vilt það.
• „Hvaða síður eru birtar á þjóninum, hverjar eru kyrrar og hverjar keyra í vafranum, og af hverju?“
• „Gerðu opinberu markaðs- og skráningarsíðurnar birtar á þjóni eða kyrrar, með réttum titlum og lýsingum.“
• „Geymdu API-lykla í kóða sem keyrir eingöngu á þjóni og í umhverfisbreytum. Sýndu mér hvar hver þeirra er lesinn.“
• „Þarf þetta app Next.js, eða væri Vite + React einfaldara fyrir það sem við erum að smíða?“

Next.js í Mythex

Mythex notar Vite + React + TypeScript + Tailwind sjálfgefið og skiptir yfir í Next.js þegar þú biður um það í beiðni þinni. Ef þú nefnir það snemma sparar það inneign samanborið við að skipta síðar. Þú sérð appið í lifandi forskoðun, og Publish birtir það á lifandi slóð án þess að þú setjir upp hýsingu sjálf/ur. Skjöl Mythex benda á að viðskiptavinamegin einsíðuforrit (SPA) hafi veikari SEO en birt eða kyrr HTML, þannig að ef leit skiptir máli fyrir markaðssíðu er vert að segja það strax (SEO fyrir appið þitt).

Spurningar