Около года назад я наткнулся на YouTube-видео под названием Next.js за 100 секунд не кого иного, как Джеффа Делани, более известного как Fireship. С тех пор я использую NextJS для прототипирования каждой идеи побочного проекта, которая приходит мне на ум, и я уверен, что начал и бросил по крайней мере дюжину проектов NextJ.

Однако один проект, от которого я не отказался, — это платформа для управления студентами и обучения. Я построил его для языковой школы, принадлежащей родственнику. С помощью стажера на это ушло три месяца. Готовый продукт размещается на Vercel и имеет серверную часть на базе Firebase.

Вот что я узнал из этого опыта:

Макеты NextJS отстой

Пользовательские макеты не поддерживаются по умолчанию в NextJS 12 и более ранних версиях, что является проблемой. Созданное нами приложение имеет три стиля страниц: общедоступные страницы, такие как домашняя страница и страница о нас; страницы аутентификации для входа и сброса паролей; и страницы в стиле приборной панели, которые содержат ядро ​​приложения.

Официальная документация NextJS рекомендует использовать постраничную компоновку на основе предложенного ими шаблона. Когда я впервые прочитал это в начале проекта, я нашел это слишком сложным и решил использовать более простой подход проверки текущего маршрута и обертывания компонента родительского приложения соответствующим макетом.

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

Примечание: NextJS 13 — это крупное обновление фреймворка, устраняющее эту проблему. В настоящее время он находится в стадии бета-тестирования, но не рекомендуется для рабочих приложений.

Формы лучше в React

Этот проект был моим первым опытом работы со сложными формами в React. Проведя небольшое исследование, я нашел мощную библиотеку под названием React Hook Form. Сила React как расширяемой библиотеки действительно проявляется в сочетании с мощными сторонними библиотеками, такими как эта. С помощью простого хука, нескольких объявлений функций и пользовательских тегов я легко смог создать мощную реактивную форму с проверкой полей.

Не вдаваясь в подробности о том, как работает эта библиотека, я настоятельно рекомендую ее всем, кто создает формы с помощью NextJS или любого другого фреймворка на основе React. Кроме того, документация довольно понятна, с примерами многих вариантов использования.

Бэкенды переоценены

Мы смогли создать продукт такого масштаба за три месяца в первую очередь потому, что решили использовать Firebase вместо того, чтобы создавать собственный сервер. Для тех, кто не знаком, Firebase — это бесплатный бэкэнд-как-сервис, принадлежащий Google, который предоставляет все необходимое для создания полнофункционального приложения.

Мы использовали следующие сервисы для нашего варианта использования:

Аутентификация Firebase: для управления созданием и проверкой учетных записей учащихся, а также для безопасного хранения и сброса паролей.

Облачные функции: для обработки заданий cron без сервера, связанных с бизнес-логикой приложений.

База данных Firestore (без SQL): для хранения и управления всеми данными, связанными со студентами и бизнес-логикой платформы.

Подводя итог, я потратил три месяца в этом году на создание полного стека веб-приложения с использованием NextJS и Firebase, и три вещи, которые больше всего выделялись для меня, это то, как макеты являются проблемой в NextJS, React Hook Form — надежная альтернатива Angular реактивные формы, а Firebase затрудняет создание серверной части с нуля.

Первоначально опубликовано на https://blog.mbcubeconsulting.ca 16 ноября 2022 г.