Перенесення 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-проекту та розрахунок вартості.

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