Next.js je veb razvojni okvir otvorenog koda koji je kreirala privatna kompanija Vercel koja pruža veb aplikacije zasnovane na React-u sa renderovanjem na strani servera i generisanjem statičkog veb sajta .[1]

Next.js
Originalni autor(i)Giljermo Rauh
Prvo izdanjeoktobar 2016. god.; pre 7 godina (2016-10)
Stabilno izdanje
14.1.4
Repozitorijum Uredi na Vikipodacima
Napisan u
Platformavišeplatformski
Veličina17.0 MB
LicencaMIT licenca
Veb-sajtnextjs.org

React dokumentacija pominje Next.js među „preporučenim alatkama“ savetujući je programerima prilikom „izrade veb lokacije koju prikazuje server sa Node.js“. [2] Dok tradicionalne React aplikacije mogu renderujovati svoj sadržaj samo u pretraživaču na strani klijenta, Next.js proširuje ovu funkcionalnost tako da uključuje aplikacije koje se prikazuju na strani servera.

Autorska prava i zaštitni znaci za Next.js su u vlasništvu Vercel-a, [3] koji takođe održava i vodi razvoj otvorenog koda. [4]

Pozadina uredi

Next.js je React frejmvork koji omogućava nekoliko dodatnih funkcija, uključujući prikazivanje na strani servera i generisanje statičkih veb stranica . [5] React je JavaScript biblioteka koja se tradicionalno koristi za izradu veb aplikacija koje se prikazuju u klijentskom pregledaču pomoću JavaScript-a. [6] Međutim, programeri su identifikovali nekoliko izazova sa ovom pristupu, kao što su nepostojanje JavaScript podrške ili njeno onemogućavanje kod određenih korisnika, potencijalni bezbednosni problemi, znatno duže vreme učitavanja stranica i negativan uticaj na SEO optimizaciju sajta. [6] Okviri kao što je Next.js zaobilaze ove probleme tako što dozvoljavaju da se neka ili cela veb lokacija prikaže na strani servera pre nego što se pošalje klijentu. [6] [7] Next.js je jedan od najpopularnijih okvira za React. [8] To je jedan od nekoliko preporučenih „lanaca alata“ dostupnih prilikom pokretanja nove aplikacije, a svi obezbeđuju sloj apstrakcije za pomoć u uobičajenim zadacima.[9] Next.js zahteva Node.js i može se inicijalizovati pomoću npm-a .

Google je doprineo projektu Next.js, uključujući 43 pull request-a u 2019.[10] Od marta 2022. godine, okvir koriste mnoge velike veb stranice, uključujući Volmart, Apple, Najki, Netflix, TikTok, Uber, Lift i Starbucks. [11] Početkom 2020. godine, Vercel je prikupio 21 milion dolara u finansiranju Serije A kako bi podržao poboljšanja softvera. Originalni autor okvira, Giljermo Rauh, trenutno je izvršni direktor Vercela, a vodeći održavač projekta je Tim Njutkens.[12]

Istorijat razvoja uredi

Next.js je prvi put objavljen kao projekat otvorenog koda na GitHub-a 25. oktobra 2016. Prvobitno je razvijen na osnovu šest principa: trenutačno dostupna funkcionalnost koja ne zahteva podešavanje, dostupnost JavaScript-a, sve funkcije su napisane u JavaScript-u, automatsko deljenje koda i prikazivanje na serveru, podesivo preuzimanje podataka, anticipiranje zahteva i pojednostavljivanje implementacije. [13]

Next.JS 2.0 je najavljen u martu 2017. uključujući nekoliko poboljšanja koja su olakšala rad sa malim veb lokacijama. Takođe je povećao efikasnost izrade i poboljšao skalabilnost funkcije zamene modula uživo . [14]

Verzija 7.0 je objavljena u septembru 2018. sa unapređenim rukovanjem greškama i podrškom za React-ov kontekst API za unapređeno dinamičko upravljanje rutama. Ova verzija takođe je bila prva koja je nadograđena na Webpack 4. [15]

Verzija 8.0 je objavljena u februaru 2019. i bila je prva koja je omogućila primenu aplikacija bez servera, gde je kod razdvojen na anonimne funkcije koje se izvršavaju po zahtevu. Ova verzija je takođe smanjila vreme i resurse potrebne za statički izvoz i poboljšala performanse u odnosu na prethodne verzije.[16]

Verzija 9.3, najavljena u martu 2020, je uključivala različite optimizacije i globalnu podršku Sass (stilski jezik) i CSS module. [17]

Dana 27. jula 2020. objavljena je verzija Next.js 9.5, dodajući nove mogućnosti kao što su inkrementalna statička regeneracija, ponovno upisivanje i podršku za preusmeravanja. [18]

15. juna 2021. objavljena je verzija Next.js 11, koja je između ostalog uvela: podršku za Webpack 5, pregled funkcionalnosti za kolaborativno kodiranje u realnom vremenu „Next.js Live“ i eksperimentalnu funkciju automatske konverzije iz Create React aplikacije u Next.js kompatibilan obrazac „Create React App Migration“. [19]

