To help with page transition animations, set RouterContext tightly around Component when rendering

[mmmulani]

Describe the feature you'd like to request

Right now I am using AnimatePresence from Framer's motion library to do full page transitions, which works pretty well by doing something like:

function MyApp({ Component, pageProps }) {
  return (
    <AnimatePresence exitBeforeEnter>
      <Component {...pageProps} />
    </AnimatePresence>
  );
}

Suppose you have two pages A and B with <PageAComponent> and <PageBComponent>, then when you navigate from A to B, AnimatePresence will hold onto <PageAComponent> while it does an exit animation, and then switch over to <PageBComponent>.

This all works pretty well with Next.js but crucially, useRouter() within <PageAComponent> will return unexpected results. In this case, while PageAComponent is doing an exit animation, useRouter().asPath inside PageA will return /pageB. (Which follows logically from the code as there is one global RouterContext)

Describe the solution you'd like

I would like it if RouterContext were more tightly applied to <Component>, so that calling useRouter() within PageAComponent returned the last router that was used to show PageA. Then in that case, useRouter().asPath would return /pageA.

I took a quick look at next/client/index.tsx and couldn't find an easy way to do this since Component is passed as a class rather than rendered instance (which of course, has other benefits). You could maybe wrap it in a component that rendered a RouteContext.Provider but that would break anyone using displayName or any other custom properties they might set.

Describe alternatives you've considered

Our workaround for this is a bit hacky but our _app.tsx is structured like:

function MyApp({ Component, pageProps, router }) {
  const key = Component?.getKey(router) ?? router.asPath;
  return (
    <AnimatePresence exitBeforeEnter>
      <Component key={key} {...pageProps} />
    </AnimatePresence>
  );
}

and then within the PageAComponent, we will cache the router path by doing:

const [path] = useState(useRouter().asPath);

Overall this is not great as we only get the first value of asPath rather than the last.

Another workaround which I am planning to try is:

function MyApp({ Component, pageProps, router }) {
  const key = Component?.getKey(router) ?? router.asPath;
  const routerCopy = copy(useRouter());
  return (
    <AnimatePresence exitBeforeEnter>
      <RouterContext.Provider key={key} value={routerCopy}>
        <Component {...pageProps} />
      </RouterContext.Provider>
    </AnimatePresence>
  );
}

which though it makes sense to me, I haven't tested to see if it actually solves the problem.