Next.js разработан для постепенного внедрения. С Next.js вы можете продолжать использовать существующий код и добавлять столько React, сколько вам нужно. Начиная с малого и постепенно добавляя новые страницы, вы можете избежать полного переписывания кода и не срывать работу над функциями.
Многие компании нуждаются в модернизации своего технологического стека для снижения затрат, повышения производительности разработчиков и обеспечения лучшего опыта для клиентов. Компонентно-ориентированная разработка значительно улучшила скорость развертывания и повторное использование кода в современных проектах.
С более чем 8 миллионами загрузок в месяц, React является ведущим выбором для компонентно-ориентированной разработки. Next.js, фреймворк React для продакшена, позволяет постепенно внедрять React.
Мотивация
В мире, где мобильные устройства играют все большую роль, улучшение и отслеживание Core Web Vitals критически важно для успеха. Ваши клиенты, вероятно, распределены по всему миру с разной скоростью интернета. Каждая дополнительная секунда (или миллисекунда) ожидания загрузки страницы или выполнения действия может стать разницей между продажей, показом или конверсией.
Если вы модернизируете свой технологический стек, вы можете столкнуться с такими проблемами, как:
- Ваше приложение содержит годы устаревшего кода, который сложно понять, и полное переписывание заняло бы годы (и миллионы долларов).
- Время загрузки страниц продолжает расти по мере увеличения размера и сложности приложения. Простые маркетинговые страницы загружаются так же медленно, как и самые сложные.
- Вы пытаетесь масштабировать команду разработчиков, но сталкиваетесь с проблемами при добавлении новых разработчиков в существующую кодовую базу.
- У вас устаревшие процессы CI/CD и DevOps, которые снижают производительность разработчиков и затрудняют безопасное и надежное внедрение изменений.
- Ваше приложение не адаптировано для мобильных устройств, и невозможно обновить глобальные стили страницы, не нарушив другие части приложения.
Вы знаете, что нужно что-то делать, но может быть сложно понять, с чего начать. Постепенно внедряя Next.js, вы можете начать решать вышеперечисленные проблемы и преобразовать свое приложение. Давайте обсудим несколько стратегий внедрения Next.js в существующий технологический стек.
Стратегии
Подпуть (Subpath)
Первая стратегия заключается в настройке вашего сервера или прокси таким образом, чтобы все содержимое определенного подпути указывало на приложение Next.js. Например, ваш существующий веб-сайт может находиться на example.com, а вы можете настроить прокси так, чтобы example.com/store обслуживал интернет-магазин на Next.js.
Используя basePath, вы можете настроить ресурсы и ссылки вашего приложения Next.js для автоматической работы с новым подпутем /store. Поскольку каждая страница в Next.js является автономным маршрутом, страницы, такие как pages/products.js, будут маршрутизироваться на example.com/store/products в вашем приложении.
module.exports = {
basePath: '/store',
};Чтобы узнать больше о basePath, ознакомьтесь с нашей документацией.
(Примечание: Эта функция была добавлена в Next.js 9.5 и выше. Если вы используете более старые версии Next.js, обновите их перед использованием.)
Перезаписи (Rewrites)
Вторая стратегия заключается в создании нового приложения Next.js, которое указывает на корневой URL вашего домена. Затем вы можете использовать rewrites в next.config.js, чтобы некоторые подпути перенаправлялись на ваше существующее приложение.
Например, предположим, что вы создали приложение Next.js для обслуживания с example.com со следующим next.config.js. Теперь запросы к страницам, которые вы добавили в это приложение Next.js (например, /about, если вы добавили pages/about.js), будут обрабатываться Next.js, а запросы к любым другим маршрутам (например, /dashboard) будут перенаправляться на proxy.example.com.
module.exports = {
async rewrites() {
return [
// нам нужно определить перезапись без изменений, чтобы проверить
// все страницы/статические файлы перед попыткой перенаправления
{
source: '/:path*',
destination: '/:path*',
},
{
source: '/:path*',
destination: `https://proxy.example.com/:path*`,
},
];
},
};Чтобы узнать больше о перезаписях, ознакомьтесь с нашей документацией.
Микрофронтенды с монорепозиториями и поддоменами
Next.js и Vercel упрощают внедрение микрофронтендов и развертывание в виде монорепозитория. Это позволяет использовать поддомены для постепенного внедрения новых приложений. Некоторые преимущества микрофронтендов:
- Меньшие, более связные и поддерживаемые кодовые базы.
- Более масштабируемые организации с развязанными, автономными командами.
- Возможность обновлять, изменять или даже переписывать части фронтенда более постепенно.
Архитектура монорепозитория, развернутого на Vercel.
После настройки монорепозитория отправляйте изменения в ваш Git-репозиторий как обычно, и вы увидите, что коммиты развертываются в проектах Vercel, которые вы подключили. Попрощайтесь с устаревшими процессами CI/CD.
Пример URL-адресов развертывания, предоставляемых интеграцией с Git.
Заключение
Next.js разработан для постепенного внедрения в ваш существующий технологический стек. Платформа Vercel делает этот процесс совместным, предоставляя предпросмотры развертывания для каждого изменения кода благодаря бесшовной интеграции с GitHub, GitLab и Bitbucket.
- Мгновенно просматривайте изменения локально с помощью Fast Refresh, повышая производительность разработчиков.
- Отправляйте изменения для создания Branch Preview, оптимизированного для совместной работы с заинтересованными сторонами.
- Развертывайте в продакшене с Vercel, просто объединяя PR. Никаких сложных DevOps.
Чтобы узнать больше, прочитайте о подпутях и перезаписях или разверните пример с микрофронтендами.