Перенесення PHP-проекту на React/Next.js: стратегії та кейси

Коли PHP-моноліт гальмує: міграція на React/Next.js

Ваш сайт на Laravel почав гальмувати: INP під 300 мс, а на додавання нової сторінки йде тиждень. Ми стикалися з такими проектами десятки разів. Міграція на React/Next.js — не зміна фреймворку, а перегляд архітектури. Next.js з React Server Components (RSC) генерує сторінки в 2-3 рази швидше, ніж чистий PHP-рендеринг, і знижує TTFB вдвічі. Міграція окупається за 6-12 місяців за рахунок зниження витрат на хостинг та розробку. Нижче — реальні стратегії, які ми застосовували на 50+ проектах. Ми гарантуємо збереження SEO-позицій при переїзді. Отримайте консультацію — оцінимо ваш проект за 1 день.

Які проблеми вирішує міграція?

Продуктивність. PHP генерує HTML на сервері кожен запит, що дає високий TTFB. Next.js з RSC віддає статику, а динаміку — потоком. CLS зникає завдяки серверному рендерингу.

Складність підтримки. Шаблони Blade змішують логіку та представлення. React з TypeScript та строгою типізацією знижує кількість багів на 30% за нашими вимірами.

SEO-проблеми. Клієнтські SPA погано індексуються. Next.js вирішує це SSR та ISR. Наприклад, в інтернет-магазину з 5000 товарів ми підняли трафік на 20% після міграції.

Як вибрати стратегію міграції?

Є три підходи, і вибір залежить від розміру проекту та допустимого даунтайму.

Strangler Fig — наш фаворит. Налаштовуємо Nginx так, щоб нові маршрути йшли на Next.js, старі — на PHP. Це виключає простої.

server { server_name mysite.com; # Нові маршрути → Next.js location /blog/ { proxy_pass http://nextjs:3000; } location /about { proxy_pass http://nextjs:3000; } # Старі маршрути → Laravel location / { proxy_pass http://laravel:8000; } } 

Як підготувати проект до міграції

1. Проведіть аудит коду: виявіть точки інтеграції, performance-пляшки, N+1 запити.
2. Визначте стратегію: Strangler Fig для великих проектів, Big Bang — для маленьких.
3. Налаштуйте інфраструктуру: Docker, CI/CD, розділіть оточення.
4. Реалізуйте поетапно: кожен маршрут тестуйте окремо.
5. Виконайте A/B-тестування та деплой.

Перенесення бізнес-логіки: Laravel → Zod + Prisma

Одна з частих помилок — копіювати валідацію «як є». В Laravel вона будується через $request->validate, в React — через Zod. Ми переписуємо з урахуванням типів TypeScript.

// До (Laravel) // $request->validate([ // 'email' => 'required|email|unique:users', // 'name' => 'required|min:2|max:255', // ]); // Після (Zod + React Hook Form) const schema = z.object({ email: z.string().email('Некорректний email'), name: z.string().min(2).max(255), }); 

Запити до БД теж змінюються. Eloquent-запит з N+1 замінюємо на Prisma з включеннями.

// До (Eloquent в Laravel) // User::where('active', true)->with('posts')->paginate(10); // Після (Prisma в Next.js API Route) const users = await prisma.user.findMany({ where: { active: true }, include: { posts: true }, take: 10, skip: (page - 1) * 10, }); 

Шаблони: Blade → React-компоненти

Шаблон Blade з циклом перетворюється на компонент ProductCard. Це покращує підтримуваність.

const ProductCard = ({ product }: { product: Product }) => ( <div className="product-card"> <img src={product.imageUrl} alt={product.name} /> <h3>{product.name}</h3> <span>{product.price.toLocaleString('ru-RU')} руб.</span> <Link href={`/products/${product.slug}`}>Детальніше</Link> </div> ); 

Аутентифікація: PHP sessions → NextAuth

PHP-сесії через Cookie замінюємо на JWT-токени NextAuth. Для Laravel API використовуємо Sanctum.

// Next.js: аутентифікація через Laravel Sanctum import NextAuth from 'next-auth'; import Credentials from 'next-auth/providers/credentials'; export const { auth, handlers } = NextAuth({ providers: [ Credentials({ async authorize(credentials) { const res = await fetch(`${process.env.LARAVEL_URL}/api/auth/login`, { method: 'POST', body: JSON.stringify(credentials), headers: { 'Content-Type': 'application/json' }, }); if (!res.ok) return null; return res.json(); }, }), ], }); 

Що входить в роботу

Ми передаємо повний комплект:

• Документація архітектури та API
• Доступи до репозиторію, CI/CD, хостингу
• Навчання команди роботі з Next.js
• Підтримка 1 місяць після деплою
• Гарантія збереження SEO (100% редиректів, жодних 404)

Терміни та вартість

Вартість розраховується індивідуально після аудиту. Орієнтовні терміни:

Приклад з практики

Інтернет-магазин на CodeIgniter (2000 товарів) мігрували за патерном Strangler Fig. Спочатку переписали каталог, потім кошик, потім особистий кабінет. Підсумок: LCP знизився з 4,2 с до 1,1 с, трафік виріс на 25%. Весь процес зайняв 4 місяці.

Чому варто довірити міграцію нам?

Більше 8 років досвіду в міграціях на React/Next.js. Сертифіковані інженери (React, Next.js, AWS). 50+ успішних проектів. Ми гарантуємо, що ваш сайт не втратить позиції в пошуку. Звертайтеся, щоб отримати детальний аудит вашого PHP-проекту та розрахунок вартості.

Замовте консультацію — проаналізуємо ваш проект та запропонуємо оптимальний план міграції.