migrate page router to app router.

Answered

Yellowfin tuna posted this in #help-forum

Yellowfin tunaOP

2024-01-01T03:49:31.000Z

in next.js 13.4 the app router has been changed to stable. So, I'm trying to migrate my existing page router to the app router.

The _app.jsx is supposed to receive Component, pageProps as props, and I need to get those props in my project now. My question is, when I change this to layout.js, how should I handle the above props?

Answered by Ray

rename index.mdx to page.mdx

View full answer

32 Replies

@Yellowfin tuna in next.js 13.4 the app router has been changed to stable. So, I'm trying to migrate my existing page router to the app router. The _app.jsx is supposed to receive Component, pageProps as props, and I need to get those props in my project now. My question is, when I change this to layout.js, how should I handle the above props?

Ray

2024-01-01T03:56:01.000Z

the layout.jsx receives a props with children
the page.jsx receives a object of params and searchParams

there are also headers() and cookies() from next/navigation

Yellowfin tunaOP

2024-01-01T03:57:23.000Z

What should I do now?

Ray

2024-01-01T03:57:36.000Z

what you want to do?

Yellowfin tunaOP

2024-01-01T03:59:14.000Z

I'm trying to move from Page Router to Router, the project is MDX Blog

Ray

2024-01-01T03:59:22.000Z

create app/layout.tsx first
then you could start migrating the page. page router and app router can use together

Yellowfin tunaOP

2024-01-01T03:59:56.000Z

Hers is the code on _app file

import { useEffect, useRef } from 'react';

import { Footer } from '@/components/Footer';
import { Header } from '@/components/Header';

import '@/styles/tailwind.css';
import 'focus-visible';

function usePrevious(value) {
  let ref = useRef();

  useEffect(() => {
    ref.current = value;
  }, [value]);

  return ref.current;
}

export default function App({ Component, pageProps, router }) {
  let previousPathname = usePrevious(router.pathname);
  console.log(`hhhhhhhhhh ${pageProps.toString()}`);

  return (
    <>
      <div className="fixed inset-0 flex justify-center sm:px-8">
        <div className="flex w-full max-w-7xl lg:px-8">
          <div className="w-full bg-white ring-1 ring-zinc-100 dark:bg-zinc-900 dark:ring-zinc-300/20" />
        </div>
      </div>
      <div className="relative">
        <Header />
        <main>
          <Component previousPathname={previousPathname} {...pageProps} />
        </main>
        <Footer />
      </div>
    </>
  );
}

i did

Ray

2024-01-01T04:01:10.000Z

basically you don't need those props in layout

Yellowfin tunaOP

2024-01-01T04:01:11.000Z

But I have a problem with how to write this part in the app router

 <Component previousPathname={previousPathname} {...pageProps} />

Ray

2024-01-01T04:01:39.000Z

what do you use previousPathname for?

Yellowfin tunaOP

2024-01-01T04:02:22.000Z

To add a back button, but it is not important

Ray

2024-01-01T04:03:22.000Z

so just need to do this in layout.jsx

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}