Next.js
Оригинални аутор(и) | Гиљермо Раух |
---|---|
Прво издање | октобар 2016. |
Стабилно издање | 14.1.4
|
Репозиторијум | |
Написан у | |
Платформа | вишеплатформски |
Величина | 17.0 MB |
Лиценца | MIT лиценца |
Веб-сајт | nextjs |
Next.js је веб развојни оквир отвореног кода који је креирала приватна компанија Vercel која пружа веб апликације засноване на React-у са рендеровањем на страни сервера и генерисањем статичког веб сајта .[1]
React документација помиње Next.js међу „пре��орученим алаткама“ саветујући је програмерима приликом „израде веб локације коју приказује сервер са Node.js“. [2] Док традиционалне React апликације могу рендерујовати свој садржај само у претраживачу на страни клијента, Next.js проширује ову функционалност тако да укључује апликације које се приказују на страни сервера.
Ауторска права и заштитни знаци за Next.js су у власништву Vercel-a, [3] који такође одржава и води развој отвореног кода. [4]
Позадина
[уреди | уреди извор]Next.js је React фрејмворк који омогућава неколико додатних функција, укључујући приказивање на страни сервера и генерисање статичких веб страница . [5] React је JavaScript библиотека која се традиционално користи за израду веб апликација које се приказују у клијентском прегледачу помоћу JavaScript-а. [6] Међутим, програмери су идентификовали неколико изазова са овом приступу, као што су непостојање JavaScript подршке или њено онемогућавање код одређених корисника, потенцијални безбедносни проблеми, знатно дуже време учитавања страница и негативан утицај на SEO оптимизацију сајта. [6] Оквири као што је Next.js заобилазе ове проблеме тако што дозвољавају да се нека или цела веб локација прикаже на страни сервера пре него што се пошаље клијенту. [6] [7] Next.js је један од најпопуларнијих оквира за React. [8] То је један од неколико препоручених „ланаца алата“ доступних приликом покретања нове апликације, а сви обезбеђују слој апстракције за помоћ у уобичајеним задацима.[9] Next.js захтева Node.js и може се иницијализовати помоћу npm-а .
Google је допринео пројекту Next.js, укључујући 43 pull request-a у 2019.[10] Од марта 2022. године, оквир користе многе велике веб странице, укључујући Волмарт, Apple, Најки, Netflix, TikTok, Uber, Lift и Starbucks. [11] Почетком 2020. године, Vercel је прикупио 21 милион долара у финансирању Серије А како би подржао побољшања софтвера. Оригинални аутор оквира, Гиљермо Раух, тренутно је извршни директор Vercela, а водећи одржавач пројекта је Тим Њуткенс.[12]
Историјат развоја
[уреди | уреди извор]Next.js је први пут објављен као пројекат отвореног кода на GitHub-а 25. октобра 2016. Првобитно је развијен на основу шест принципа: тренутачно доступна функционалност која не захтева подешавање, доступност JavaScript-а, све функције су написане у JavaScript-у, аутоматско дељење кода и приказивање на серверу, подесиво преузимање података, антиципирање захтева и поједностављивање имплементације. [13]
Next.JS 2.0 је најављен у марту 2017. укључујући неколико побољшања која су олакшала рад са малим веб локацијама. Такође је повећао ефикасност израде и побољшао скалабилност функције замене модула уживо . [14]
Верзија 7.0 је објављена у септембру 2018. са унапређеним руковањем грешкама и подршком за React-ов контекст API за унапређено динамичко управљање рутама. Ова верзија такође је била прва која је надограђена на Webpack 4. [15]
Верзија 8.0 је објављена у фебруару 2019. и била је прва која је омогућила примену апликација без сервера, где је код раздвојен на анонимне функције које се извршавају по захтеву. Ова верзија је такође смањила време и ресурсе потребне за статички извоз и побољшала перформансе у односу на претходне верзије.[16]
Верзија 9.3, најављена у марту 2020, је укључивала различите оптимизације и глобалну подршку Sass (стилски језик) и CSS модуле. [17]
Дана 27. јула 2020. објављена је верзија Next.js 9.5, додајући нове могућности као што су инкрементална статичка регенерација, поновно уписивање и подршку за преусмеравања. [18]
15. јуна 2021. објављена је верзија Next.js 11, која је између осталог увела: подршку за Webpack 5, преглед функционалности за колаборативно кодирање у реалном времену „Next.js Live“ и експерименталну функцију аутоматске конверзије из Create React апликације у Next.js компатибилан образац „Create React App Migration“. [19]
26. октобра 2021, Next.js 12 је пуштен у продају, додајући Rust компајлер, чинећи компилацију бржом, подршку за AVIF, Edge Functions & Middleware и Native ESM & URL Imports. [20]
Vercel је 26. октобра 2022. објавио Next.js 13. Ово велико издање донело је нови образац рутирања у бета верзији, са додатком App Router-а који укључује подршку за распореде, компоненте React Server, стриминг и нови сет метода за преузимање података. Штавише, Vercel је најавио нови ланац алата за фронт-енд развој под називом Turbo, укључујући Turbopack као наследника Webpack-а, Turborepo за инкременталне системе израде. [21]
У мају 2023. Vercel је објавио Next.js 13.4. Ово је са собом донело стабилну верзију App Router-а, која омогућава програмерима да га користе у производњи. [22]
У октобру 2023. Vercel је објавио Next.js 14, који долази са побољшаним управљањем меморијом уз коришћење edge runtime-а. [23]
Стилизовање и функционалности
[уреди | уреди извор]Next.js подржава стилизовање са CSS-ом, као и унапред компајлирани Sass и Scss, CSS-in-JS и стилизовани JSX . [24] Поред тога, израђен је са подршком за TypeScript и паметним пакетом. [25] Transpiler отвореног кода SWC се користи за трансформацију и превођење кода у JavaScript који може да користи претраживач. [26] Webpack, још једна алатка отвореног кода, користи се за накнадно спајање модула, међутим тренутно се замењује TurboPack-ом. [27] Сви ови алати се користе са npm-ом у терминалу. [28]
Главна карактеристика Next.js-а је његова употреба рендеровања на страни сервера како би се смањио терет веб претраживача и обезбедила побољшана безбедност[тражи се извор]. Ова функционалност омогућава да се странице богате садржајем издвајају за приказивање на страни сервера, што се може применити на било који део апликације или целокупан систем. [29]
Исто тако, ова техника се може применити и за посетиоце који први пут посећују страницу, што доприноси смањењу оптерећења веб претраживача док преузимају било које од средстава сајта. [30]
Функција "hot reloading" омогућава детекцију промена у коду и аутоматско поновно приказивање одговарајућих страница без потребе за поновним покретањем сервера. Ово значи да се измене у коду одмах приказују у веб претраживачу, иако ће неки прегледачи захтевати освежавање странице. [29]
Next.js користи рутирање засновано на страницама за погодност програмера и подржава динамичко рутирање. Друге карактеристике укључују замену "hot module"-a уживо, аутоматско раздвајање кода које укључује само код потребан за учитавање странице, и претходно преузимање странице како би се смањило време учитавања. [29]
Next.js нуди функције као што су getStaticProps и getServerSideProps за преузимање података било током процеса израде или са сваким захтевом, пружајући разноврсност за различите типове садржаја. Такође, нуди аутоматску оптимизацију слика за различите величине екрана и уређаје, побољшавајући перформансе веб странице и корисничко искуство. [31]
Next.js такође подржава инкременталну статичку регенерацију [32] и генерисање статичког сајта – компајлирана верзија веб локације се обично прави током израде и чува као .next фолдер. Када корисник упути захтев, унапред направљене верзија преко статичних HTML страница се кешује и шаље се назад. Ово чини време учитавања веома брзим, али није погодно за сваку веб локацију, посебно за интерактивне сајтове који се често мењају и користе много корисничког уноса.
Види још
[уреди | уреди извор]Референце
[уреди | уреди извор]- ^ „Next.js: brzo predstavljanje - Fragment Studio”. www.fragment-studio.com (на језику: санскрит). Приступљено 2024-04-09.
- ^ „Recommended Toolchains” (HTML). React documentation (на језику: енглески). Приступљено 10. 7. 2021.
- ^ Next.js Brand Guidelines, 26. 8. 2022
- ^ „Develop. Preview. Ship. For the best frontend teams – Vercel” (HTML). vercel.com (на језику: енглески). Архивирано из оригинала 2021-10-06. г. Приступљено 2020-09-22.
- ^ „Differences Between Static Generated Sites And Server-Side Rendered Apps”. Smashing Magazine (на језику: енглески). 2020-07-02. Приступљено 2020-10-19.
- ^ а б в Thakkar, Mohit (2020), Thakkar, Mohit, ур., „Next.js”, Building React Apps with Server-Side Rendering: Use React, Redux, and Next to Build Full Server-Side Rendering Applications (на језику: енглески), Berkeley, CA: Apress: 93—137, ISBN 978-1-4842-5869-9, doi:10.1007/978-1-4842-5869-9_3, Приступљено 2020-10-20
- ^ Thakkar, Mohit (2020), Thakkar, Mohit, ур., „Adding Server-Side Rendering to Your React Application”, Building React Apps with Server-Side Rendering: Use React, Redux, and Next to Build Full Server-Side Rendering Applications (на језику: енглески), Berkeley, CA: Apress: 139—152, ISBN 978-1-4842-5869-9, doi:10.1007/978-1-4842-5869-9_4, Приступљено 2020-10-20
- ^ Asay, Matt (2. 12. 2019). „Why front-end development may be the new frontier”. TechRepublic (на језику: енглески). Приступљено 2020-10-20.
- ^ Lukman, Adebiyi Adedotun (2020-09-17). „Comparing Styling Methods In Next.js”. Smashing Magazine (на језику: енглески). Приступљено 2020-10-20.
- ^ Asay, Matt (1. 2. 2020). „An insider's look at Google's web framework contributions to Next.js and more”. TechRepublic (на језику: енглески). Приступљено 2020-10-19.
- ^ Thakkar, Mohit (2020), Thakkar, Mohit, ур., „Next.js”, Building React Apps with Server-Side Rendering: Use React, Redux, and Next to Build Full Server-Side Rendering Applications (на језику: енглески), Berkeley, CA: Apress: 93—137, ISBN 978-1-4842-5869-9, doi:10.1007/978-1-4842-5869-9_3, Приступљено 2020-10-20
- ^ Donovan, Ryan (2020-10-07). „Static site generation with single page app functionality? That's what's coming Next(.js)” (html). Stack Overflow Blog (на језику: енглески). Приступљено 2020-10-20.
- ^ Krill, Paul (2016-10-31). „Next step after Node.js: Framework for 'universal' JavaScript apps”. InfoWorld (на језику: енглески). Приступљено 2020-10-20.
- ^ Krill, Paul (2017-03-28). „Next.js 2.0 plays better with React and JavaScript”. InfoWorld (на језику: енглески). Приступљено 2020-10-20.
- ^ Krill, Paul (2018-09-21). „Next.js 7 framework compiles faster, supports WebAssembly”. InfoWorld (на језику: енглески). Приступљено 2020-10-20.
- ^ Krill, Paul (2019-02-14). „Next.js 8 now supports serverless apps”. InfoWorld (на језику: енглески). Приступљено 2020-10-20.
- ^ Krill, Paul (2020-03-12). „Next.js upgrade emphasizes static site generation”. InfoWorld (на језику: енглески). Приступљено 2020-10-20.
- ^ Krill, Paul (27. 7. 2020). „Next.js adds incremental static pages regeneration”. InfoWorld. Архивирано из оригинала 2. 10. 2020. г. Приступљено 22. 9. 2020.
- ^ „Next.js 11”. Приступљено 2021-07-10.
- ^ „Next.js 12”. nextjs.org (на језику: енглески). Приступљено 2021-10-27.
- ^ Orbán, Balázs (2022-10-25). „Next.js 13”. nextjs.org (на језику: енглески). Приступљено 2023-06-09.
- ^ Markbåge, Sebastian, Tim Neutkens (2023-05-04). „Next.js 13.4”. nextjs.org (на језику: енглески). Приступљено 2023-06-07.
- ^ „Next.js 14.0.0”. nextjs.org (на језику: енглески). 2023-12-08. Приступљено 2023-11-26.
- ^ Lukman, Adebiyi Adedotun (2020-09-17). „Comparing Styling Methods In Next.js”. Smashing Magazine (на језику: енглески). Приступљено 2020-10-20.
- ^ Krill, Paul (14. 2. 2019). „Next.js 8 now supports serverless apps”. InfoWorld. Архивирано из оригинала 2. 10. 2020. г. Приступљено 22. 9. 2020.
- ^ „Architecture: Next.js Compiler | Next.js”. nextjs.org (на језику: енглески). Приступљено 2023-08-19.
- ^ „Architecture: Turbopack | Next.js”. nextjs.org (на језику: енглески). Приступљено 2023-08-19.
- ^ Asay, Matt (1. 2. 2020). „An insider's look at Google's web framework contributions to Next.js and more”. TechRepublic (на језику: енглески). Приступљено 2020-10-19.
- ^ а б в Thakkar, Mohit (2020), Thakkar, Mohit, ур., „Next.js”, Building React Apps with Server-Side Rendering: Use React, Redux, and Next to Build Full Server-Side Rendering Applications (на језику: енглески), Berkeley, CA: Apress: 93—137, ISBN 978-1-4842-5869-9, doi:10.1007/978-1-4842-5869-9_3, Приступљено 2020-10-20
- ^ Thakkar, Mohit (2020), Thakkar, Mohit, ур., „Adding Server-Side Rendering to Your React Application”, Building React Apps with Server-Side Rendering: Use React, Redux, and Next to Build Full Server-Side Rendering Applications (на језику: енглески), Berkeley, CA: Apress: 139—152, ISBN 978-1-4842-5869-9, doi:10.1007/978-1-4842-5869-9_4, Приступљено 2020-10-20
- ^ „getting-started-with-next-js”. GFG. 12 Mar, 2024. Приступљено 4 April 2024. Проверите вредност парамет(а)ра за датум:
|date=
(помоћ) - ^ „Incremental Static Regeneration with Next.js”. Vercel (на језику: енглески). Приступљено 2022-03-06.
Спољашње везе
[уреди | уреди извор]- „Case Study - Hulu | Next.js”. nextjs.org (на језику: енглески). Приступљено 2020-10-16.
- „Šta je Next.js?”. PopArt studio (на језику: српски). Приступљено 2024-04-09.
- Smith, Craig S. „Have You Noticed The New Web? It's Faster, More Secure”. Forbes (на језику: енглески). Приступљено 2020-10-16.
- Asay, Matt (3. 4. 2020). „Front-end frameworks are about to get even cooler, says Google lead”. TechRepublic (на језику: енглески). Приступљено 2020-10-16.
- Asay, Matt (2020-06-01). „How GraphQL turned web development on its head”. InfoWorld (на језику: енглески). Приступљено 2020-10-20.