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

Рисунок 26 – содержимое файла README.md

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

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

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

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

1 2 3 4 5 6 7 8 9

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

В первую очередь нужно зарегистрироваться на GitHub для появления возможности создания личного репозитория. После создается репозиторий (рисунок 38).

Рисунок 38 – Создание репозитория на GitHub

И добавляются файлы проекта (рисунок 39).

Рисунок 39 – Файлы и папки репозитория проекта

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

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

Рисунок 40 – Экран готовности деплоя Вывод по разделу 2

В результате данной главы, было разработано веб-приложение и опубликовано в сети интернет.

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

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

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

Рисунок 41 – Шапка веб-приложения

По ссылкам вверху приложения можно перейти на страницы:

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

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

(рисунок 42), руководителем направления, а также с более подробным описанием остальных страниц в приложении (рисунок 43).

Рисунок 42 – Дизайн главной страницы веб-приложения

Рисунок 43 – Дизайн главной страницы веб-приложения с ссылками на страницы
При переходе на несуществующую страницу приложения пользователь увидит сообщение об ошибке (рисунок 44).

Рисунок 44 – Сообщение об ошибке

Цвет в каждой карточке (рисунок 45) и странице проекта разный и подобран индивидуально, это позволяет выделять работы на фоне друг друга (рисунок 46).