Next.js Incremental Adoption Explained — Migrating to Next.js

// pages/_app.jsx — Keep existing pages while adding app directory
export default function App({ Component, pageProps }) {
  return (
    <Provider>
      <Component {...pageProps} />
    </Provider>
  );
}

// app/dashboard/page.jsx — New App Router page alongside Pages Router
export default function Dashboard() {
  return (
    <div>
      <h1>Dashboard (App Router)</h1>
      <p>New features use App Router, existing pages remain in Pages Router.</p>
    </div>
  );
}

// next.config.js — Configure both routers
const nextConfig = {
  experimental: {
    scrollRestoration: true,
  },
  pageExtensions: ["js", "jsx", "ts", "tsx"],
  // Both pages/ and app/ directories coexist
};

// components/SharedHeader.jsx — Shared component used by both routers
export default function SharedHeader({ title }) {
  return (
    <header>
      <h1>{title}</h1>
      <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
      </nav>
    </header>
  );
}