26. oktobra 2021, Next.js 12 je pušten u prodaju, dodajući Rust kompajler, čineći kompilaciju bržom, podršku za AVIF, Edge Functions & Middleware i Native ESM & URL Imports. [20]

Vercel je 26. oktobra 2022. objavio Next.js 13. Ovo veliko izdanje donelo je novi obrazac rutiranja u beta verziji, sa dodatkom App Router-a koji uključuje podršku za rasporede, komponente React Server, striming i novi set metoda za preuzimanje podataka. Štaviše, Vercel je najavio novi lanac alata za front-end razvoj pod nazivom Turbo, uključujući Turbopack kao naslednika Webpack-a, Turborepo za inkrementalne sisteme izrade. [21]

U maju 2023. Vercel je objavio Next.js 13.4. Ovo je sa sobom donelo stabilnu verziju App Router-a, koja omogućava programerima da ga koriste u proizvodnji. [22]

U oktobru 2023. Vercel je objavio Next.js 14, koji dolazi sa poboljšanim upravljanjem memorijom uz korišćenje edge runtime-a. [23]

Stilizovanje i funkcionalnosti uredi

Next.js podržava stilizovanje sa CSS-om, kao i unapred kompajlirani Sass i Scss, CSS-in-JS i stilizovani JSX . [24] Pored toga, izrađen je sa podrškom za TypeScript i pametnim paketom. [25] Transpiler otvorenog koda SWC se koristi za transformaciju i prevođenje koda u JavaScript koji može da koristi pretraživač. [26] Webpack, još jedna alatka otvorenog koda, koristi se za naknadno spajanje modula, međutim trenutno se zamenjuje TurboPack-om. [27] Svi ovi alati se koriste sa npm-om u terminalu. [28]

Glavna karakteristika Next.js-a je njegova upotreba renderovanja na strani servera kako bi se smanjio teret veb pretraživača i obezbedila poboljšana bezbednost[traži se izvor]. Ova funkcionalnost omogućava da se stranice bogate sadržajem izdvajaju za prikazivanje na strani servera, što se može primeniti na bilo koji deo aplikacije ili celokupan sistem. [29]

Isto tako, ova tehnika se može primeniti i za posetioce koji prvi put posećuju stranicu, što doprinosi smanjenju opterećenja veb pretraživača dok preuzimaju bilo koje od sredstava sajta. [30]

Funkcija "hot reloading" omogućava detekciju promena u kodu i automatsko ponovno prikazivanje odgovarajućih stranica bez potrebe za ponovnim pokretanjem servera. Ovo znači da se izmene u kodu odmah prikazuju u veb pretraživaču, iako će neki pregledači zahtevati osvežavanje stranice. [29]

Next.js koristi rutiranje zasnovano na stranicama za pogodnost programera i podržava dinamičko rutiranje. Druge karakteristike uključuju zamenu "hot module"-a uživo, automatsko razdvajanje koda koje uključuje samo kod potreban za učitavanje stranice, i prethodno preuzimanje stranice kako bi se smanjilo vreme učitavanja. [29]

Next.js nudi funkcije kao što su getStaticProps i getServerSideProps za preuzimanje podataka bilo tokom procesa izrade ili sa svakim zahtevom, pružajući raznovrsnost za različite tipove sadržaja. Takođe, nudi automatsku optimizaciju slika za različite veličine ekrana i uređaje, poboljšavajući performanse veb stranice i korisničko iskustvo. [31]

Next.js takođe podržava inkrementalnu statičku regeneraciju [32] i generisanje statičkog sajta – kompajlirana verzija veb lokacije se obično pravi tokom izrade i čuva kao .next folder. Kada korisnik uputi zahtev, unapred napravljene verzija preko statičnih HTML stranica se kešuje i šalje se nazad. Ovo čini vreme učitavanja veoma brzim, ali nije pogodno za svaku veb lokaciju, posebno za interaktivne sajtove koji se često menjaju i koriste mnogo korisničkog unosa.

Vidi još uredi

