Ի՞նչ է Next.js-ը։ Պարզ ուղեցույց հավելվածների կառուցողների համար

Next.js-ը կայքեր և վեբ հավելվածներ կառուցելու framework է React-ով։ React-ը տալիս է ինտերֆեյսի կառուցվածքային բլոկները՝ կոճակներ, ձևեր, ցուցակներ։ Next.js-ը ավելացնում է մնացած կայքը դրանց շուրջը․ էջեր և URL-ներ, էջերի սերվերային rendering-ը, որպեսզի դրանք հասնեն պատրաստ ընթերցման համար, տվյալների բեռնում և backend կոդի աշխատեցում նույն նախագծում։ Այն բաց կոդով է, ստեղծված է Vercel ընկերության կողմից և React կայքեր կառուցելու ամենալայնորեն օգտագործվող եղանակներից մեկն է։

Ինչու է Next.js-ը կարևոր AI-ով կառուցելիս

Երբ հավելվածը նկարագրում եք AI կառուցողին, նա պետք է ընտրի տեխնիկական հիմք։ Այդ ընտրությունը ձևավորում է բաներ, որոնք հետագայում ձեզ հետաքրքրում են․

• Որոնման տեսանելիություն։ Հանրային կայքը, որը պետք է Google-ում երևա, օգտվում է իրական HTML ուղարկելուց, ինչն Next.js-ը լավ է անում։
• Որտեղ է գտնվում backend-ը։ Next.js-ը թույլ է տալիս, որ առջևի էջերը և սերվերային կոդը (օրինակ՝ «պահիր այս ձևը» կամ «կանչիր վճարման API-ն») ապրեն մեկ նախագծում։
• Հոսթինգ։ Սերվերային գործառույթներով Next.js հավելվածը պետք է սերվեր, որի վրա աշխատի, մինչդեռ պարզ Vite հավելվածը կարող է սպասարկվել որպես ստատիկ ֆայլեր։

Mythex-ը նոր նախագծերը սկսում է լռելյայն Vite + React + TypeScript + Tailwind-ով և օգտագործում է Next.js, երբ խնդրում եք․ առաջին հուշման մեջ «Use Next.js»-ն բավական է (ինչպես է ընտրվում տեխնոլոգիան)։ Այսպիսով օգտակար է իմանալ, թե երբ է դա արժե խնդրել։

Ամենօրյա անալոգիա

Եթե React-ը բարձրորակ Lego աղյուսների տուփ է, Next.js-ը այն Lego հավաքածուն է, որտեղ հրահանգները, հիմքի թիթեղը և դռների ու santexnika-ի մասերը արդեն ներառված են։

Ցանկության դեպքում կարող էիք նույն տունը կառուցել առանձին աղյուսներից․ պարզապես ինքներդ պետք է որոշեիք, թե սենյակները ինչպես են միանում, որտեղ է գլխավոր մուտքը և ինչպես է ջուրը հասնում։ Next.js-ը այդ որոշումները կայացնում է ձեզ համար ստանդարտ եղանակով, այնպես որ յուրաքանչյուր Next.js նախագիծ նման է դասավորված, և նոր մշակողը (կամ AI-ն) արագ է գտնում իր ճանապարհը։

Ինչ է ավելացնում Next.js-ը React-ին

Next.js-ն էջերը կազմակերպելու երկու եղանակ ունի։ App Router-ը (app/ թղթապանակ) ավելի նորն է և աջակցում է սերվերային կոմպոնենտներին։ Pages Router-ը (pages/ թղթապանակ) սկզբնականն է և դեռ աջակցվում է։ Նոր նախագծերը սովորաբար օգտագործում են App Router-ը։ Եթե AI կառուցողի կոդը կամ ուսումնական նյութը անծանոթ է թվում, սա հաճախ պատճառն է։

Օրինակ․ հանրային ցուցակ տեղական սրճարանների

Պատկերացրեք կայք, որը ցուցակում է ձեր քաղաքի սրճարանները, յուրաքանչյուր սրճարանի համար՝ էջով, և որ ցանկանում եք, որ երևա որոնման արդյունքներում։

Next.js էջը մեկ սրճարանի համար մոտավորապես այսպես կարող է լինել․

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

Ինչ է լինում, երբ որևէ մեկը (կամ Google-ը) այցելում է /cafes/blue-door-ը՝

