Файл: Применение технологии для разработки Next js веб приложения по.docx

Настройка среды разработки

В первую очередь скачиваю и устанавливаю IDE с официального сайта:https://code.visualstudio.com/.Далееоткрываювкладкусрасширениямииустанавливаютакиерасширения:

• 
  Auto Import – автоматически находит, анализирует и предоставляет кодовые действия и завершение кода для всех доступных импортов [7]. Это расширение понадобится для быстрого импорта (рисунок 5);
  

Рисунок 5 – Описание расширения Auto Import в редакторе Visual StudioCode

• 
  ESLint – Интегрирует ESLint JavaScript в VS Code [6]. Это расширение статически анализирует код, чтобы быстро найти проблемы (рисунок 6).
  

Рисунок6–ОписаниерасширенияESLintвредактореVisualStudioCode

2. Выбор языков разработки

Основнымиязыкамидляразработкивеб-приложенийзачастуюявляются:

• 
  HTML – стандартизированный язык разметки документов для просмотра веб-страниц в браузере [8];
  
• 
  CSS – это код, который вы используете для стилизации вашей веб- страницы [1];
  
• 
  JavaScript – это легковесный, интерпретируемый [19] или JIT- компилируемый, объектно-ориентированный язык с функциями первого класса [15].
  

ВнастоящеевремявсеэтиязыкизаменяютсяФреймворкамивкоторых используетсясинтаксисописанных выше языков.

1. Выбор фреймворка для разработки

React–этоJavaScript

---

библиотека для написания user-интерфейса созданная компанией Facebook в 2013 году (рисунок 7). Данная библиотека используется для обработки слоя представления в веб-приложениях. Является модифицируемым фреймворком, поверх которого можно использовать сторонние библиотеки [17].



Рисунок 7 – Библиотека React Особенности React:

• 
  компонентный подход – это подход при котором приложение можно разбивать на маленькие блоки, что упрощает разработку и будущую поддержку проекта [18];
  
• 
  виртуальный DOM – позволяет изменять только необходимые компоненты в страницы без обновления всей страницы, что позволяет приложению работать быстрее (рисунок 8);
  
• 
  постоянная поддержка разработчиками и обновления фреймворка.
  

Рисунок8–СхемаработыбиблиотекиReact вбраузере

2. 1   2   3   4   5   6   7   8   9

---

Определение jsx

JSX (JavaScript Syntax Extension) – расширение синтаксиса JavaScript.JSX представляет из себя синтаксис очень похожий на Html (рисунок 9). Присозданииэлемента спомощьюфункци[20].Рисунок 9 – Пример React элемента после обработки JSXАналогичныйэлементвJSX представленнарисунке10.Рисунок10–ПримерJSXкодаНе браузер, не движок JavaScript не знает что такое JSX. Это означает,что код на JSX необходимо транспилировать (перевести) в JavaScript. Примеркодапредставлен нарисунке11.Рисунок 11 – Пример JSX кода до компиляции в JavaScriptПревратитсявтакойкоднаJavaScriptпредставленныйнарисунке12:Рисунок12–Пример JavaScriptкодапослекомпиляцииизJSX

3. Определение Next.js технологии

Next.js – Next.js дает вам лучший опыт разработки со всеми функциями(рисунок13),которыевамнужныдляпроизводства:гибридныйстатическийисерверныйрендеринг,поддержкаTypeScript,интеллектуальнаясборка,предварительнаявыборкамаршрута имногоедругое[11].Рисунок13–ЛоготипфреймворкаNext.jsNext.js построен поверх React фреймворка и является библиотекой соткрытымисходнымкодом.Next.jsвсвоихпродуктахиспользуюттакиекомпаниикак: Binance,Twitch,Netflix,Nike,Uberи другие.Главнымифункциямиопределяющие

---

популярностьсредиразработчиковNext.jsявляются:

• 
  оптимизация изображений;
  
• 
  SSR (Server-Side Rendering);
  
• 
  встроенная поддержка CSS, Sass;
  
• 
  маршрутизация файловой системы.
  

3. Разработка веб-приложения с применением Next.js технологии

ЧтобыпользоватьсяинструментамиразработкиNext.jsнеобходимоиспользовать пакеты npm - менеджер пакетов, входящий в состав Node.js [3].Для использования пакетов npm нужно установить Node.js- представляетсреду выполнения кода на JavaScript, которая построена на основе движкаJavaScript Chrome V8, который позволяет транслировать вызовы на языкеJavaScript в машинный код [13]. Установка проводится через официальныйсайтплатформы-https://nodejs.org/en/(рисунок14).Рисунок14–КнопкаскачиваниярекомендованнойверсииNode.jsДальшеустанавливаетсяпустойпроектNext.jsкомандойкотораяпредставленана рисунке 15.Рисунок15–КомандаустановкиNext.jsпроектаСледуякомандойустановки,такимкак:выборпутипроекта,названиепроектаи т.д.создается проект Next.js(рисунок 16).Рисунок16–УстановкаNext.jsПроектзапускаетсяналокальноймашинекомандой(рисунок17)Рисунок 17 – Запуск Next.js проекта с указанием локального доменаПроектдоступенпоадресу:http://localhost:3000

---

(рисунок 18). На нем

присутствует одностраничный сайт, в котором находятся ссылка на:

• 
  документацию Next.js;
  
• 
  бесплатные интерактивные курсы для изучения Next.js;
  
• 
  примеры Next.js проектов;
  
• 
  сервис для деплоя.
  

Рисунок 18 – Кнопки в созданном Next.js проектеПапкиифайлы,которыедоступнысразупослеустановки:

• 
  .next - папка с системными файлами необходимая для работы Next.js (рисунок 19);
  

Рисунок19–содержимоепапки.next

• 
  node_modules - папка пакетов npm (рисунок 20);
  

Рисунок20–содержимоепапкиnode_modules

• 
  pages - в этой папке хранятся страницы проекта (рисунок 21);
  

Рисунок21–содержимоепапкиpages

• 
  public - папка с изображениями проекта (рисунок 22);
  

Рисунок22–содержимоепапкиpublic

• 
  .gitignore - файл в котором указывается какие папки либо файлы игнорировать git (рисунок 23);
  

Рисунок23–содержимоефайла.gitignore

• 
  package-lock.json (рисунок 24);
  

Рисунок24–содержимоефайлаpackage-lock.json

• 
  package.json (рисунок 25);
  

---