NestJS решает проблему серверной архитектуры. Добавьте к этому популярный выбор React для внешнего интерфейса, и вы обнаружите, что полнофункциональный JS сейчас находится в действительно хорошем месте. Можем ли мы объединить их в простую в использовании архитектуру MVC, чтобы обеспечить быстрое прототипирование?
TL; DR; Да! В репозитории nestjs-starter я комбинирую NestJS и Next.js, связанные с GraphQL, в Typescript (сквозная типизация, конечно!), В одном репозитории MVC (а не в монорепозитории нескольких проектов. ), с некоторыми дополнительными функциями, такими как аутентификация через Passport и Cognito.
В этой статье рассматривается интеграция NestJS + Next.js.
Почему одно репо MVC? Легкая инфраструктура! 1 репо, 1 развертывание, синхронизация не требуется. Тот же бэкэнд, который обслуживает API, может также обслуживать интерфейс. Конечно, код и конфигурация бэкэнда и внешнего интерфейса должны быть четко разделены в репозитории и при необходимости в будущем могут быть разделены на их собственные репозитории. Typescript и ESLint предоставляют отличную поддержку для этого.
Почему именно Next.js? Это ведущий фреймворк для React. Намного более простая настройка, чем с помощью приложения create-react-app. Опции для CSR, SSR и статических страниц. В частности, SSR отлично подходит для Nest API на том же хосте. (Существуют ресурсы для интеграции Nest с CRA и plain React.)
Frontend-first или backend-first? Вы можете выбрать размещение Nest через Next или Next через Nest (я знаю эти имена ...). Если у вас есть развертывание Nest, вы можете использовать его как настраиваемый сервер для Next. Обратите внимание, что Пользовательский сервер удалит важные оптимизации производительности, такие как бессерверные функции и автоматическая статическая оптимизация. С другой стороны, если у вас есть развертывание Next, вы можете использовать бессерверные функции и динамические маршруты API для запуска Nest. Это может ограничить масштабируемость, параметры хостинга и общую структуру приложения Nest. Итак, в этом примере я решил разместить приложение Nest и через него обслуживать Next. (Вот попытка наоборот.)
При этом осталась только реализация.
Быстрый поиск дает нам nest-next, но если вы оказались здесь, у вас, возможно, были проблемы, как у меня (1, 2), или вы обнаружили, что это не решает проблемы разделения бэкэнда и внешнего интерфейса: расположение папки принудительноpages наверху структуры или их настраиваемый tsconfigsetup. Вы обнаружите, что можете решить проблему разделения, указав любую папку, которую вы предпочитаете, а код для обслуживания приложения Next достаточно прост, и вам не нужно прятать его в сложной и самоуверенной библиотеке.
Другие попытки включают:
- 1, эта статья с отсутствующими примерами кода
- 2, это многообещающее решение, которое в конечном итоге перезаписывает
/graphqlroute - 3, это видео с связанным репо, объясняющее старую версию
nest-next - 4, это менее известное, но отличное решение и соответствующая библиотека, которая снова скрывает что-то довольно простое в самоуверенной библиотеке.
Мое решение, приведенное ниже, объединяет 2 и 4. Вместо библиотеки я использую явную 15-строчную службу, полностью контролируемую мной.
Репо: https://github.com/thisismydesign/nestjs-starter
Связанный PR: https://github.com/thisismydesign/nestjs-starter/pull/2/files
Шаг 1, установка
Шаг 2. Просмотр модуля
Как вы видите в сервисе просмотра, мы явно создаем сервер Next.js. Вы можете указать свою собственную конфигурацию и каталог. Я выбрал папки src/client и src/server. Ваши следующие страницы будут в src/client/pages.
Вы также заметите два конкретных маршрута в контроллере: @Get('home') для одной страницы и @Get('_next*') для ресурсов. Определение маршрута для приема всей почты домена в настоящее время перезаписывает /graphql конечную точку независимо от порядка импорта в вашем основном модуле. Если вы его используете, вам нужно будет явно определить страницы. Обработчик страниц будет таким же.
Вы также можете использовать охранников, например для управления аутентификацией из Nest.
Шаг 3, следующая страница 🎉
In src/client/pages/home.tsx
Вы также можете использовать SSR с getServerSideProps от Next для запроса вашего API.
Шаг 4, структура папки
Переместите код сервера в src/server и добавьте дополнительную конфигурацию, чтобы структура папок работала:
Шаг 5. Интеграционные тесты (необязательно)
Если вы запускаете интеграционные тесты в своем модуле приложения, импорт ViewModule туда приведет к сбою тестов. Я создал ServerModule верхнего уровня, чтобы объединить AppModule представление ViewModule в качестве модуля входа: https://github.com/thisismydesign/nestjs-starter/pull/2/commit/aff04b4a537afb6d3bb4f3a4d6af6e7d867e8a84
Наконец, у вас есть готовое к развертыванию приложение для быстрой совместной сборки серверной части и клиентской части. Вы найдете больше примеров для страниц, запроса данных из серверной части и других функций в репозитории: https://github.com/thisismydesign/nestjs-starter
