How to Migrate Existing Apps

🔄 How to Migrate Existing Apps to React 19 Server Components

React 19 introduces Server Components and Actions — powerful tools that can boost performance and simplify architecture. But if you already have a React or Next.js app built the old way (CSR or SSR with lots of client code), how do you migrate safely? In this guide, we’ll walk through the process step-by-step. ⚛️🛠️

📋 Prerequisites

• ✅ You’re using React 18 or 19 with support for async components
• ✅ Your app uses Next.js 13+ with the /app directory
• 🧩 You’re familiar with basic concepts like components, props, and API routes

🚧 Step 1: Upgrade to React 19 and Next.js 14+

// package.json
{
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "next": "^14.0.0"
  }
}

Run:

npm install react@latest react-dom@latest next@latest

✅ React 19 enables Server Components, Actions, and enhanced performance out-of-the-box.

🗂️ Step 2: Use the /app Directory

If you’re still using the old /pages directory, it’s time to switch to /app routing, which is required for Server Components:

// app/page.tsx or app/page.jsx
export default function HomePage() {
  return <h1>Welcome to React 19</h1>;
}

🧠 Step 3: Identify Candidate Components

You don’t need to convert everything. Focus on components that:

• 🔍 Fetch data (e.g., products, users, blogs)
• 📦 Don’t require interactivity (no onClick, useState, etc.)
• 🔒 Contain sensitive logic like API keys or DB calls

🛠️ Step 4: Convert to Server Components

// OLD (Client Component)
'use client';
import { useEffect, useState } from 'react';

function Products() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    fetch('/api/products').then(res => res.json()).then(setItems);
  }, []);

  return <div>{items.map(p => <p>{p.name}</p>)}</div>;
}

// NEW (Server Component)
export default async function Products() {
  const res = await fetch('https://api.example.com/products');
  const data = await res.json();

  return (
    <div>
      {data.map(p => <p key={p.id}>{p.name}</p>)}
    </div>
  );
}

📤 Step 5: Replace API Routes with Server Actions

// OLD (API + fetch)
export default function ContactForm() {
  const handleSubmit = async (e) => {
    e.preventDefault();
    await fetch('/api/contact', { method: 'POST', body: new FormData(e.target) });
  };
}

// NEW (Server Action)
'use server';
export async function handleContact(formData) {
  const name = formData.get('name');
  await db.message.create({ name });
}

// usage in client
<form action={handleContact}>
  <input name="name" />
  <button type="submit">Send</button>
</form>

🔁 Step 6: Separate Client-Only Components

If a component uses useState, useEffect, or DOM APIs, you must declare it as a Client Component:

// 'use client' directive
'use client';

export default function Modal() {
  const [open, setOpen] = useState(false);
  return <button onClick={() => setOpen(true)}>Open</button>;
}

📁 Step 7: Organize by Type

• .server.js/.jsx — Server-only components (no interactivity)
• .client.js/.jsx — Components that use hooks or events
• Optional: Create /components/server and /components/client folders

✅ Final Checklist

• 🔃 Upgraded to React 19 and Next.js 14+
• 📦 Moved to /app directory routing
• 🧠 Converted data-fetching components to Server Components
• 📤 Migrated mutations to Server Actions
• 🪄 Kept interactivity inside Client Components

🚀 Final Thoughts

Migrating to React 19's Server Components and Actions is more than a performance upgrade — it's a shift toward simpler, more maintainable full-stack development. Start small, migrate gradually, and enjoy the cleaner code and faster apps. 🎯