|
| 1 | +--- |
| 2 | +source-updated-at: 2025-05-29T18:05:49.000Z |
| 3 | +translation-updated-at: 2025-06-02T19:40:01.403Z |
| 4 | +title: Постепенное внедрение Next.js |
| 5 | +description: >- |
| 6 | + Изучите различные стратегии постепенного внедрения Next.js в ваш рабочий процесс разработки. |
| 7 | +author: |
| 8 | + - name: Lee Robinson |
| 9 | + image: /static/team/lee.jpg |
| 10 | +date: 2020-11-18T14:00:00.507Z |
| 11 | +image: >- |
| 12 | + https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/incremental-adoption/twitter-card.png |
| 13 | +--- |
| 14 | + |
| 15 | +[Next.js](https://nextjs.org/) разработан для постепенного внедрения. С Next.js вы можете продолжать использовать существующий код и добавлять столько React, сколько вам нужно. Начиная с малого и постепенно добавляя новые страницы, вы можете избежать полного переписывания кода и не срывать работу над функциями. |
| 16 | + |
| 17 | +Многие компании нуждаются в модернизации своего технологического стека для снижения затрат, повышения производительности разработчиков и обеспечения лучшего опыта для клиентов. Компонентно-ориентированная разработка значительно улучшила скорость развертывания и повторное использование кода в современных проектах. |
| 18 | + |
| 19 | +С более чем [8 миллионами загрузок в месяц](https://www.npmtrends.com/react), React является ведущим выбором для компонентно-ориентированной разработки. Next.js, фреймворк React для продакшена, позволяет постепенно внедрять React. |
| 20 | + |
| 21 | +[Мотивация](#motivation) |
| 22 | +------------------------- |
| 23 | + |
| 24 | +В мире, где мобильные устройства играют все большую роль, улучшение и отслеживание [Core Web Vitals](/analytics) критически важно для успеха. Ваши клиенты, вероятно, распределены по всему миру с разной скоростью интернета. Каждая дополнительная секунда (или миллисекунда) ожидания загрузки страницы или выполнения действия может стать разницей между продажей, показом или конверсией. |
| 25 | + |
| 26 | +Если вы модернизируете свой технологический стек, вы можете столкнуться с такими проблемами, как: |
| 27 | + |
| 28 | +* Ваше приложение содержит годы устаревшего кода, который сложно понять, и полное переписывание заняло бы годы (и миллионы долларов). |
| 29 | +* Время загрузки страниц продолжает расти по мере увеличения размера и сложности приложения. Простые маркетинговые страницы загружаются так же медленно, как и самые сложные. |
| 30 | +* Вы пытаетесь масштабировать команду разработчиков, но сталкиваетесь с проблемами при добавлении новых разработчиков в существующую кодовую базу. |
| 31 | +* У вас устаревшие процессы CI/CD и DevOps, которые снижают производительность разработчиков и затрудняют безопасное и надежное внедрение изменений. |
| 32 | +* Ваше приложение не адаптировано для мобильных устройств, и невозможно обновить глобальные стили страницы, не нарушив другие части приложения. |
| 33 | + |
| 34 | +Вы знаете, что нужно что-то делать, но может быть сложно понять, [с чего начать](https://www.psychologytoday.com/us/blog/mindfully-present-fully-alive/201804/the-only-way-eat-elephant). Постепенно внедряя Next.js, вы можете начать решать вышеперечисленные проблемы и преобразовать свое приложение. Давайте обсудим несколько стратегий внедрения Next.js в существующий технологический стек. |
| 35 | + |
| 36 | +[Стратегии](#strategies) |
| 37 | +------------------------- |
| 38 | + |
| 39 | +### [Подпуть (Subpath)](#subpath) |
| 40 | + |
| 41 | +Первая стратегия заключается в настройке вашего сервера или прокси таким образом, чтобы все содержимое определенного подпути указывало на приложение Next.js. Например, ваш существующий веб-сайт может находиться на `example.com`, а вы можете настроить прокси так, чтобы `example.com/store` обслуживал интернет-магазин на Next.js. |
| 42 | + |
| 43 | +Используя [`basePath`](/docs/pages/api-reference/next-config-js/basePath), вы можете настроить ресурсы и ссылки вашего приложения Next.js для автоматической работы с новым подпутем `/store`. Поскольку каждая страница в Next.js является [автономным маршрутом](/docs/pages/building-your-application/routing), страницы, такие как `pages/products.js`, будут маршрутизироваться на `example.com/store/products` в вашем приложении. |
| 44 | + |
| 45 | +```js filename="next.config.js" |
| 46 | +module.exports = { |
| 47 | + basePath: '/store', |
| 48 | +}; |
| 49 | +``` |
| 50 | + |
| 51 | +Чтобы узнать больше о `basePath`, ознакомьтесь с нашей [документацией](/docs/pages/api-reference/next-config-js/basePath). |
| 52 | + |
| 53 | +(**Примечание:** Эта функция была добавлена в Next.js 9.5 и выше. Если вы используете более старые версии Next.js, обновите их перед использованием.) |
| 54 | + |
| 55 | +### [Перезаписи (Rewrites)](#rewrites) |
| 56 | + |
| 57 | +Вторая стратегия заключается в создании нового приложения Next.js, которое указывает на корневой URL вашего домена. Затем вы можете использовать [`rewrites`](/docs/pages/api-reference/next-config-js/rewrites) в `next.config.js`, чтобы некоторые подпути перенаправлялись на ваше существующее приложение. |
| 58 | + |
| 59 | +Например, предположим, что вы создали приложение Next.js для обслуживания с `example.com` со следующим `next.config.js`. Теперь запросы к страницам, которые вы добавили в это приложение Next.js (например, `/about`, если вы добавили `pages/about.js`), будут обрабатываться Next.js, а запросы к любым другим маршрутам (например, `/dashboard`) будут перенаправляться на `proxy.example.com`. |
| 60 | + |
| 61 | +```js filename="next.config.js" |
| 62 | +module.exports = { |
| 63 | + async rewrites() { |
| 64 | + return [ |
| 65 | + // нам нужно определить перезапись без изменений, чтобы проверить |
| 66 | + // все страницы/статические файлы перед попыткой перенаправления |
| 67 | + { |
| 68 | + source: '/:path*', |
| 69 | + destination: '/:path*', |
| 70 | + }, |
| 71 | + { |
| 72 | + source: '/:path*', |
| 73 | + destination: `https://proxy.example.com/:path*`, |
| 74 | + }, |
| 75 | + ]; |
| 76 | + }, |
| 77 | +}; |
| 78 | +``` |
| 79 | + |
| 80 | +Чтобы узнать больше о перезаписях, ознакомьтесь с нашей [документацией](/docs/pages/api-reference/next-config-js/rewrites). |
| 81 | + |
| 82 | +### [Микрофронтенды с монорепозиториями и поддоменами](#micro-frontends-with-monorepos-and-subdomains) |
| 83 | + |
| 84 | +Next.js и [Vercel](https://vercel.com) упрощают внедрение [микрофронтендов](https://martinfowler.com/articles/micro-frontends.html) и развертывание в виде [монорепозитория](https://vercel.com/blog/monorepos). Это позволяет использовать [поддомены](https://ru.wikipedia.org/wiki/Поддомен) для постепенного внедрения новых приложений. Некоторые преимущества микрофронтендов: |
| 85 | + |
| 86 | +* Меньшие, более связные и поддерживаемые кодовые базы. |
| 87 | +* Более масштабируемые организации с развязанными, автономными командами. |
| 88 | +* Возможность обновлять, изменять или даже переписывать части фронтенда более постепенно. |
| 89 | + |
| 90 | + |
| 91 | + |
| 92 | +> Архитектура монорепозитория, развернутого на Vercel. |
| 93 | +
|
| 94 | +После настройки монорепозитория отправляйте изменения в ваш Git-репозиторий как обычно, и вы увидите, что коммиты развертываются в проектах Vercel, которые вы подключили. Попрощайтесь с устаревшими процессами CI/CD. |
| 95 | + |
| 96 | + |
| 97 | + |
| 98 | +> Пример URL-адресов развертывания, предоставляемых интеграцией с Git. |
| 99 | +
|
| 100 | +[Заключение](#conclusion) |
| 101 | +------------------------- |
| 102 | + |
| 103 | +Next.js разработан для постепенного внедрения в ваш существующий технологический стек. Платформа Vercel делает этот процесс совместным, предоставляя предпросмотры развертывания для каждого изменения кода благодаря бесшовной интеграции с GitHub, GitLab и Bitbucket. |
| 104 | + |
| 105 | +* Мгновенно просматривайте изменения локально с помощью [Fast Refresh](/docs/architecture/fast-refresh), повышая производительность разработчиков. |
| 106 | +* Отправляйте изменения для создания [Branch Preview](https://vercel.com/github), оптимизированного для совместной работы с заинтересованными сторонами. |
| 107 | +* Развертывайте в продакшене с [Vercel](https://vercel.com), просто объединяя PR. Никаких сложных DevOps. |
| 108 | + |
| 109 | +Чтобы узнать больше, прочитайте о [подпутях](/docs/pages/api-reference/next-config-js/basePath) и [перезаписях](/docs/pages/api-reference/next-config-js/rewrites) или [разверните пример с микрофронтендами](https://vercel.com/import/project?template=https://github.com/vercel/next.js/tree/canary/examples/with-zones). |
0 commit comments