1. Next.js-ը URL-ը համապատասխանեցնում է այդ ֆայլին։ [slug] թղթապանակը նշանակում է «ցանկացած սրճարան»։
2. Կոմպոնենտը աշխատում է սերվերում, կարդում է սրճարանը տվյալների բազայից և կառուցում է HTML-ը։
3. Բրաուզերը ստանում է լրիվ էջ՝ սրճարանի անունով և հասցեով արդեն իր մեջ․ JavaScript-ի սպասելու կարիք չկա տվյալները բերելու համար։

Պարզ կլիենտական React հավելվածի դեպքում բրաուզերը սկզբում կստանար գրեթե դատարկ էջ, հետո կբեռներ JavaScript-ը, հետո կբերեր սրճարանը և միայն դրանից հետո կցուցադրեր այն։ Որոնողական համակարգերը հաճախ կարողանում են դա մշակել, բայց լրիվ ձևավորված էջը ավելի հուսալի է։ Տես SEO AI-ով կառուցված կայքերի համար։

Համեմատեք դա մուտքով ներքին վահանակի հետ․ որոնողական համակարգերը այն ընդհանրապես չեն տեսնի, ուստի սերվերային rendering-ը քիչ օգուտ կբերի, և պարզ Vite հավելվածը հաճախ ավելի լավ տարբերակ է։

Հիմնական տերմիններ

Սովորական թյուրըմբռնումներ

• «Next.js-ը փոխարինում է React-ին»։ Ոչ։ Այն օգտագործում է React-ը։ Ձեր կոմպոնենտները դեռ React կոմպոնենտներ են։
• «Next.js-ը միշտ ավելի լավ ընտրությունն է»։ Այն ավելի ընդունակ է, բայց նաև ավելի շատ բան է հասկանալու։ Սերվերային rendering-ը, քեշավորումը և սերվերի ու կլիենտի կոդի տարբերությունը սովորական աղբյուրներ են շփոթեցնող սխալների։ Մուտքի հետևում գտնվող հավելվածի համար պարզ React հավելվածը հաճախ ավելի պարզ է։
• «Next.js-ը աշխատում է միայն Vercel-ում»։ Այն բաց կոդով է և կարող է աշխատել ցանկացած Node.js սերվերի վրա կամ Docker կոնտեյներում։ Լրիվ ստատիկ արտահանում հնարավոր է, եթե սերվերային գործառույթներ չեք օգտագործում։
• «Next.js օգտագործելը երաշխավորում է լավ SEO»։ Այն դարձնում է ընթեռնելի էջերը ավելի հեշտ։ Վարկանիշները դեռ կախված են վերնագրերից, բովանդակությունից, արագությունից և հղումներից։
• «Next.js-ի սերվերային կոդը ավտոմատ գաղտնի է»։ Կոդը, որը նշված է կլիենտի համար, հայտնվում է բրաուզերում։ Գաղտնիքները պետք է մնան միայն սերվերային կոդում և միջավայրի փոփոխականներում։

Ինչ հարցնել ձեր AI կառուցողից

• «Օգտագործիր Next.js՝ App Router-ով» — առաջին հուշման մեջ, եթե ուզում եք։
• «Ո՞ր էջերն են renderվում սերվերում, որոնք ստատիկ են և որոնք աշխատում են բրաուզերում — և ինչու՞։»
• «Հանրային մարկետինգային և ցուցակի էջերը դարձրու սերվերային rendering կամ ստատիկ, պատշաճ վերնագրերով և նկարագրություններով։»
• «Պահիր API բանալիները միայն սերվերային կոդում և միջավայրի փոփոխականներում։ Ցույց տուր, թե որտեղ է յուրաքանչյուրը կարդացվում։»
• «Այս հավելվածին պետք է Next.js, թե՞ Vite + React-ը ավելի պարզ կլինի այն բանի համար, ինչ կառուցում ենք։»

Next.js-ը Mythex-ում

Mythex-ը լռելյայն օգտագործում է Vite + React + TypeScript + Tailwind և անցնում է Next.js-ի, երբ խնդրում եք հուշման մեջ․ դրա անունը վաղ տալը խնայում է կրեդիտներ՝ համեմատած հետո փոխելու հետ։ Հավելվածը տեսնում եք կենդանի Preview-ում, իսկ Publish-ը տեղակայում է այն կենդանի URL-ով՝ առանց ինքներդ հոսթինգ կարգավորելու։ Mythex-ի փաստաթղթերը նշում են, որ կլիենտական rendering-ով single-page հավելվածները ավելի թույլ SEO ունեն, քան սերվերային կամ ստատիկ HTML-ը, ուստի մարկետինգային կայքի դեպքում, որտեղ որոնումը կարևոր է, արժե դա նախապես ասել (SEO ձեր հավելվածի համար)։

Հարցեր