Змест[Схаваць][Паказаць]
Пры выбары праграмнай бібліятэкі або платформы звычайна ўлічваецца вопыт распрацоўшчыкаў.
Калі я згадваю «вопыт распрацоўшчыкаў», я маю на ўвазе тое, як распрацоўшчыкі на самай справе выконваюць працу. Распрацоўшчыкі выбіраюць бібліятэкі або платформы, якія прыемна выкарыстоўваць.
Гэта адна з асноўных прычын, чаму цяпер у нас ёсць самыя папулярныя бібліятэкі і фрэймворкі. Як распрацоўшчыкам, нам не трэба пачынаць з нуля, калі існуюць інструменты, створаныя, каб дапамагчы нам у выкананні нашых задач.
Фрэймворкі - гэта часткі праграмнага забеспячэння, якія ствараюцца і выкарыстоўваюцца распрацоўшчыкамі для стварэння прыкладанняў, і NextJS з'яўляецца адным з іх.
У гэтай публікацыі мы разгледзім Nextjs, яго ключавыя асаблівасці і тое, як мы можам выкарыстоўваць яго для стварэння прыкладання. Давайце адразу ўскочым.
Што такое Next.js?
Next.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 проста. Калі вы выкарыстоўваеце каманду create-next-app для стварэння новага прыкладання Next.js, праграма па змаўчанні стварае тэчку пад назвай «старонкі».
У гэтай тэчцы "старонкі" вы захоўваеце свае маршруты. У выніку кожны файл кампанентаў рэакцыі ў падкаталогу будзе апрацоўвацца як асобны маршрут.
Напрыклад, калі тэчка змяшчае гэтыя файлы:
- 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. Што наконт дынамічных маршрутаў, у якіх кожная публікацыя ў блогу мае свой шлях:
- лакальны хост/блог/першы артыкул
- лакальны хост/блог/-другі артыкул
Выкарыстоўваючы абазначэнне ў дужках, вы можаце вызначыць дынамічны маршрут у Next.js. Напрыклад: pages/article/[slug].js
Маршруты спасылак
Вы прайшлі свой першы маршрут. Я мяркую, што вы пытаецеся, як падключыць старонкі да гэтых маршрутаў. Для гэтага вам спатрэбіцца «далей/спасылка».
Вось прыклад хатняй старонкі, якая змяшчае спасылку на старонку Аб:
Калі вы хочаце аформіць спасылку, выкарыстоўвайце наступны сінтаксіс:
Маршруты перанакіравання
Што рабіць, калі вам трэба прымусова перанакіраваць пэўную старонку? Напрыклад, пры націску кнопкі? Вы можаце зрабіць гэта з дапамогай 'router.push':
SEO
Старонкі ў вэб-прыкладаннях патрабуюць мета-элементаў (галава) у дадатак да дадзеных у целе HTML. Гэта запатрабуе ўстаноўкі дадатковага патрабавання пад назвай React Helmet у дадатку React.
Мы можам выкарыстоўваць кампанент Head from next/head in 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) мелі лепшы вопыт, паколькі ім не трэба было, каб карыстальнік перазагружаў старонку, і дазвалялі больш інтэрактыўнасці.
Аднак, паколькі асноўная частка матэрыялу ў такой праграме становіцца бачнай толькі тады, калі яна выконваецца ў браўзеры, вэб-сканерам цяжка зразумець тэкставы змест такога прыкладання.
У выніку, нягледзячы на сваю папулярнасць, многія SPA заставаліся ў значнай ступені ананімнымі для буйных пошукавых сістэм, такіх як Google. Next.js цяпер уключае больш надзейны ўбудаваны механізм для рэндэрынгу на баку сервера (SSR) кампанентаў React.
Next.js дазваляе распрацоўшчыкам ствараць код JavaScript на сэрвэры падчас працэсу зборкі і прадастаўляць карыстачу базавы, індэксаваны HTML.
Прафесіяналы
- Выдатна падыходзіць для карыстацкага досведу
- Выдатна падыходзіць для SEO
- Стварыце суперхуткі статычны вэб-сайт, які паводзіць сябе як дынамічны
- Гнуткасць у стварэнні UI і UX.
- Шмат пераваг развіцця
- Вялікая падтрымка супольнасці
мінусы
- У вэб-сайтаў або прыкладанняў ёсць пэўны час для стварэння або распрацоўкі.
- Для некаторых задач Next.js неадэкватны. Распрацоўшчыкі павінны мець магчымасць будаваць дынамічныя маршруты з дапамогай інструментаў Node.js.
заключэнне
Як бачыце, Next.js спрашчае распрацоўку прыкладанняў React і дазваляе засяродзіцца на самым важным - логіцы вашага прыкладання і карыстальніцкім інтэрфейсе. Яна ўключае ў сябе ўсё неабходнае для стварэння сучасных, багатых інтэрфейсам і прыкладанняў на аснове API.
Ён таксама падыходзіць для праектаў толькі з кантэнтам, такіх як блогі і бізнес-сайты, дзякуючы сваёй здольнасці ствараць статычныя старонкі HTML.
З бягучымі выданнямі Next.js не толькі падтрымлівае высокі ўзровень вопыту распрацоўшчыкаў, але і дае інструменты для павышэння візуальнай прадукцыйнасці і карыстальніцкага досведу, забяспечваючы светлую будучыню гэтай структуры.
Пакінуць каментар