Další.js - Next.js

Další.js
Logo Next.js, stylizace jeho názvu
Logo Next.js
Původní autořiGuillermo Rauch[1]
VývojářiVercel a open-source komunita[2]
První vydání25. října 2016; Před 4 lety (2016-10-25)[3]
Stabilní uvolnění
10.0.2 / 18. listopadu 2020; před 5 dny (2020-11-18)
Náhled verze
10.0.2-kanár.20
Úložištěgithub.com/ vercel/další.js
NapsánoJavaScript a Strojopis
PlošinaWebová platforma
Zahrnuto vReagovat
Velikost17.0 MB
TypRámec webových aplikací
LicenceLicence MIT
webová stránkanextjs.org

Další.js je open-source Reagovat front-endový vývojový webový rámec, který umožňuje funkce jako např vykreslování na straně serveru a generování statické webové stránky pro webové aplikace založené na React. Jedná se o rámec připravený na produkci, který umožňuje vývojářům rychle vytvářet statické a dynamické JAMstack a je široce využívána mnoha velkými společnostmi.[4] Next.js je jedním z několika doporučených „řetězců nástrojů“, které jsou k dispozici při spuštění nové aplikace React, přičemž všechny poskytují vrstvu abstrakce, která pomáhá při běžných úkolech. Tradiční aplikace React vykreslují veškerý svůj obsah v prohlížeči na straně klienta, Next.js se používá k rozšíření této funkce o aplikace vykreslené na straně serveru. Autorská práva a ochranné známky pro Next.js jsou vlastnictvím společnosti Vercel.[5] 27. července 2020 bylo oznámeno vydání Next.js verze 9.5, které přidává nové funkce včetně přírůstkové statické regenerace, přepisů a podpory přesměrování.

Pozadí

Next.js je Reagovat framework, který umožňuje několik dalších funkcí, včetně vykreslování na straně serveru a generování statické webové stránky.[6] Reagovat je a webový rámec který se tradičně používá k vytváření webových aplikací vykreslených v prohlížeči klienta pomocí Javascript.[7] Vývojáři si uvědomují několik problémů s touto strategií, jako například nezajímání uživatelů, kteří nemají přístup k JavaScriptu nebo jej deaktivovali, potenciální problémy se zabezpečením, výrazně prodloužené doby načítání stránky a může to poškodit celkovou stránku optimalizace pro vyhledávače.[7] Rámec, jako je Next.js, tyto problémy obchází tím, že před odesláním klientovi umožňuje vykreslení některých nebo všech webových stránek na straně serveru.[7][8] Next.js je jednou z nejpopulárnějších komponent dostupných v React.[9] Je to jeden z několika doporučených „řetězců nástrojů“, které jsou k dispozici při spuštění nové aplikace. Všechny poskytují vrstvu abstrakce, která pomáhá při běžných úkolech.[10] Next.js vyžaduje Node.js a lze je inicializovat pomocí Správce balíků uzlů.

Google přispěl na projekt Next.js a v roce 2019 přispěl 43 žádostmi o stažení, kde pomohly při prořezávání nepoužívaného JavaScriptu, snižování režijní doby a přidávání vylepšených metrik.[11] Od března 2020 tento rámec používá mnoho velkých webových stránek, včetně Netflix, Přístavní dělník, GitHub, Uber, a Starbucks.[7] Na začátku roku 2020 bylo oznámeno, že Vercel zajistil 21 milionů dolarů ve financování série A na podporu vylepšení softwaru.[1] Původní autor rámce, Guillermo Rauch, je v současné době generálním ředitelem společnosti Vercel a hlavním vývojářem projektů je Tim Neutkens.[12]

Historie vývoje

