Nextjs за всеки - с някои основни познания за React

С някои основни познания за React и JavaScript ще сте на път

Next.js е JavaScript рамка, създадена от Zeit. Позволява ви да създавате рендиране от страна на сървъра и статични уеб приложения, използвайки React. Това е чудесен инструмент за изграждане на следващия ви уебсайт. Той има много страхотни функции и предимства, които могат да направят Nextjs първата ви опция за изграждане на следващото ви уеб приложение.

За да започнете да използвате Next.js, не ви е необходима никаква конфигурация на webpack или подобна. Той идва с неговата конфигурация. Всичко, от което се нуждаете, е да стартирате npm run devи да започнете да изграждате приложението си?

В тази статия ще разгледаме страхотните функции и трикове на Next.js и как да започнете да изграждате следващия си уебсайт с него.

Тази публикация предполага, че имате някои основни познания за React и JavaScript.

Ето няколко страхотни уебсайта, създадени с Next.js:

  • Syntaxt.fm
  • npmjs
  • material-ui.io
  • expo.io
  • codemenitor.io

Дори използвах Nextjs, за да създам личния си уебсайт saidhayani.me - можете да получите изходния код на GitHub тук.

Първи стъпки с Next.js

За да започнете с Next.js, трябва да имате инсталиран node.js във вашата машина и това е всичко. Next.js е като всяко друго приложение на node.js - имате нужда от npm или Yarn, за да инсталирате зависимости.

Нека да започнем и да създадем проект Next.js.

Първо, трябва да създадем папка и да й дадем име по наш избор. Ще го назова nextjs-app.

Можете лесно да направите това с този команден ред:

mkdir nextjs-app

След като създадете папката nextjs-app, отворете я на терминала. Изпълнете, за npm init да създадете package.json файла.

След това трябва да инсталираме нашите зависимости.

Инсталиране на Next.js

  • използвайки прежда, тип
yarn add next
  • използвайки npm, напишете:
npm i next --save

След това трябва да инсталираме React, защото Next.js използва React. Първият ред по-долу използва прежда за инсталация.

yarn add react react-dom
// with npm
npm i react react-dom --save

След това трябва да създадете две необходими папки: pagesи static. Next.js няма да работи без тях !!

mkdir pages static

Трябва да имате тази структура, след като изпълните тези команди:

nextjs-app -pages -static -package.json

И тогава просто можете да стартирате npm next devи след това да отворите //localhost:3000/ в браузъра си.

На NotFoundстраницата ще се появи, тъй като не разполагаме с всяка страница все още!

Така че нека създадем homeстраница и входна точка index.js.

touch index.js home.js

И тогава можете да напишете нормален React компонент. Както казах по-горе, Next.js е за изграждане на React приложения.

Ето как home.jsизглежда нашият :

И тук е нашият index.jsфайл:

Next.js има функция за презареждане на живо. Всичко, което трябва да направите, е просто да промените и запазите и Next.js ще компилира и презареди приложението автоматично за вас.

Забележка : Next.js е като всеки друг инструмент за рендиране от страна на сървъра, който трябва да определим по подразбиране на страницата на нашето приложение, в нашия случай е index.js.

Ще видите тази промяна в браузъра след стартиране npm next dev:

Честито! Току-що създадохме приложение Next.js с няколко прости стъпки. Тези инструкции за създаване на приложение Next.js са описани в официалните документи на Next.js.

Моята алтернатива

Обикновено не използвам този начин. Вместо това използвам CLI на create-next-app, който ще направи всичко това за мен в един ред.

npx create-next-app my-app

Можете да разгледате документацията тук, за да разгледате повече функции.

Създайте персонализирани конфигурации за Next.js

Понякога може да искате да добавите някои допълнителни зависимости или пакети към приложението си Next.js.

Next.js ви дава възможност да персонализирате вашата конфигурация с помощта на next-config.jsфайл.

Например може да искате да добавите поддръжка на sass към приложението си. В този случай трябва да използвате пакета next-sass и трябва да го добавите към next-config.jsфайла, както в примера по-долу:

