title: Next.js page transition
body: <p>I'm using the new <code>_app.js</code> file for Next.js to try and create a page transition such as a fade or slide but can't get my head around it. I'm using Styled Components to apply the styling. My structure looks like this currently:</p>
  
  <p><strong>_app.js</strong></p>
  
  <pre><code>import App, { Container } from 'next/app';
  import React from 'react';
  import PageTransition from '../components/PageTransition';
  
  class MyApp extends App {
    static async getInitialProps({ Component, ctx }) {
      let pageProps = {};
  
      if (Component.getInitialProps) {
        pageProps = await Component.getInitialProps(ctx);
      }
  
      return { pageProps };
    }
  
    render() {
      const { Component, pageProps } = this.props;
  
      return (
        &lt;Container&gt;
          &lt;PageTransition&gt;
            &lt;Component {...pageProps} /&gt;
          &lt;/PageTransition&gt;
        &lt;/Container&gt;
      );
    }
  }
  
  export default MyApp;
  </code></pre>
  
  <p><strong>components/PageTransition/index.jsx</strong></p>
  
  <pre><code>import { Transition } from 'react-transition-group';
  import PropTypes from 'prop-types';
  import React, { Component } from 'react';
  import Root from './index.style';
  
  class PageTransition extends Component {
    state = {
      active: true,
    }
  
    componentDidUpdate() {
      // Check if children are different to previous children
      // If true, set this.state.active to false
      // After 1000ms transition, set to true again
    }
  
    render() {
      const { children } = this.props;
      const { active } = this.state;
  
      return (
        &lt;Transition in timeout={1000}&gt;
          &lt;Root id="root" active={active}&gt;
            {children}
          &lt;/Root&gt;
        &lt;/Transition&gt;
      );
    }
  }
  
  export default PageTransition;
  </code></pre>
  
  <p><strong>components/PageTransition/index.style.js</strong></p>
  
  <pre><code>import styled from 'styled-components';
  
  const Root = styled.div`
    opacity: ${p =&gt; (p.active ? 1 : 0)};
    transition: opacity 1000ms;
  `;
  
  export default Root;
  </code></pre>
  
  <p>Would this be a correct approach? If so, I don't think componentDidUpdate is soon enough to catch the page change. My attempts at this work but it does a render and you see a flash of the page before the state updates again to tell it to start the fade out then fade in. I would need to update the state before the render.</p>
  
  <p>Is there a way to handle this with React Transition Group? I did look at <a href="https://www.npmjs.com/package/next-page-transitions" rel="nofollow noreferrer">next-page-transitions</a> but wasn't comfortable that the package has low usage and I just wanted a simpler solution.</p>