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

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

• 
  README.md - файл с комментариями разработчиков Next.js (рисунок
  

26).Рисунок26–содержимоефайлаREADME.mdВ первую очередь необходимо организовать архитектуру приложения.Создать папку для компонентов и стилей. Создать файлы в которых будетписатьсякод.

1. 1   2   3   4   5   6   7   8   9

---

Components

Поскольку Next.js это всего лишь Фреймворк над React то синтаксис иконцепциианалогичны.Восновесозданияинтерфейсалежатфункциональныепереиспользуемыеэлементы,которыеназываютсякомпонентами.ИменноизэтихблоковистроитсяUI.КомпонентывструктуреNext.js приложения - должны храниться отдельно от страниц. Для началанужно создать папку components в которой будут храниться все создаваемыекомпоненты.ОсновнымисамымважнымкомпонентомвпроектеявляетсяMainLayout.js.Набольшинствесайтовиспользуютсятакиеэлементыинтерфейсакак:header,footerиподобные.Безиспользованиякомпонентного подхода будет необходимость писать код несколько раз,прописывая header и footer для каждой страницы отдельно. Это не толькозамедлит разработку, но и плохо скажется на оптимизации самого проекта.Componentsрешаеттакуюпроблему(рисунок 27).Рисунок27–ПримерприменениякомпонентоввпроектеВданномфайлепрописываетсяосновнаялогикаприложения:

• 
  нахождение на странице header в теге (заголовок страницы). Эти атрибуты не являются обязательными: они не видны пользователю, но сообщают определенную информацию поисковой системе (описание, заголовок, ключевые слова и т.д.) [4].
  
  Одна из проблем которую решает SSR, это добавление мета–тегов на конкретную страницу. Для этого есть предустановленный компонент .
  
  Для начала нужно заимпортить данный компонент (рисунок 36).
  
  
  
  Рисунок 36 – Импорт компонента Head
  
  После добавить компонент и прописать в нем (рисунок 37):
  
  • 
    ключевые слова;
    
  • 
    название страницы;
    
  • 
    описание страницы;
    
  • 
    charSet.
    
  
  
  
  
  Рисунок 37 – Применение компонента Head
  

---

5. Публикация сайта в сети-интернет

Длятогочтобысайтможнобылонайтивпоисковикелибопростооткрытьвбраузереегонужнозагрузитьнасервер.Длятогочтобылюдимоглиудобно изучать ваш код без необходимости скачивание проекта, подойдетGitHub.

1. 1   2   3   4   5   6   7   8   9

---

Создание репозитория на GitHub

В первую очередь нужно зарегистрироваться на GitHub для появлениявозможности создания личного репозитория. После создается репозиторий(рисунок38).Рисунок38–СозданиерепозиториянаGitHubИдобавляютсяфайлыпроекта(рисунок39).Рисунок39–Файлыипапкирепозиторияпроекта

2. Деплой проекта.

Разработчики Next.js компания Vercel предоставляют свои сервера дляпубликации в сети интернет. И предоставляют свои SSL сертификаты, правдабез возможности задавать свой домен. Но для тестирования продуктов болеечемподходит,засчет скоростисамогодеплоя (рисунок 40).Рисунок 40 – Экран готовности деплояВыводпоразделу2Врезультатеданнойглавы,былоразработановеб-приложениеиопубликовано всети интернет.

3. Описание разработанного Web-приложения

1. Описание интерфейса пользователя

Навигацияосновныхстраницприложениянаходитсявтакназываемой“шапке”(рисунок41).Рисунок41–Шапкавеб-приложенияПоссылкамвверхуприложенияможноперейтинастраницы:

• 
  главная;
  
• 
  реализованные задачи;
  
• 
  задачи в разработке;
  
• 
  контакты.
  

Наглавнойстраницепользовательзнакомитсяснаправлениемдипломныхработ

---

(рисунок42),руководителемнаправления,атакжесболееподробнымописаниемостальныхстраницвприложении(рисунок43).Рисунок42–Дизайнглавнойстраницывеб-приложенияРисунок 43 – Дизайн главной страницы веб-приложения с ссылками настраницыПри переходе на несуществующую страницу приложения пользовательувидитсообщениеобошибке(рисунок 44).Рисунок44–Сообщениеоб ошибкеЦвет в каждой карточке (рисунок 45) и странице проекта разный иподобран индивидуально, это позволяет выделять работы на фоне друг друга(рисунок46).Рисунок45–ДизайнкарточкиработыстудентаРисунок46–Блокисо схемамиработыстудента

2. 1   2   3   4   5   6   7   8   9

---