Огнен Бендевски е инструктор на нашата Академија за Front-End програмирање и ги предава модулите JavaScript и React. Тој е дипломиран инженер по информатички технологии, со насока компјутерско инженерство на ФИНКИ. Шест години живее во Германија, каде работи во еден од најголемите стартапи во Европа – Grover. Главна дејност му е Front-End, каде работи на веб и мобилни апликации. 

Прочитајте што Огнен Бендевски има да каже за Next.js

Рапидниот развој на дигиталниот свет и сѐ поголемиот број на онлајн бизниси ја диктираат потребата од константно еволуирање и подобрување на постоечките технологии за развој на веб апликации. Почнувајќи од подобрени перформанси, можности за скалабилност, подобрено корисничко искуство и SEO оптимизација, технологиите константно еволуираат додавајќи нови и нови функционалности како решение на постоечките проблеми и ограничувања.

Во последно време, на листата на технологии кои доживуваат вртоглав раст и популарност се најде NextJS, а сѐ поголем е и бројот на девелопери кои го вклучуваат во стекот на технологии врз кои ги градат своите проекти.

Но, што всушност претставува NextJS?

NextJS е програмска рамка (фрејмворк) изградена над ReactJS и служи за градење на Single Page апликации. Развиена е од тимот на Vercel. Популарноста на NextJS главно се базира на фактот што реши еден голем проблем што програмерите го имаа со апликациите кои се опслужуваат на клиентска страна, во интернет пребарувач. Да, иако тие апликации имаат напредно корисничко искуство каде што нема потреба од повторно лоадирање на страната при користење на апликацијата, тие доаѓаат со свои проблеми.

Имено, бидејќи големиот дел од содржината станува достапна дури откако интернет пребарувачот ќе го изврши кодот, веб кролерите (web crawlers) имаат потешкотии да ја прочитаат текст содржината од таа страна. Како резултат на тоа, многу Single Page апликации, иако популарни, останаа анонимни за пребарувачите како Google.

NextJS го решава тој проблем со рендерирање на React компонентите на серверска страна (SSR – server side rendering). Со NextJS, програмерите можат да го рендерираат кодот на серверската страна и да пратат едноставен, индексибилен HTML фајл на клиентот (веб пребарувачот). Иако ова не беше сосема невозможно пред појавата на NextJS, за тоа беше потребно многу долг и комплициран процес за овозможување на истото.

NextJS исто така нуди помош при генерирање на статички сајт (SSG – static site generation). Тоа е уште еден начин на градење на веб страни и апликации. Разликата од рендерирање на серверска страна е во тоа што HTML-от е генериран при градењето на апликацијата (build time). При SSR, HTML-от динамички се гради при извршување (runtime). Веб страните изградени со SSG се супер брзи, меѓутоа не се прикладни за премногу интерактивност, бидејќи со повеќе интерактивност, треба ре-изградување на HTML-от, нешто што се постигнува со SSR.

Како резултат на тоа, оваа стратегија е погодна за изградба на страни кои не се менуваат многу често и не зависат од корисничкиот внес, пр: страна за информации, почетна страна со статична содржина итн. При изработка на страна со NextJS, можете да ги користите двете стратегии наизменично.

Се прашувате кои се главните бенефити на NextJS? Би издвоил неколку позначајни како:

• Лесен за започнување на нов проект

Со едноставна команда од командна линија, новиот проект е достапен за помалку од 1 минута. Има и други додатоци со кои може да додавате екстра функционалности (пр: typescript и други).

• Подобрен SEO (search engine optimization) 

SEO е од огромна важност, за да нашата страна биде „видлива“ и да се јавува погоре при понудените резултати на веб пребарувачите. Претходно објаснивме како се постигнува тоа.

• Приспособен Open Graph

NextJS ни овозможува програмски да ги додаваме потребните мета податоци за секоја страна посебно. Тие мета податоци се потребни за подобро SEO, меѓутоа, исто така и прават нашите линкови да изгледаат многу подобро кога ги споделуваме на социјални медиуми (пример, кога ќе споделеме линк на твитер или фејсбук, автоматски добиваме слика, точен наслов и убаво дефинирана содржина на картичката).

• Подобрени перформанси

Бидејќи NextJS го ослободува интернет пребарувачот од тоа да мора да гo симне, па да го опслужи јаваскрипт кодот, има потенцијал за огромно подобрување на време до првото исцртување (time to first draw) – тоа е времето по кое корисникот гледа први информации на веб страната. Идеално, тоа би било под 1 секунда.

• Голема интернет заедница и редовно подобрување 

Еден од главните показатели дека одреден фрејмворк или библиотека е супер за користење е колку тој/таа е често одржуван. Огромниот број на ѕвезди на гитхаб покажува дека програмерите ѝ веруваат и ја користат често. Доколку го погледнете распоредот на издавање на нови верзии, ќе видете дека NextJS многу често се надградува и подобрува. Бидејќи е еден од најчесто користените фрејмворци за React, тоа значи дека доколку заглавите на одреден проблем, ќе најдете голем број на одговори за вашите проблеми – многу важно при избор на нова програмска рамка.

• Голем број на помошни алатки – out of the box

NextJS самиот во себе содржи решенија за рутирање, интернационализација, аналитика, брзо рефреширање, вградена поддршка за CSS, делење на код (code-splitting) и bundling, како и ред други работи за кои во чист React или други фрејмворци ќе ви требаат голем број на надворешни библиотеки за да се постигне истото.

И сосема за крај, со претходно наведеното се обидов да ги покријам само дел од позитивните работи на NextJS. Се надевам ќе ви даде добра мотивација и насока што следно да почнете да учите, но и полесно да се одлучите кој фрејмворк ќе го вклучите во креирање на вашиот следен проект. Сѐ поголем е бројот на големи компании од светот што веќе ги градат своите веб страни и апликации баш со овој фрејмворк, па зошто не би се обиделе и вие? 🙂

Стекнете се со неопходниот сет вештини кои се очекува да ги поседуваат денешните фронт-енд девелопери на Академијата за Front-end програмирање во Brainster, учете по програма базирана на најновите трендови од светот на фронт-енд програмирањето, директно под менторство на нашиот тим од посветени ментори и долгогодишни професоналци во областа.

Доколку сакаш да си дел од Coding заедницата и заедно со нас да градиш нови успешни приказни, дознај повеќе за Академијата за Full Stack програмирање и Академијата за Front-end програмирање.

На Академијата за Full Stack програмирање и Академијата за Front-end програмирање учиме преку работа на реални проекти за реални клиенти под менторство на докажани и искусни инструктори.

Закажи средба со нашиот student success manager за повеќе насоки и детали за програмата!