JavaScript  

How do I migrate a React project to Next.js App Router architecture?

🚀 Introduction

React is great for building user interfaces, but as your project grows, you may face challenges like complex routing, SEO issues, and performance problems. Next.js solves these issues by adding server-side rendering, built-in routing, and optimization tools. The new App Router in Next.js 13+ makes things even easier with layouts, streaming, and improved developer experience. Migrating your project helps you take advantage of all these benefits.

📦 Step 1: Setup Next.js Project

First, you need to create a fresh Next.js project that uses the App Router.

Command:

npx create-next-app@latest my-next-app --experimental-app

👉 This creates a new Next.js project with the app/ directory instead of the older pages/ system.

🗂️ Step 2: Understand the App Directory

In React, you usually organize routes manually. In Next.js App Router:

  • Each folder inside app/ is a route.
  • page.js (or page.tsx) shows the page content.
  • layout.js is for shared layouts (like headers and sidebars).
  • loading.js is for loading states.
  • error.js is for handling errors.

Example:

app/
  layout.js
  page.js
  dashboard/
    page.js
    settings/
      page.js

👉 Here, /dashboard/settings becomes a route automatically.

🔄 Step 3: Move Your Components

Take the components from your React project and place them in a components/ folder inside your Next.js project. These can be reused in any Next.js page.

Example:

// components/Button.js
export default function Button({ label }) {
  return <button>{label}</button>;
}

👉 You can import this button into any Next.js page.

📍 Step 4: Handle Routing

In React, you might have used React Router. In Next.js, routing is automatic.

React Router Example:

<Route path="/about" element={<About />} />

Next.js App Router Example:

// app/about/page.js
export default function About() {
  return <h1>About Page</h1>;
}

👉 No need to define routes manually, just add a folder and page.js file.

⚡ Step 5: Add Server Components (Optional)

Next.js allows you to use Server Components, which fetch data directly on the server without needing useEffect.

Example:

// app/users/page.js
export default async function Users() {
  const res = await fetch('https://jsonplaceholder.typicode.com/users');
  const users = await res.json();

  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map(user => <li key={user.id}>{user.name}</li>)}
      </ul>
    </div>
  );
}

👉 This runs on the server, making it faster and more secure.

🔧 Step 6: Environment Variables

In React, environment variables are placed in .env. Next.js also uses .env, but variables must start with NEXT_PUBLIC_ if they are used in client-side code.

Example:

NEXT_PUBLIC_API_URL=https://api.example.com

🧭 Step 7: Migrate Assets and Styles

  • Put images inside the public/ folder.
  • CSS can still be used, or you can use Next.js features like CSS modules, Tailwind CSS, or styled-components.

Example:

/* button.module.css */
.button {
  background-color: blue;
  color: white;
}

import styles from './button.module.css';

export default function Button() {
  return <button className={styles.button}>Click Me</button>;
}

👉 CSS Modules make styles scoped to one component.

✅ Step 8: Test and Deploy

Run your app locally to test everything:

npm run dev

For deployment, you can use Vercel (best for Next.js) or any cloud hosting provider.

📝 Summary

Migrating a React project to Next.js App Router is not as difficult as it seems. You start by creating a Next.js project, move your React components, update routing, handle environment variables, and adjust assets and styles. With Server Components and built-in routing, Next.js makes apps faster, more scalable, and easier to maintain. Deploying with Vercel completes the process, giving you a smooth transition from React to Next.js.

Membership not found