Next.js byl poprvé vydán jako open-source projekt dne GitHub 25. října 2016; Před 4 lety (2016-10-25).[3] Původně byl vyvinut na základě šesti principů: hotová funkce nevyžadující žádné nastavení, JavaScript všude, všechny funkce jsou psány v JavaScriptu, automatické rozdělení kódu a vykreslování serveru, konfigurovatelné načítání dat, předvídání požadavků a zjednodušené nasazení .[13] Next.js 2.0 byl oznámen v březnu 2017 včetně několika vylepšení, která usnadnila práci s malými weby. Také to zvýšilo efektivitu sestavení a zlepšilo škálovatelnost funkce výměny hot-modulu.[14] Verze 7.0 byla vydána v září 2018 s vylepšeným zpracováním chyb a podporou kontextového API React pro vylepšené zpracování dynamických tras. Toto byla také první verze, na kterou bylo možné upgradovat webový balíček 4.[15] Verze 8.0 byla vydána v únoru 2019 a byla první verzí, která nabídla nasazení aplikací bez serveru, ve kterých je kód rozdělen na funkce lambda které jsou provozovány na vyžádání. Verze také snížila čas a prostředky potřebné pro statické exporty a zlepšila výkonnost před načítáním.[16] Verze 9.3, oznámená v březnu 2020, obsahovala různé optimalizace a globální Sass a podpora modulu CSS.[17] 27. července 2020 bylo oznámeno vydání Next.js verze 9.5, které přidává nové funkce včetně přírůstkové statické regenerace, přepisů a podpory přesměrování.[18]

Styling a funkce

Rámec Next.js využívá JAMstack architektura, která rozlišuje mezi front-endem a back-endem a umožňuje efektivní front-end vývoj, který je nezávislý na jakýchkoli back-end API.[1] Rámec podporuje společné CSS stejně jako předkompilován Scss a Sass, CSS v JS, a stylizovaný JSX.[10] Kromě toho je postaven s Strojopis podpora a chytré sdružování.[19] Rámec se integruje s Redux pro řízení státu a používá GraphQL dotazovací jazyk pro volání API.[7] Tento software používá „úložiště“ Reduxu k uchovávání informací o stavu aplikace, které se postupně aktualizují, aby nedocházelo ke konfliktům čtení a zápisu.[7] Otevřený zdroj transportér Babel se používá k transformaci a kompilaci kódu do JavaScriptu použitelného prohlížečem. Webový balíček, další nástroj s otevřeným zdrojovým kódem, slouží k následnému seskupení modulů. Všechny tyto nástroje se používají s npm v terminálu.[11]

Hlavním rysem Next.js je jeho použití vykreslování na straně serveru ke snížení zátěže webových prohlížečů a zajištění lepšího zabezpečení. To lze provést pro jakoukoli část aplikace nebo celý projekt, což umožňuje vyčlenit stránky s bohatým obsahem pro vykreslení na straně serveru.[7] Lze to také provést pouze pro první návštěvníky, aby se snížilo zatížení webových prohlížečů, které si ještě stáhly některý z aktiv tohoto webu.[8] Funkce "horkého opětovného načítání" detekuje změny hned, jak jsou prováděny, a znovu vykresluje příslušné stránky, aby se server vyhnul nutnosti restartování. To umožňuje, aby se změny provedené v kódu aplikace okamžitě projevily ve webovém prohlížeči, i když některé prohlížeče vyžadují aktualizaci stránky.[7] Tento software používá pro pohodlí vývojáře směrování na stránce a zahrnuje podporu dynamického směrování. Mezi další funkce patří výměna hot-modulu, aby bylo možné vyměnit moduly za provozu, automatické rozdělení kódu, které zahrnuje pouze kód nutný k načtení stránky, a předběžné načítání stránky, aby se zkrátila doba načítání.[7]

Viz také

