Next.js

Next.js ‒ bul Vercel jeke kompaniyası tárepinen jaratılǵan ashıq kodlı veb-baǵdarlamalastırıw freymvorki bolıp, ol React tiykarındaǵı veb qollanbalarǵa server tárepinen rendering hám statikalıq rendering múmkinshiliklerin beredi.

React dokumentaciyasında Next.js "Usınılǵan Qurallar-dizbegi" qatarında atap ótilgen hám onı "Node.js penen server tárepinen render etiletuǵın veb-sayt dúziw" ushın baǵdarlamashılarǵa usınıs etiledi.[1] Dástúriy React qollanbaları tek ǵana klient tárepindegi brauzerde óz kontentin render ete alatuǵın bolsa, Next.js bul funkcionallıqtı server tárepinen render etiletuǵın qollanbalardı da óz ishine alatuǵın etip keńeytedi.

Next.js ushın avtorlıq huqıq hám sawda belgileri Vercel kompaniyasına tiyisli,[2] ol jáne de onıń ashıq kodlı rawajlanıwın qollap-quwatlaydı hám basqaradı.[3]

Tiykar

Next.js - bul React freymvorki bolıp, ol server tárepinen rendering hám statikalıq rendering sıyaqlı bir qatar qosımsha múmkinshiliklerdi beredi.[4] React - bul dástúriy túrde klienttiń brauzerinde JavaScript penen render etiletuǵın veb qollanbalardı qurıw ushın qollanılatuǵın JavaScript kitapxanası.[5] Biraq, baǵdarlamashılar bul strategiyada bir qatar mashqalalardı atap ótedi, mısalı, JavaScript ti qollanıw múmkinshiligi bolmaǵan yamasa onı óshirip qoyǵan paydalanıwshılarǵa xızmet kórsetpew, potencial qáwipsizlik máseleleri, betti júklew waqtınıń ádewir uzayıwı hám sayttıń ulıwma izlew sisteması optimizaciyasına zıyan keltiriwi.[5] Next.js sıyaqlı freymvorkler veb-sayttıń bir bólegin yamasa tolıǵın klientke jiberiwden aldın server tárepinde render etiw arqalı bul mashqalalardı shetlep ótedi.[5][6] Next.js - React ushın eń kóp qollanılatuǵın freymvorklerdiń biri.[7] Ol jańa qollanba baslaw waqtında qoljetimli bolǵan bir neshe usınılǵan "qurallar toplamı"nıń biri bolıp, olardıń hámmesi ulıwma tapsırmalardı orınlawǵa járdem beriw ushın abstrakciya qatlamın beredi.[8] Next.js ushın Node.js talap etiledi hám onı npm arqalı inicializaciyalaw múmkin.

Google Next.js proektine úles qostı, sonıń ishinde 2019-jılı 43 pull request jiberdi.[9] 2024-jıldıń oktyabr ayına kelip, bul freymvork Walmart, Apple, Nike, Netflix, TikTok, Uber, Lyft, Starbucks hám Spotify sıyaqlı kóplegen iri veb-saytlar tárepinen qollanılmaqta.[5][10] 2020-jıldıń baslarında Vercel baǵdarlamalıq támiynattı jaqsılaw ushın Series A qarjılandırıwında 21 million dollar jıynadı. Freymvorktiń dáslepki avtorı Gilermo Raux házirgi waqıtta Vercel kompaniyasınıń bas direktorı, al proekttiń baslı qollap-quwatlawshısı Tim Noytkens bolıp tabıladı.[11]

Rawajlanıw tariyxı

Next.js birinshi ret 2016-jıl 25-oktyabrde GitHub ta ashıq kodlı proekt sıpatında járiyalandı. Ol dáslep altı princip tiykarında islep shıǵılǵan edi: hesh qanday ornatıwdı talap etpeytuǵın dárhal isleytuǵın funkcionallıq, hámme jerde JavaScript, barlıq funkciyalar JavaScript te jazılǵan, avtomatik kod bóliw hám server-rendering, konfiguraciyalanatuǵın maǵlıwmat alıw, sorawlardı aldın-ala boljaw hám jaylastırıwdı ápiwayılastırıw.[12]

