Next.js

С Википедије, слободне енциклопедије
Next.js
Оригинални аутор(и)Гиљермо Раух
Прво издањеоктобар 2016. год.; пре 7 година (2016-10)
Стабилно издање
14.1.4
Репозиторијум
Уреди на Википодацима
Написан у
Платформавишеплатформски
Величина17.0 MB
ЛиценцаMIT лиценца
Веб-сајтnextjs.org

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 страница се кешује и шаље се назад. Ово чини време учитавања веома брзим, али није погодно за сваку веб локацију, посебно за интерактивне сајтове који се често мењају и користе много корисничког уноса.

Види још[уреди | уреди извор]

Референце[уреди | уреди извор]

  1. ^ „Next.js: brzo predstavljanje - Fragment Studio”. www.fragment-studio.com (на језику: санскрит). Приступљено 2024-04-09. 
  2. ^ „Recommended Toolchains” (HTML). React documentation (на језику: енглески). Приступљено 10. 7. 2021. 
  3. ^ Next.js Brand Guidelines, 26. 8. 2022 
  4. ^ „Develop. Preview. Ship. For the best frontend teams – Vercel” (HTML). vercel.com (на језику: енглески). Архивирано из оригинала 2021-10-06. г. Приступљено 2020-09-22. 
  5. ^ „Differences Between Static Generated Sites And Server-Side Rendered Apps”. Smashing Magazine (на језику: енглески). 2020-07-02. Приступљено 2020-10-19. 
  6. ^ а б в 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 
  7. ^ 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 
  8. ^ Asay, Matt (2. 12. 2019). „Why front-end development may be the new frontier”. TechRepublic (на језику: енглески). Приступљено 2020-10-20. 
  9. ^ Lukman, Adebiyi Adedotun (2020-09-17). „Comparing Styling Methods In Next.js”. Smashing Magazine (на језику: енглески). Приступљено 2020-10-20. 
  10. ^ Asay, Matt (1. 2. 2020). „An insider's look at Google's web framework contributions to Next.js and more”. TechRepublic (на језику: енглески). Приступљено 2020-10-19. 
  11. ^ 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 
  12. ^ 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. 
  13. ^ Krill, Paul (2016-10-31). „Next step after Node.js: Framework for 'universal' JavaScript apps”. InfoWorld (на језику: енглески). Приступљено 2020-10-20. 
  14. ^ Krill, Paul (2017-03-28). „Next.js 2.0 plays better with React and JavaScript”. InfoWorld (на језику: енглески). Приступљено 2020-10-20. 
  15. ^ Krill, Paul (2018-09-21). „Next.js 7 framework compiles faster, supports WebAssembly”. InfoWorld (на језику: енглески). Приступљено 2020-10-20. 
  16. ^ Krill, Paul (2019-02-14). „Next.js 8 now supports serverless apps”. InfoWorld (на језику: енглески). Приступљено 2020-10-20. 
  17. ^ Krill, Paul (2020-03-12). „Next.js upgrade emphasizes static site generation”. InfoWorld (на језику: енглески). Приступљено 2020-10-20. 
  18. ^ Krill, Paul (27. 7. 2020). „Next.js adds incremental static pages regeneration”. InfoWorld. Архивирано из оригинала 2. 10. 2020. г. Приступљено 22. 9. 2020. 
  19. ^ „Next.js 11”. Приступљено 2021-07-10. 
  20. ^ „Next.js 12”. nextjs.org (на језику: енглески). Приступљено 2021-10-27. 
  21. ^ Orbán, Balázs (2022-10-25). „Next.js 13”. nextjs.org (на језику: енглески). Приступљено 2023-06-09. 
  22. ^ Markbåge, Sebastian, Tim Neutkens (2023-05-04). „Next.js 13.4”. nextjs.org (на језику: енглески). Приступљено 2023-06-07. 
  23. ^ „Next.js 14.0.0”. nextjs.org (на језику: енглески). 2023-12-08. Приступљено 2023-11-26. 
  24. ^ Lukman, Adebiyi Adedotun (2020-09-17). „Comparing Styling Methods In Next.js”. Smashing Magazine (на језику: енглески). Приступљено 2020-10-20. 
  25. ^ Krill, Paul (14. 2. 2019). „Next.js 8 now supports serverless apps”. InfoWorld. Архивирано из оригинала 2. 10. 2020. г. Приступљено 22. 9. 2020. 
  26. ^ „Architecture: Next.js Compiler | Next.js”. nextjs.org (на језику: енглески). Приступљено 2023-08-19. 
  27. ^ „Architecture: Turbopack | Next.js”. nextjs.org (на језику: енглески). Приступљено 2023-08-19. 
  28. ^ Asay, Matt (1. 2. 2020). „An insider's look at Google's web framework contributions to Next.js and more”. TechRepublic (на језику: енглески). Приступљено 2020-10-19. 
  29. ^ а б в 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 
  30. ^ 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 
  31. ^ „getting-started-with-next-js”. GFG. 12 Mar, 2024. Приступљено 4 April 2024.  Проверите вредност парамет(а)ра за датум: |date= (помоћ)
  32. ^ „Incremental Static Regeneration with Next.js”. Vercel (на језику: енглески). Приступљено 2022-03-06. 

Спољашње везе[уреди | уреди извор]

Преузето из „https://sr.wikipedia.org/w/index.php?title=Next.js&oldid=27600552”