Reference

  1. ^ A b C 21. dubna, Matt Asay v Developer on; 2020; Pst, 9:51 hod. „Jak si Next.js klade za cíl zjednodušit front-end vývoj“. TechRepublic. Citováno 2020-10-20.CS1 maint: číselné názvy: seznam autorů (odkaz)
  2. ^ „zeit / next.js“. GitHub. Archivováno od původního dne 16. 3. 2019. Citováno 2019-03-17.
  3. ^ A b „První vydání Next.js“. GitHub. 2019-03-14. Archivováno od původního dne 2020-10-10. Citováno 2019-03-17.
  4. ^ „Jak vytvořit blog s Next a MDX“. Smashing Magazine. 2020-09-09. Citováno 2020-10-19.
  5. ^ "Vývoj. Náhled. Odeslání. Pro nejlepší frontendové týmy - Vercel". vercel.com. Archivováno od původního dne 2020-10-01. Citováno 2020-09-22.
  6. ^ „Rozdíly mezi staticky generovanými weby a vykreslenými aplikacemi na straně serveru“. Smashing Magazine. 2020-07-02. Citováno 2020-10-19.
  7. ^ A b C d E F G h i Thakkar, Mohit (2020), Thakkar, Mohit (ed.), „Next.js“, Vytváření aplikací React pomocí vykreslování na straně serveru: Použijte React, Redux a Next k vytváření úplných aplikací pro vykreslování na straně serveru, Berkeley, CA: Apress, str. 93–137, doi:10.1007/978-1-4842-5869-9_3, ISBN  978-1-4842-5869-9, vyvoláno 2020-10-20
  8. ^ A b Thakkar, Mohit (2020), Thakkar, Mohit (ed.), „Přidání vykreslení na straně serveru k vaší aplikaci React“, Vytváření aplikací React pomocí vykreslování na straně serveru: Použijte React, Redux a Next k vytváření úplných aplikací pro vykreslování na straně serveru, Berkeley, CA: Apress, s. 139–152, doi:10.1007/978-1-4842-5869-9_4, ISBN  978-1-4842-5869-9, vyvoláno 2020-10-20
  9. ^ 2. prosince, Matt Asay v Developer on; 2019; Pst, 11:58 dop. „Proč může být front-end vývoj novou hranicí“. TechRepublic. Citováno 2020-10-20.CS1 maint: číselné názvy: seznam autorů (odkaz)
  10. ^ A b "Porovnání stylingových metod v Next.js". Smashing Magazine. 2020-09-17. Citováno 2020-10-20.
  11. ^ A b 31. ledna, Matt Asay v Developer on; 2020; Pst, 6:33 hod. „Pohled zasvěcených na příspěvky webového rámce Google k Next.js a dalším“. TechRepublic. Citováno 2020-10-19.CS1 maint: číselné názvy: seznam autorů (odkaz)
  12. ^ „Statické generování webů s funkcemi aplikace pro jednu stránku? To je to, co přijde Další (.js). Blog o přetečení zásobníku. 2020-10-07. Citováno 2020-10-20.
  13. ^ Krill, Paul (2016-10-31). „Další krok po Node.js: Rámec pro„ univerzální “aplikace JavaScriptu“. InfoWorld. Citováno 2020-10-20.
  14. ^ Krill, Paul (2017-03-28). „Next.js 2.0 hraje lépe s React a JavaScript“. InfoWorld. Citováno 2020-10-20.
  15. ^ Krill, Paul (2018-09-21). „Framework Next.js 7 se kompiluje rychleji, podporuje WebAssembly“. InfoWorld. Citováno 2020-10-20.
  16. ^ Krill, Paul (2019-02-14). „Next.js 8 nyní podporuje aplikace bez serveru“. InfoWorld. Citováno 2020-10-20.
  17. ^ Krill, Paul (2020-03-12). „Aktualizace Next.js zdůrazňuje generování statického webu“. InfoWorld. Citováno 2020-10-20.
  18. ^ Krill, Paul (27. července 2020). „Next.js přidává přírůstkovou statickou regeneraci stránek“. InfoWorld. Archivováno od originálu 2. října 2020. Citováno 22. září 2020.
  19. ^ Krill, Paul (14. února 2019). „Next.js 8 nyní podporuje aplikace bez serveru“. InfoWorld. Archivováno od originálu 2. října 2020. Citováno 22. září 2020.

externí odkazy