Next.js 2.0 2017-jıldıń mart ayında járiyalandı, oǵan kishi veb-saytlar menen islewdi ańsatlastıratuǵın bir qatar jaqsılanıwlar kirgizildi. Sonday-aq, ol qurılıs nátiyjeliligin arttırdı hám ıssı moduldi almastırıw funkciyasınıń masshtablanıwın jaqsıladı.[13]

7.0 versiyası 2018-jıldıń sentyabr ayında shıǵarıldı, onda qátelerdi basqarıw jaqsılandı hám dinamikalıq marshrutlardı jaqsıraq basqarıw ushın React tiń kontekst API ne qollaw kórsetildi. Bul sonday-aq Webpack 4 ke kóterilgen birinshi versiya boldı.[14]

8.0 versiyası 2019-jıldıń fevral ayında shıǵarıldı hám qollanbalardı serversiz jaylastırıwdı usınǵan birinshi versiya boldı, onda kod talap boyınsha orınlanatuǵın lyambda funkciyalarına bólinedi. Bul versiya sonday-aq statikalıq eksport ushın talap etiletuǵın waqıt penen resurslardı qısqarttı hám aldın ala júklew ónimdarlıǵın jaqsıladı.[15]

2020-jıldıń mart ayında járiyalanǵan 9.3 versiyasına hár qıylı optimizaciyalar hám global Sass hám CSS modul qollawı kirgizildi.[16]

2020-jıldıń 27-iyulinde Next.js 9.5 versiyası járiyalandı, oǵan inkremental statikalıq qayta generaciyalaw, qayta jazıw hám qayta baǵdarlawdı qollaw sıyaqlı jańa múmkinshilikler qosıldı.[17]

2021-jıldıń 15-iyuninde Next.js 11 versiyası shıǵarıldı, oǵan basqalar menen birge: Webpack 5 ti qollaw, "Next.js Live" haqıyqıy waqıt rejiminde birge kodlaw funkcionallıǵınıń aldın ala kórinisi hám Create React App tan Next.js úylesimli formaǵa avtomatik túrde ózgertiw "Create React App Migration" eksperimental funkciyası kirgizildi.[18]

2021-jıldıń 26-oktyabrinde Next.js 12 shıǵarıldı, oǵan Rust kompilyatorı qosıldı, kompilyaciya processin tezlestirdi, AVIF qollawı, Edge Functions & Middleware, hám Native ESM & URL Imports qosıldı.[19]

2022-jıldıń 26-oktyabrinde Vercel Next.js 13 ti shıǵardı. Bul úlken shıǵarılım beta-versiyadaǵı jańa marshrutlaw úlgisin alıp keldi, maketlerdi, React Server Components ti, striming hám maǵlıwmatlardı alıwdıń jańa usılların qollaytuǵın App Router qosıldı. Bunnan tısqarı, Vercel frontend islenbe ushın Turbo dep atalatuǵın jańa qurallar toplamın járiyaladı, oǵan Webpack tiń ornın basıwshı Turbopack hám inkremental qurılıs sistemaları ushın Turborepo kiredi.[20]

2023-jıldıń may ayında Vercel Next.js 13.4 ti shıǵardı. Bul App Router dıń turaqlı versiyasın alıp keldi, bul baǵdarlamashılarǵa onı óndiriste qollanıwǵa múmkinshilik beredi.[21]

2023-jıldıń oktyabr ayında Vercel Next.js 14 ti shıǵardı, ol edge runtime ti qollanıw arqalı jaqsılanǵan yadtı basqarıwdı óz ishine aladı.[22]

Stillew hám ózgeshelikler

Next.js CSS penen stillewdi, sonday-aq aldın ala kompilyaciyalanǵan Scss hám Sass, CSS-in-JS hám styled JSX ti qollaydı.[8] Bunnan tısqarı, ol TypeScript qollawı hám aqıllı toplam menen qurılǵan.[23] Kodtı brauzer qollana alatuǵın JavaScript ke ózgertiw hám kompilyaciyalaw ushın ashıq kodlı SWC transpilyatorı qollanıladı.[24] Keyin modullardı jıynaw ushın basqa ashıq kodlı qural - Webpack qollanıladı, biraq házirgi waqıtta ol TurboPack penen almastırılmaqta.[25] Bul qurallardıń hámmesi terminalda npm menen birge qollanıladı.[9]

