Съдържание[Крия][Покажи]
Когато избирате софтуерна библиотека или рамка, обикновено се взема предвид опитът на разработчика.
Когато споменавам „опит за разработчици“, имам предвид как всъщност разработчиците вършат работата. Разработчиците избират библиотеки или рамки, които са приятни за използване.
Това е една от основните причини, поради които сега имаме най-популярните библиотеки и рамки. Като разработчици, не е нужно да започваме от нулата, когато има създадени инструменти, които да ни помагат при нашите задачи.
Рамките са части от софтуер, които се създават и използват от разработчиците за конструиране на приложения, а NextJS е един от тях.
В тази публикация ще разгледаме Nextjs, неговите ключови характеристики и как можем да го използваме за изграждане на приложение. Да скочим направо.
Какво е Next.js?
Next.js е JavaScript рамка за бързо и лесно изграждане на статични уеб страници и онлайн приложения, базирани на React. Тя ви позволява да проектирате страхотни уеб приложения за различни платформи, включително Windows, Linux и Mac.
Трябва да сте запознати с рамката Next.js, ако имате минимално запознаване с react и искате да научите повече за екосистемата на react.
Въпреки че Next.js идва с всичко необходимо, за да започнете, можете да избирате между NPM и Yarn, JavaScript и TypeScript, CSS и SCSS, статичен експорт и внедряване без сървър.
Характеристики:
- Маршрутизирането се извършва автоматично – не е необходимо да конфигурирате нищо, защото всеки URL адрес е съпоставен с файловата система, с файлове в папката pages (разбира се, имате опции за персонализиране).
- Компоненти на един файл – Лесно е да добавите стилове, обхватни към компонента, като използвате 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 е лесно. Когато използвате командата create-next-app, за да създадете ново приложение Next.js, приложението създава папка, наречена „pages“ по подразбиране.
Тази папка „pages“ е мястото, където поддържате вашите маршрути. В резултат на това всеки файл с компоненти за реакция в поддиректорията ще се обработва като отделен маршрут.
Например, ако папката съдържа тези файлове:
- index.js
- about.js
- aricles.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/-втора-статия
Използвайки нотацията в скоби, можете да дефинирате динамичен маршрут в Next.js. Например: pages/article/[slug].js
Маршрути за връзки
Вече завършихте първия си маршрут. Предполагам, че питате как да свържете страници към тези маршрути. Ще ви трябва „следващ/връзка“, за да го направите.
Ето пример за начална страница, която включва връзка към страницата Информация:
Ако искате да стилизирате връзката, използвайте следния синтаксис:
Маршрути за пренасочване
Ами ако трябва да принудите пренасочване към определена страница? Например, когато се натисне бутон? Можете да постигнете това, като използвате 'router.push':
SEO
Страниците в уеб приложенията изискват мета (глава) елементи в допълнение към данните в тялото на HTML. Това ще наложи инсталирането на допълнително изискване, наречено React Helmet в React приложение.
Можем да използваме компонента Head от next/head в Next, за да добавим лесно метаданни към нашите уеб страници, които ще се показват в резултатите от търсенето и вгражданията:
Компоненти
Често ще трябва да разработите компоненти или файл за оформление. Например компонент, който изобразява навигационната лента. Досега използвахме папката със страници. Ами ако вашият компонент не е предназначен да бъде страница с маршрут?
Не искате потребителят да навигира до страница като localhost/navbar. Ако поставите компонента Navbar.js в папката pages, това ще се случи. Какво трябва да направите в ситуацията?
Просто съхранявайте всичките си компоненти „не е страница“ в отделна папка. Повечето проекти Next.js използват прозвището „компоненти“ и тази папка се генерира в основната папка на вашия проект.
Главен компонент
Първоначалното зареждане на страницата се изобразява от Next.js от страна на сървъра. Той прави това чрез промяна на HTML на вашата страница. Заглавната секция е включена.
Компонентът Next.js Head се използва за даване на тагове на заглавната секция като title и meta. Компонентът Head се използва в този пример за компонент Layout.
Създаване на 404 страница не е намерена
Възможно е да направите своя собствена страница с грешка 404. Може да искате да персонализирате съобщението или да добавите свой собствен дизайн на страницата. В папката pages създайте файла 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 на потребителя.
Професионалисти
- Страхотно за потребителско изживяване
- Страхотно за SEO
- Създайте супер бърз статичен уебсайт, който се държи като динамичен
- Гъвкавост при изграждане на UI и UX.
- Много предимства за развитие
- Страхотна подкрепа от общността
Против
- Уебсайтовете или приложенията имат определено време за изграждане или разработване.
- За определени задачи Next.js е неподходящ. Разработчиците трябва да могат да конструират динамични маршрути, използвайки Node.js инструменти.
Заключение
Както можете да видите, Next.js опростява разработването на приложения React и ви позволява да се съсредоточите върху най-важното – логиката на приложението и потребителския интерфейс. Той включва всичко необходимо за създаване на съвременни, богати на интерфейса и задвижвани от API приложения.
Подходящ е и за проекти само със съдържание, като блогове и бизнес уебсайтове, поради способността му да създава статични HTML страници.
С настоящите издания Next.js не само поддържа високо ниво на опит за разработчици, но също така предоставя инструменти за повишаване на визуалната производителност и потребителското изживяване, осигурявайки светло бъдеще за тази рамка.
Оставете коментар