jonas-cardoso/enter-exit-page-transitions-with-next.js

Intercept Transition between routes in Next.js 13/14 and call Exit animations with a <Navigate> component that can be extended.

Enter/Exit Page Transitions with Next.js 14

Getting Started

With the release of Next.js 13, the App folder was introduced, which resulted in the removal of support for next/router. As a workaround to implement page transitions, you need to navigate programmatically by intercepting the route and invoking the route transition via the Context API.

Implementation Details

This project structure serves as a base for larger projects. Here are a few important notes to consider during implementation:

Forward/Backward Browser Navigation

To enable smooth transitions with forward/backward browser navigation, consider utilizing the useLayoutEffect hook without a dependency array. This approach makes the transition logic execute each time the navigation occurs.

UseLayout will update the loading states after the route has loaded and changes have been calculated, will then sync the transition before it gets painted. Thus you can manipulate what the user actually sees right before the route initial render.

Integration with Framer Motion

For integration with Framer Motion, replace the init/_enter/_exit functions with the respective initial/animate/exit behavior.

Add a FINISHED = "FINISHED" property to the LOADING_STATES enum.

export enum LOADING_STATES {
  INIT = "INITIALIZED",
  LOADING = "PENDING",
  LOADED = "COMPLETE",
  FINISHED = "FINISHED",
}

Add logic to the _enter function so it adds the Framer motion finished state if the animation has been loaded.

if (loading === LOADING_STATES.LOADED) {
  //once animation is complete
  setLoading(LOADING_STATES.FINISHED);
}

Conditionally render the loader based on the FINISHED state.

{loading != LOADING_STATES.FINISHED && (<>Component</>)}