Next.js tiń tiykarǵı ózgesheligi - veb-brauzerlerdiń júklemesin azaytıw hám joqarı qáwipsizlikti támiyinlew ushın server tárepinen rendering qollanıwı. Bul qollanbanıń hár qanday bólimi yamasa pútkil sistema ushın isleniliwi múmkin, bul mazmunǵa bay betlerdi server tárepinen rendering ushın ayırıp alıwǵa múmkinshilik beredi.[26] Bul tek birinshi márte kiriwshiler ushın de isleniwi múmkin, bul ele sayttıń hesh qanday resursların júklep almaǵan veb-brauzerlerdiń júklemesin azaytadı.[27] "Íssı qayta júklew" funkciyası ózgerislerdi olar islengen waqıtta anıqlaydı hám tiyisli betlerdi qayta renderleydi, solay etip server qayta iske túsiriwdi talap etpeydi. Bul qollanba kodına kiritilgen ózgerislerdiń dárhal veb-brauzerde kórinisin tabıwına múmkinshilik beredi, degen menen ayırım brauzerler betti jańalawdı talap etiwi múmkin.[26] Baǵdarlama islep shıǵıwshılardıń qolaylılıǵı ushın betke-tiykarlanǵan marshrutlawdı qollanadı hám dinamikalıq marshrutlawdı qollaydı. Basqa ózgesheliklerge modullardı janlı almastırıwǵa múmkinshilik beretuǵın ıssı modul almastırıw, tek betti júklew ushın zárúr kodtı kirgizetuǵın avtomatlı kod bóliw hám júklew waqtın qısqartıw ushın betti aldınnan júklew kiredi.[26]

Next.js sonday-aq Inkrementallı Statikalıq Qayta Generaciyalawdı[28] hám statikalıq sayt generaciyasın qollaydı - veb-sayttıń kompilyaciyalanǵan versiyası ádette qurılıs waqtında jasaladı hám .next papkasına saqlanadı. Paydalanıwshı soraw jibergende, aldın ala qurılǵan versiya, yaǵnıy statikalıq HTML betleri keshlenedi hám olarǵa jiberiledi. Bul júklew waqtın júdá tez etedi, biraq ol hár bir veb-sayt ushın qolaylı emes, ásirese jiyi ózgeretuǵın hám paydalanıwshı kirgizgen maǵlıwmatların kóp qollanatuǵın interaktiv saytlar ushın qolaysız.

