Вопрос или проблема
Я начинаю онлайн-бизнес и пытаюсь выяснить, какой фреймворк использовать для моего веб-приложения (продукта). На данный момент я создал портфолио на next.js и ищу способ “связать” его с приложением.
Вот некоторые функции, которые я посчитал важными:
-
Пользователь должен иметь возможность войти в свой аккаунт на сайте портфолио и оставаться в системе при переходе к приложению
-
Приложение должно быть напрямую связано с портфолио…похоже на что-то вроде spotify и его веб-плеера, где пользователь просто нажимает кнопку на портфолио, и это переносит его в приложение.
-
После развертывания приложение должно работать на том же домене, что и портфолио (но может работать с поддоменом, если это целесообразно…я не знаю много о веб-хостинге)
-
У приложения будет аналогичная функциональность, как у Google Drive: пользователи смогут создавать новые файлы и папки, а также просматривать и редактировать их.
-
Веб-приложение сейчас является единственным продуктом, но потенциально может быть и больше
Вот некоторые решения, которые я придумал:
-
Создать сайт портфолио и веб-приложение в одном проекте next.js…по сути, просто построить веб-приложение на основе портфолио, которое у меня уже есть. Это самое простое решение, но я вижу, что в будущем могу столкнуться с проблемами, если захочу создать несколько продуктов или запустить приложение с поддомена.
-
Создать другой проект next.js и поместить приложение туда. Это решит проблемы с доменом и масштабированием, и если я создаю другой проект для приложения, я бы предпочел продолжить использовать next.js. Но это усложнит аутентификацию.
-
Использовать express.js для создания приложения. У меня есть хороший опыт работы с express, и мне нравится их простая маршрутизация. Но я буду использовать два разных фреймворка, так что это может быть даже сложнее реализовать.
Какое решение, если таковое есть, мне следует использовать? Я открыт для новых идей. Я также буду признателен за любые советы по фактической связи портфолио с приложением. Спасибо.
Пока вы используете Next.js, вы, вероятно, слышали о JAM Stack. Next.js – это фреймворк для серверного рендеринга на основе React. Поэтому вы можете использовать его для фронтенда (например, целевая страница, панель управления). Для операций на бэкенде (CRUD) вы можете использовать express, koa, fastly и т.д. В случае веб-приложения, в зависимости от архитектуры вашего приложения, вы можете использовать другие технологии, такие как Python или Go, для создания микросервисов, оставляя весь фронтенд на next.js.
Ответ или решение
Когда вы разрабатываете веб-приложение, связанное с вашим портфолио на Next.js, вам нужно учесть несколько факторов, включая функциональные требования, удобство интеграции и масштабируемость. Давайте рассмотрим предложенные варианты и выбор подходящего фреймворка для вашего приложения.
1. Объединенный проект Next.js
Первый предложенный вариант – это объединение портфолио и веб-приложения в одном проекте Next.js. Это упрощает разработку и позволяет избежать сложностей с аутентификацией, поскольку оба компонента используют одну и ту же систему. Однако при масштабировании, когда вы захотите добавить новые продукты или разместить приложение на поддомене, данный подход может стать затруднительным.
2. Отдельный проект Next.js
Создание отдельного проекта Next.js для приложения удобно с точки зрения масштабируемости. Этот подход позволяет изолировать веб-приложение, что проще для дальнейшей разработки и внедрения новых функций. Однако, вы столкнетесь с определенными сложностями при организации аутентификации между двумя разными проектами. Вам нужно будет реализовать общий механизм для авторизации пользователей, скорее всего, с помощью API.
3. Использование Express.js
Использование Express.js – еще один вариант, который вы рассматривали. Это может быть предпочтительным, если у вас есть опыт работы с Express и вам удобен его подход к маршрутизации. Однако этот выбор также подразумевает, что вам придется поддерживать два разных фреймворка и решать вопросы интеграции между ними.
Рекомендация
Исходя из ваших требований и описанных проблем, я рекомендую вам использовать подход, который сочетает в себе преимущества роста и управляемой аутентификации. Вот как это можно сделать:
-
Используйте Next.js для обоих проекторов. Это позволит вам сохранять однородность технологий и использовать похожий код. Создайте отдельный проект для веб-приложения, чтобы избежать сложностей с масштабируемостью, но обеспечьте единую аутентификацию через API.
-
Аутентификация. Реализуйте JWT (JSON Web Token) или другой метод для аутентификации пользователей. Когда пользователь входит в портфолио, создайте и сохраните токен. Этот токен можно использовать как в портфолио, так и в приложении для подтверждения пользователя.
-
Интеграция с API. Свяжите ваш портфель и приложение через API. Когда пользователь нажимает кнопку в портфолио, он будет перенаправлен в веб-приложение, передавая при этом токен для аутентификации API.
-
Хостинг. Поскольку ваше приложение и портфолио базируются на Next.js, вы можете использовать такие платформы, как Vercel или Netlify, которые поддерживают бесшовный хостинг для приложений Next.js. Вы можете указать корневой домен и настроить маршрутизацию для поддоменов, если это потребуется.
Заключение
Выбор фреймворка и архитектуры значительно зависит от ваших конкретных требований и будущих планов. Учитывая, что вы хотите, чтобы приложение развивалось и имело возможность интеграции с другими продуктами в будущем, использование отдельных проектов Next.js с единым подходом к аутентификации будет оптимальным решением. Это позволит сохранить гибкость, масштабируемость и единообразие в вашем стеке технологий.
Если у вас возникнут дополнительные вопросы или вам нужны подробности по конкретным аспектам реализации, не стесняйтесь обращаться за помощью. Удачи в вашем начинании!