Další.js - Next.js
![]() Logo Next.js | |
Původní autoři | Guillermo Rauch[1] |
---|---|
Vývojáři | Vercel a open-source komunita[2] |
První vydání | 25. října 2016[3] |
Stabilní uvolnění | 10.0.2 / 18. listopadu 2020 |
Náhled verze | 10.0.2-kanár.20 |
Úložiště | github |
Napsáno | JavaScript a Strojopis |
Plošina | Webová platforma |
Zahrnuto v | Reagovat |
Velikost | 17.0 MB |
Typ | Rámec webových aplikací |
Licence | Licence MIT |
webová stránka | nextjs |
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 .[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
- ^ 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)
- ^ „zeit / next.js“. GitHub. Archivováno od původního dne 16. 3. 2019. Citováno 2019-03-17.
- ^ 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.
- ^ „Jak vytvořit blog s Next a MDX“. Smashing Magazine. 2020-09-09. Citováno 2020-10-19.
- ^ "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.
- ^ „Rozdíly mezi staticky generovanými weby a vykreslenými aplikacemi na straně serveru“. Smashing Magazine. 2020-07-02. Citováno 2020-10-19.
- ^ 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
- ^ 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
- ^ 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)
- ^ A b "Porovnání stylingových metod v Next.js". Smashing Magazine. 2020-09-17. Citováno 2020-10-20.
- ^ 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)
- ^ „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.
- ^ Krill, Paul (2016-10-31). „Další krok po Node.js: Rámec pro„ univerzální “aplikace JavaScriptu“. InfoWorld. Citováno 2020-10-20.
- ^ Krill, Paul (2017-03-28). „Next.js 2.0 hraje lépe s React a JavaScript“. InfoWorld. Citováno 2020-10-20.
- ^ Krill, Paul (2018-09-21). „Framework Next.js 7 se kompiluje rychleji, podporuje WebAssembly“. InfoWorld. Citováno 2020-10-20.
- ^ Krill, Paul (2019-02-14). „Next.js 8 nyní podporuje aplikace bez serveru“. InfoWorld. Citováno 2020-10-20.
- ^ Krill, Paul (2020-03-12). „Aktualizace Next.js zdůrazňuje generování statického webu“. InfoWorld. Citováno 2020-10-20.
- ^ 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.
- ^ 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
- „Případová studie - Hulu | Next.js“. nextjs.org. Citováno 2020-10-16.
- Smith, Craig S. „Všimli jste si nového webu? Je rychlejší a bezpečnější“. Forbes. Citováno 2020-10-16.
- 3. dubna, Matt Asay v Developer on; 2020; Pst, 4:07 hod. „Front-end frameworks se chystají být ještě chladnější, říká Google lead“. TechRepublic. Citováno 2020-10-16.CS1 maint: číselné názvy: seznam autorů (odkaz)
- Asay, Matt (01.06.2020). „Jak GraphQL obrátil vývoj webu na hlavu“. InfoWorld. Citováno 2020-10-20.