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

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

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

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

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

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

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

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.js

Next.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);
  

---