Derekler

  1. ↑ „Recommended Toolchains“ (en-US) (HTML). React documentation. Qaraldı: 10-iyul 2021-jıl.
  2. ↑ „Next.js Brand Guidelines“ (26-avgust 2022-jıl).
  3. ↑ „Develop. Preview. Ship. For the best frontend teams – Vercel“ (en-US) (HTML). vercel.com. 6-oktyabr 2021-jılda túp nusqadan arxivlendi. Qaraldı: 22-sentyabr 2020-jıl.
  4. ↑ „Differences Between Static Generated Sites And Server-Side Rendered Apps“ (en). Smashing Magazine (2-iyul 2020-jıl). Qaraldı: 19-oktyabr 2020-jıl.
  5. ↑ 5,0 5,1 5,2 5,3 Thakkar. {{{editor}}}: „Next.js“ (en). Building React Apps with Server-Side Rendering: Use React, Redux, and Next to Build Full Server-Side Rendering Applications 93–137. Apress (2020). DOI:10.1007/978-1-4842-5869-9_3. Qaraldı: 20-oktyabr 2020-jıl. Silteme kórsetiwdegi qátelik: Invalid <ref> tag; name "thakkar1" defined multiple times with different content
  6. ↑ Thakkar. {{{editor}}}: „Adding Server-Side Rendering to Your React Application“ (en). Building React Apps with Server-Side Rendering: Use React, Redux, and Next to Build Full Server-Side Rendering Applications 139–152. Apress (2020). DOI:10.1007/978-1-4842-5869-9_4. Qaraldı: 20-oktyabr 2020-jıl.
  7. ↑ Asay. „Why front-end development may be the new frontier“ (en). TechRepublic (2-dekabr 2019-jıl). Qaraldı: 20-oktyabr 2020-jıl.
  8. ↑ 8,0 8,1 Lukman. „Comparing Styling Methods In Next.js“ (en). Smashing Magazine (17-sentyabr 2020-jıl). Qaraldı: 20-oktyabr 2020-jıl. Silteme kórsetiwdegi qátelik: Invalid <ref> tag; name "SmashingStyle" defined multiple times with different content
  9. ↑ 9,0 9,1 Asay. „An insider's look at Google's web framework contributions to Next.js and more“ (en-US). TechRepublic (1-fevral 2020-jıl). Qaraldı: 19-oktyabr 2020-jıl. Silteme kórsetiwdegi qátelik: Invalid <ref> tag; name "insiders" defined multiple times with different content
  10. ↑ „Spotify.com Technology Stack“. Wappalyzer. Qaraldı: 15-oktyabr 2024-jıl.
  11. ↑ Donovan. „Static site generation with single page app functionality? That's what's coming Next(.js)“ (en-US) (html). Stack Overflow Blog (7-oktyabr 2020-jıl). Qaraldı: 20-oktyabr 2020-jıl.
  12. ↑ Krill. „Next step after Node.js: Framework for 'universal' JavaScript apps“ (en). InfoWorld (31-oktyabr 2016-jıl). Qaraldı: 20-oktyabr 2020-jıl.
  13. ↑ Krill. „Next.js 2.0 plays better with React and JavaScript“ (en). InfoWorld (28-mart 2017-jıl). Qaraldı: 20-oktyabr 2020-jıl.
  14. ↑ Krill. „Next.js 7 framework compiles faster, supports WebAssembly“ (en-US). InfoWorld (21-sentyabr 2018-jıl). Qaraldı: 20-oktyabr 2020-jıl.
  15. ↑ Krill. „Next.js 8 now supports serverless apps“ (en-US). InfoWorld (14-fevral 2019-jıl). Qaraldı: 20-oktyabr 2020-jıl.
  16. ↑ Krill. „Next.js upgrade emphasizes static site generation“ (en). InfoWorld (12-mart 2020-jıl). Qaraldı: 20-oktyabr 2020-jıl.
  17. ↑ Krill. „Next.js adds incremental static pages regeneration“. InfoWorld (27-iyul 2020-jıl). 2-oktyabr 2020-jılda túp nusqadan arxivlendi. Qaraldı: 22-sentyabr 2020-jıl.
  18. ↑ „Next.js 11“. Qaraldı: 10-iyul 2021-jıl.
  19. ↑ „Next.js 12“ (en). nextjs.org. Qaraldı: 27-oktyabr 2021-jıl.
  20. ↑ Orbán. „Next.js 13“ (en-US). nextjs.org (25-oktyabr 2022-jıl). Qaraldı: 9-iyun 2023-jıl.
  21. ↑ Markbåge. „Next.js 13.4“ (en-US). nextjs.org (4-may 2023-jıl). Qaraldı: 7-iyun 2023-jıl.
  22. ↑ „Next.js 14.0.0“ (en-US). nextjs.org (8-dekabr 2023-jıl). Qaraldı: 26-noyabr 2023-jıl.
  23. ↑ Krill. „Next.js 8 now supports serverless apps“. InfoWorld (14-fevral 2019-jıl). 2-oktyabr 2020-jılda túp nusqadan arxivlendi. Qaraldı: 22-sentyabr 2020-jıl.
  24. ↑ „Architecture: Next.js Compiler | Next.js“ (en). nextjs.org. Qaraldı: 19-avgust 2023-jıl.
  25. ↑ „Architecture: Turbopack | Next.js“ (en). nextjs.org. Qaraldı: 19-avgust 2023-jıl.
  26. ↑ 26,0 26,1 26,2 Thakkar, Mohit „Next.js“ (en). Building React Apps with Server-Side Rendering: Use React, Redux, and Next to Build Full Server-Side Rendering Applications 93–137. Apress (2020). DOI:10.1007/978-1-4842-5869-9_3. Qaraldı: 20-oktyabr 2020-jıl.
  27. ↑ Thakkar, Mohit „Adding Server-Side Rendering to Your React Application“ (en). Building React Apps with Server-Side Rendering: Use React, Redux, and Next to Build Full Server-Side Rendering Applications 139–152. Apress (2020). DOI:10.1007/978-1-4842-5869-9_4. Qaraldı: 20-oktyabr 2020-jıl.
  28. ↑ „Incremental Static Regeneration with Next.js“ (en-US). Vercel. Qaraldı: 6-mart 2022-jıl.