Next.js is a popular React framework that enables developers to build server-side rendered React applications with ease. One of the ways to enhance the user experience of a Next.js app is to add page transitions. In this article, we will explore how to add page transitions to a Next.js app.

Step 1: Install Necessary Packages

To add page transitions to a Next.js app, we need to install two packages: framer-motion and next-page-transitions. We can install them using npm by running the following command:

npm install framer-motion next-page-transitions

Step 2: Create a Layout Component

We need to create a layout component that will wrap all our pages. This component will be responsible for rendering the page transitions. Here is an example of a simple layout component:

import { motion } from 'framer-motion';
import { PageTransition } from 'next-page-transitions';

const transitionStyles = {
  enter: {
    opacity: 0,
  },
  enterActive: {
    opacity: 1,
    transition: {
      duration: 0.5,
    },
  },
  exit: {
    opacity: 0,
    transition: {
      duration: 0.5,
    },
  },
};

const Layout = ({ children }) => (
  <PageTransition
    timeout={500}
    classNames="page-transition"
    monkeyPatchScrolling
    loadingDelay={500}
    loadingTimeout={{
      enter: 500,
      exit: 0,
    }}…