Next.js Discord

Discord Forum

Migrating a custom _app.tsx to app-router

Answered
American posted this in #help-forum
Open in Discord
AmericanOP
Hello!

I'm migrating a project from pages to app-router and I've stumbled upon a pattern I haven't seen before and I'm not sure how to migrate it.

We have a CustomApp which takes a property called pageProps. This is populated in the React component. But then if I try to log it in the CustomApp.getInitialProps everything there is undefined. It seems to be some bubble-up magic which bubbles up the underlying getStaticProps and then we use that to set title for example. I haven't seen this before, but how would I replicate this functionality in my RootLayout?
Answered by Aleutian Tern
Yes, is pretty straightforward to be frank. Check it out:
You'll need to use generateMetadata function:
https://nextjs.org/docs/app/api-reference/functions/generate-metadata
View full answer

6 Replies

Aleutian Tern
Do you mean to dynamically set the page title using external data ?
AmericanOP
Basically what's currently happening (I think) is pages/_app.tsx getting data from pages/index.tsx's getStaticProps. If that's true, can I replicate this pattern with the app-router?
Aleutian Tern
Yes, is pretty straightforward to be frank. Check it out:
You'll need to use generateMetadata function:
https://nextjs.org/docs/app/api-reference/functions/generate-metadata
Answer
Aleutian Tern
Example usage: https://github.com/vercel/commerce/blob/main/app/product/%5Bhandle%5D/page.tsx
AmericanOP
💡
Thank you! That makes so much sense