Reference uredi

  1. ^ „Next.js: brzo predstavljanje - Fragment Studio”. www.fragment-studio.com (na jeziku: sanskrit). Pristupljeno 2024-04-09. 
  2. ^ „Recommended Toolchains” (HTML). React documentation (na jeziku: engleski). Pristupljeno 10. 7. 2021. 
  3. ^ Next.js Brand Guidelines, 26. 8. 2022 
  4. ^ „Develop. Preview. Ship. For the best frontend teams – Vercel” (HTML). vercel.com (na jeziku: engleski). Arhivirano iz originala 2021-10-06. g. Pristupljeno 2020-09-22. 
  5. ^ „Differences Between Static Generated Sites And Server-Side Rendered Apps”. Smashing Magazine (na jeziku: engleski). 2020-07-02. Pristupljeno 2020-10-19. 
  6. ^ a b v Thakkar, Mohit (2020), Thakkar, Mohit, ur., „Next.js”, Building React Apps with Server-Side Rendering: Use React, Redux, and Next to Build Full Server-Side Rendering Applications (na jeziku: engleski), Berkeley, CA: Apress: 93—137, ISBN 978-1-4842-5869-9, doi:10.1007/978-1-4842-5869-9_3, Pristupljeno 2020-10-20 
  7. ^ Thakkar, Mohit (2020), Thakkar, Mohit, ur., „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 (na jeziku: engleski), Berkeley, CA: Apress: 139—152, ISBN 978-1-4842-5869-9, doi:10.1007/978-1-4842-5869-9_4, Pristupljeno 2020-10-20 
  8. ^ Asay, Matt (2. 12. 2019). „Why front-end development may be the new frontier”. TechRepublic (na jeziku: engleski). Pristupljeno 2020-10-20. 
  9. ^ Lukman, Adebiyi Adedotun (2020-09-17). „Comparing Styling Methods In Next.js”. Smashing Magazine (na jeziku: engleski). Pristupljeno 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 (na jeziku: engleski). Pristupljeno 2020-10-19. 
  11. ^ Thakkar, Mohit (2020), Thakkar, Mohit, ur., „Next.js”, Building React Apps with Server-Side Rendering: Use React, Redux, and Next to Build Full Server-Side Rendering Applications (na jeziku: engleski), Berkeley, CA: Apress: 93—137, ISBN 978-1-4842-5869-9, doi:10.1007/978-1-4842-5869-9_3, Pristupljeno 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 (na jeziku: engleski). Pristupljeno 2020-10-20. 
  13. ^ Krill, Paul (2016-10-31). „Next step after Node.js: Framework for 'universal' JavaScript apps”. InfoWorld (na jeziku: engleski). Pristupljeno 2020-10-20. 
  14. ^ Krill, Paul (2017-03-28). „Next.js 2.0 plays better with React and JavaScript”. InfoWorld (na jeziku: engleski). Pristupljeno 2020-10-20. 
  15. ^ Krill, Paul (2018-09-21). „Next.js 7 framework compiles faster, supports WebAssembly”. InfoWorld (na jeziku: engleski). Pristupljeno 2020-10-20. 
  16. ^ Krill, Paul (2019-02-14). „Next.js 8 now supports serverless apps”. InfoWorld (na jeziku: engleski). Pristupljeno 2020-10-20. 
  17. ^ Krill, Paul (2020-03-12). „Next.js upgrade emphasizes static site generation”. InfoWorld (na jeziku: engleski). Pristupljeno 2020-10-20. 
  18. ^ Krill, Paul (27. 7. 2020). „Next.js adds incremental static pages regeneration”. InfoWorld. Arhivirano iz originala 2. 10. 2020. g. Pristupljeno 22. 9. 2020. 
  19. ^ „Next.js 11”. Pristupljeno 2021-07-10. 
  20. ^ „Next.js 12”. nextjs.org (na jeziku: engleski). Pristupljeno 2021-10-27. 
  21. ^ Orbán, Balázs (2022-10-25). „Next.js 13”. nextjs.org (na jeziku: engleski). Pristupljeno 2023-06-09. 
  22. ^ Markbåge, Sebastian, Tim Neutkens (2023-05-04). „Next.js 13.4”. nextjs.org (na jeziku: engleski). Pristupljeno 2023-06-07. 
  23. ^ „Next.js 14.0.0”. nextjs.org (na jeziku: engleski). 2023-12-08. Pristupljeno 2023-11-26. 
  24. ^ Lukman, Adebiyi Adedotun (2020-09-17). „Comparing Styling Methods In Next.js”. Smashing Magazine (na jeziku: engleski). Pristupljeno 2020-10-20. 
  25. ^ Krill, Paul (14. 2. 2019). „Next.js 8 now supports serverless apps”. InfoWorld. Arhivirano iz originala 2. 10. 2020. g. Pristupljeno 22. 9. 2020. 
  26. ^ „Architecture: Next.js Compiler | Next.js”. nextjs.org (na jeziku: engleski). Pristupljeno 2023-08-19. 
  27. ^ „Architecture: Turbopack | Next.js”. nextjs.org (na jeziku: engleski). Pristupljeno 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 (na jeziku: engleski). Pristupljeno 2020-10-19. 
  29. ^ a b v Thakkar, Mohit (2020), Thakkar, Mohit, ur., „Next.js”, Building React Apps with Server-Side Rendering: Use React, Redux, and Next to Build Full Server-Side Rendering Applications (na jeziku: engleski), Berkeley, CA: Apress: 93—137, ISBN 978-1-4842-5869-9, doi:10.1007/978-1-4842-5869-9_3, Pristupljeno 2020-10-20 
  30. ^ Thakkar, Mohit (2020), Thakkar, Mohit, ur., „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 (na jeziku: engleski), Berkeley, CA: Apress: 139—152, ISBN 978-1-4842-5869-9, doi:10.1007/978-1-4842-5869-9_4, Pristupljeno 2020-10-20 
  31. ^ „getting-started-with-next-js”. GFG. 12 Mar, 2024. Pristupljeno 4 April 2024.  Proverite vrednost paramet(a)ra za datum: |date= (pomoć)
  32. ^ „Incremental Static Regeneration with Next.js”. Vercel (na jeziku: engleski). Pristupljeno 2022-03-06. 

Spoljašnje veze uredi