Първо инсталирайте next-sass:

yarn add @zeit/next-sass

След това го включете във next-config.jsфайла:

И тогава можете да създадете, напишете вашия sass код и да го импортирате във вашия компонент:

Импортиране на sass файла в нашия компонент:

И ето резултата:

Леле, не беше ли толкова лесно да добавите поддръжка на sass към приложението Next.js?

На този етап ние просто покрихме частта за инсталиране и конфигуриране. Сега нека поговорим за характеристиките на Next.js!

Характеристиките

Next.js се предлага с куп чудесни функции като визуализация от страна на сървъра, рутери и мързеливо зареждане.

Рендиране от страна на сървъра

Next.js извършва визуализация от страна на сървъра по подразбиране. Това прави приложението ви оптимизирано за търсачки. Също така можете да интегрирате всеки междинен софтуер като express.js или Hapi.js и можете да стартирате всяка база данни като MongoDB или MySQL.

Говорейки за оптимизация на търсачките, Next.js идва с Headкомпонент, който ви позволява да добавяте и създавате динамични мета тагове. Това е любимата ми функция - можете да правите персонализирани и динамични мета тагове. Те правят уебсайта Ви в състояние да бъде индексиран от търсачки като Google. Ето пример за Headкомпонент:

И можете да импортирате и използвате Headкомпонента на всяка друга страница:

Страхотно!

Забележка : С Next.js не е нужно да импортирате React, защото Next.js прави това вместо вас.

Генериране на статичен уебсайт с Next.js

Освен рендерирането от страна на сървъра, все още можете да компилирате и експортирате приложението си като HTML статичен уебсайт и да го разположите на статичен уеб хостинг като GitHub страница или netlify. Можете да научите повече как да направите статичен уебсайт с Next.js тук в официалните документи.

Рутери

Това е още една от страхотните функции на Next.js. Когато използвате приложението create-response-, обикновено трябва да инсталирате response-router и да създадете неговата персонализирана конфигурация.

Next.js се предлага със собствени рутери с нула конфигурации. Не се нуждаете от допълнителна конфигурация на вашите рутери. Просто създайте страницата си в pagesпапката и Next.js ще се погрижи за цялата конфигурация на маршрутизация.

Нека да създадем персонализирана навигация, за да стане всичко ясно!

За да навигирате между страници, Next.js има Linkметода за управление на навигацията.

Нека създаваме blog.jsи contact.jsстраници:

blog.js

И ето contact.jsстраницата:

И сега трябва да можем да навигираме между тези страници?

Уау, толкова лесно и супер страхотно.

Мързеливо зареждане

Мързеливото зареждане прави приложението ви по-добро за потребителите. Понякога страницата може да отнеме време за зареждане. Потребителят може да изостави приложението ви, ако зареждането отнема повече от 30 секунди.

Начинът да се избегне това е да се използва някакъв трик, за да се посочи на потребителя, че страницата се зарежда, например чрез показване на въртящ се механизъм. Мързеливо зареждане или разделяне на кода е една от функциите, които ви позволяват да се справяте и контролирате бавното зареждане, така че да зареждате само необходимия код на страницата си.

Next.js идва със собствен метод за разделяне на кода. Той ни предоставя метод, наречен dynamic, за зареждане на нашия компонент, както в примера по-долу:

Можете да намерите изходния код на тези примери на GitHub

Това е всичко. Надявам се, че това е достатъчно и се надявам, че тази статия ви дава ясна представа за Next.js и неговите функции. Можете да научите повече за други функции в официалните документи.

Ако имате други допълнения към тази публикация, можете да оставите коментар по-долу и ако харесвате тази публикация, моля, натиснете clap? и споделете.

Обсъждане в Twitter ?.

Между другото, наскоро работих със силна група софтуерни инженери за едно от мобилните си приложения. Организацията беше страхотна и продуктът беше доставен много бързо, много по-бързо от други фирми и фрийлансъри, с които съм работил, и мисля, че мога честно да ги препоръчам за други проекти там. Изпратете ми имейл, ако искате да се свържете - [email protected]