2020/05/next-page-transition/

[utterances-bot]

[Next.js]: Build page transitions with React Transition Group in Next.js | { Ellis Min }

Overview In this post I'll show how to apply page transitions (a.k.a. route transitions or page animations) in Next.js with React…

https://ellismin.com/2020/05/next-page-transition/

[rhernandog]

Hey, nice example. I was looking for something that didn't work with Framer Motion for a while.

Quick question, would this approach work by wrapping the _app.js file that Next creates when the project is generated? For what I can see in your sample it should, since the <Transition> will get the status of the component.

Finally, is completely necessary to wrap the <Transition> component with a <TransitionGroup> one, or can it be done with just the <Transition> one? If not, why?

Thanks again!! Best, Rodrigo.

[EllisMin]

Hello @rhernandog,

Wrapping custom _app component

• If you’re trying to wrap inside _app.js with Transition component, you can do so by passing location prop to the Transition component.

import Transition from "../components/Transition";

const App = ({ Component, pageProps, router }) => {
  return (
    <Transition location={router.route}>
      <Component {...pageProps} />
    </Transition>
  );
};

export default App;

• If you meant wrapping the whole custom App component that's exported outside like below example, I don’t think it is achievable as you wouldn’t be able to use router nor window object before initialization of App.

  (This wouldn't work)

import App from "./_app";
import Router from "next/router";
import Transition from "../components/Transition";

const Main = () => {
  return (
    <div className="main">
      {/* You can't get the pathname from router before using App */}
      <Transition location={Router.pathname}>
        <App />
      </Transition>
    </div>
  );
};

export default Main;

Using TransitionGroup

TransitionGroup in this example was to trigger the child component, Transition, when the route (key prop) changes. This is from the documentation

"While this component is meant for multiple Transition or CSSTransition children, sometimes you may want to have a single transition child with content that you want to be transitioned out and in when you change it (e.g. routes, images etc.) In that case you can change the key prop of the transition child as you change its content, this will cause TransitionGroup to transition the child out and back in."

[dev-code-davis]

Thanks. For most part this works fine, if the is in parent component -> Like in /pages/about.js. however, if lets say, the About component has a component inside that itself has elements to other page, the transition effect fail to load. Not sure how to solve this? By passing location={Router.pathname} to component didn't seem to help.

[dev-code-davis]

EDIT: Nevermind, fixed it. Had wrongly formatted component. Thanks.

[vietalj]

I know it's too late , but you can use router.asPath in Layout/index.js passing on location variable

[lequangvu03]

How to use it in NextJS App Router. I am getting stuck with it because useRouter's next/router is not supported in NextJS App Router .