Содржина[Крие][Прикажи]
При изборот на софтверска библиотека или рамка, искуството на развивачот обично се зема предвид.
Кога го спомнувам „искуството на програмерите“, мислам на тоа како програмерите всушност ја вршат работата. Програмерите избираат библиотеки или рамки што се пријатни за користење.
Ова е една од основните причини зошто сега ги имаме најпопуларните библиотеки и рамки. Како програмери, не мора да започнуваме од нула кога постојат постоечки алатки создадени за да ни помогнат во нашите задачи.
Рамките се парчиња софтвер кои се креирани и користени од програмерите за конструирање на апликации, а NextJS е еден од нив.
Во овој пост, ќе го разгледаме Nextjs, неговите клучни карактеристики и како можеме да го користиме за да изградиме апликација. Ајде да скокнеме веднаш.
Што е Next.js?
Следно.js е JavaScript рамка за брзо и лесно конструирање статични веб-страници и онлајн апликации базирани на React. Ви овозможува да дизајнирате одлични веб-апликации за различни платформи, вклучувајќи Windows, Linux и Mac.
Треба да сте запознаени со рамката Next.js ако имате минимално познавање со react и сакате да дознаете повеќе за екосистемот на react.
Иако Next.js доаѓа со се што ви треба за да започнете, можете да изберете помеѓу NPM и Yarn, JavaScript и TypeScript, CSS и SCSS, статички извоз и распоредување без сервер.
Карактеристики
- Рутирањето се врши автоматски – Не треба ништо да конфигурирате бидејќи која било URL-адреса е мапирана со датотечен систем, со датотеки во папката страници (имате опции за прилагодување, се разбира).
- Компоненти на една датотека – Едноставно е да се додадат стилови со опсег на компонентата користејќи styled-jsx, кој е целосно интегриран и произведен од истиот тим.
- Повторно вчитување на топол код – Кога Next.js ќе открие модификација зачувана на дискот, повторно ја вчитува страницата.
- Динамични компоненти - можете динамички да вчитате JavaScript модули и компоненти React.
- Статички извоз – Next.js ви овозможува да извезете целосно статична локација од вашата апликација со следната команда за извоз.
- Компатибилност со околината – Next.js беспрекорно се интегрира со екосистемите JavaScript, Node и React.
- Автоматско разделување на кодови - Само библиотеките и JavaScript што се потребни се користат за прикажување страници. Наместо да креира единствена JavaScript-датотека што го содржи целиот код на апликацијата, Next.js интелигентно ја дели апликацијата на многу ресурси.
Како да креирате апликација next.js?
инсталација
Можете да ја користите командата node npx за да инсталирате и изградите проект Next.js.
Ова ќе генерира папка и сите датотеки, конфигурации и други ставки потребни за извршување на проектот Next.js.
Може да ја стартувате апликацијата откако ќе се генерира.
Страници и рутирање
За да се справиме со маршрутите со Next.js, не треба да користиме рамка за рутирање. Рутирањето со Next.js е лесно да се постави. Кога ја користите командата креирај-следна-апликација за да изградиш нова апликација Next.js, апликацијата стандардно создава папка наречена „страници“.
Оваа папка „страници“ е местото каде што ги одржувате вашите маршрути. Како резултат на тоа, секоја датотека со компоненти на реагирање во поддиректориумот ќе се постапува како посебна рута.
На пример, ако папката ги содржи тие датотеки:
- индекс.js
- за.js
- арикули.js
Оваа датотека автоматски ќе се трансформира на три начини:
- Индекс страницата localhost/index
- Страницата за localhost/about
- Блог страницата localhost/статии
Пример за страница about.js е прикажан подолу. Ништо не е обезбедено за страницата, како што можете да видите. Тоа е едноставно стандардна функционална компонента на React.
патишта
За да направите вгнездени правци, прво мора да воспоставите подпапка. На пример: страници/написи. Направете ја вашата компонента за реакција „contact.js“ во таа папка и таа ќе ја генерира страницата localhost/articles/contact.
Ако ставите една датотека во pages/articles.js и друга во pages/articles/index.js. И двете ја рефлектираат истата патека localhost/blog. Во оваа ситуација, Next.js само ќе ја прикаже датотеката article.js. Што е со динамичните рути, во кои секој блог пост има своја патека:
- localhost/blog/first-article
- localhost/blog/-втора-напис
Користејќи ја ознаката за загради, можете да дефинирате динамична рута во Next.js. На пример: pages/article/[slug].js
Поврзете правци
Сега ја завршивте вашата прва рута. Претпоставувам дека прашувате како да поврзете страници со тие рути. Ќе ви треба „следно/врска“ за да го направите тоа.
Еве пример за почетна страница која вклучува врска до страницата За:
Ако сакате да ја стилизирате врската, користете ја следнава синтакса:
Пренасочи правци
Што ако треба да присилите пренасочување на одредена страница? На пример, кога ќе се притисне копче? Можете да го постигнете ова со користење на 'router.push':
Оптимизација
Страниците во веб-апликациите бараат мета (глава) елементи покрај податоците во телото на HTML. Ова ќе бара инсталирање на дополнително барање наречено React Helmet во апликацијата React.
Можеме да ја користиме компонентата Head од следно/глава во Next за лесно да додаваме метаподатоци на нашите веб-страници што ќе бидат прикажани во резултатите од пребарувањето и вградувањата:
Компоненти
Честопати ќе треба да развиете компоненти или датотека за распоред. На пример, компонента што ја рендерира лентата за навигација. Само што ја користевме папката страници досега. Што ако вашата компонента не е наменета да биде страница за маршрута?
Не сакате корисникот да се движи до страница како што е локален хост/навреда. Ако ја ставите компонентата Navbar.js во папката страници, тоа ќе се случи. Што треба да направите во оваа ситуација?
Едноставно складирајте ги сите ваши компоненти „не е страница“ во посебна папка. Повеќето проекти Next.js го користат називот „компоненти“ и оваа папка се генерира во основната папка на вашиот проект.
Компонента за глава
Почетното вчитување на страницата се прикажува од Next.js на страната на серверот. Тоа го прави со менување на HTML на вашата страница. Делот за заглавие е вклучен.
Компонентата Next.js Head се користи за давање ознаки на делот за заглавие како наслов и мета. Компонентата Head се користи во овој пример на компонента Layout.
Креирај 404 страница не е пронајдена
Изводливо е да направите своја сопствена страница за грешка 404. Можеби ќе сакате да ја прилагодите пораката или да додадете свој дизајн на страницата. Во папката страници, креирајте ја датотеката 404.js.
Кога ќе се појави грешка 404, Next.js автоматски ќе се пренасочи на оваа страница. Еве пример за персонализирана страница 404:
Преземање податоци од страна на серверот
Наместо да преземате податоци од страната на клиентот, Next.js ви овозможува да спроведете почетна популација на податоци, што подразбира испраќање на страницата со податоците веќе пополнети од серверот.
Имате два избора за спроведување на преземање податоци од страна на серверот:
- Податоците треба да се преземат за секое барање.
- Добивајте податоци само еднаш во текот на градежниот процес (статичка локација)
Добијте податоци за секое барање
Методот getServerSideProps се користи за прикажување на секое барање од страна на серверот. Оваа функција може да биде вклучена на крајот од вашата компонентна датотека. Next.js автоматски ќе ги пополни вашите компонентни реквизити со објектот getServerSideProps доколку таа функција е присутна во вашата компонентна датотека.
Преземете податоци во време на изградба
Методот getStaticProps се користи за прикажување од страна на серверот во времето на изградбата. Оваа функција може да биде вклучена на крајот од вашата компонентна датотека. Овој метод го извршува кодот на серверот и испраќа барање GET до серверот, но само еднаш кога нашиот проект е завршен.
Зошто треба да научите Next.js?
Една од причините за ова е затоа што Next.js е изграден на врвот на React, преден пакет алатки за развој за креирање кориснички интерфејси тоа се мојот омилен избор за дизајнирање веб-апликации.
Но, не би било доволно ако Next.js не беше добар во она што го прави… нели?
Значи, што точно прави тоа?
Прво мора да дефинираме неколку концепти за да го разбереме. Next.js се здоби со популарност бидејќи го реши проблемот што го имаа многу веб-програмери со веб-апликациите од клиентот (во прелистувачот). Овие апликации за една страница (SPA) имаа подобро искуство бидејќи не им требаше на корисникот повторно да ја вчита страницата и овозможија поголема интерактивност.
Меѓутоа, бидејќи најголемиот дел од материјалот во апликација како оваа станува видлив само кога се изведува во прелистувачот, веб-роботите тешко ја разбираат текстуалната содржина на таквата апликација.
Како резултат на тоа, и покрај нивната популарност, многу СПА останаа главно анонимни за големите пребарувачи како Google. Next.js сега вклучува поцврст вграден механизам за рендерирање од страна на серверот (SSR) на компонентите на React.
Next.js им овозможува на програмерите да конструираат JavaScript код на серверот за време на процесот на градење и да обезбедат основен, индексиран HTML на корисникот.
Добрите
- Одлично за корисничко искуство
- Одлично за оптимизација
- Изградете супер-брза статична веб-локација што се однесува како динамична
- Флексибилност во градењето на UI и UX.
- Многу развојни предности
- Голема поддршка од заедницата
Конс
- Веб-страниците или апликациите имаат одредено време за изградба или развој.
- За одредени задачи, Next.js е несоодветен. Програмерите треба да бидат способни да конструираат динамични правци користејќи ги алатките Node.js.
Заклучок
Како што можете да видите, Next.js го поедноставува развојот на апликацијата React и ви овозможува да се фокусирате на она што е најважно - логиката на вашата апликација и интерфејсот. Вклучува сè што е потребно за создавање современи, богати со преден дел и апликации со API.
Соодветно е и за проекти само со содржина, како што се блогови и деловни веб-локации, поради неговата способност да создава статични HTML-страници.
Со тековните изданија, Next.js не само што одржува високо ниво на искуство со програмерите, туку и дава алатки за зголемување на визуелните перформанси и корисничкото искуство, обезбедувајќи светла иднина за оваа рамка.
Оставете Одговор