Next.js Discord

Discord Forum

Migrating Component prop in custom App in Next12 in v13?

Unanswered
Bergamasco Shepherd posted this in #help-forum
Open in Discord
Bergamasco ShepherdOP
I'm using page transitions with Framer Motion which requires I wrap the page components inside an <AnimatePresence> and give the immediate child a key prop. This is simple in next 12.x.x by creating a custom _app.js and using the Component prop, but I can't seem to find how to do this in next 13.x.x. I've created a similar hierarchy in layout.js but can't pass a key prop to the page component because it exists as a children prop and not a Component. Is there an obvious replacement for this API in 13.x.x or any thoughts on possible solutions?

2 Replies

Bergamasco ShepherdOP
An example of how this works in next 12 in step 1 of this tutorial: https://maxschmitt.me/posts/nextjs-page-transitions-framer-motion
TL;DR I need the Component prop from next 12's custom App:
export default function App({ Component, pageProps }: AppProps) {