Next-app-router-transitions NPM

Next App Router Transitions 🚀

Elevate your Next.js App Router projects with silky-smooth page transitions! This package provides an easy-to-use component that adds fluid animations between route changes, enhancing the overall user experience of your Next.js applications.

Features

🎭 Multiple transition effects (block, multiBlock, blinds)
🔧 Fully customizable (duration, ease, colors)
📱 Responsive and accessible
🧩 Seamless integration with Next.js App Router
🪶 Lightweight with minimal setup

Installation

npm install next-app-router-transitions framer-motion

Important: This package requires framer-motion as a peer dependency. Make sure to install it alongside the package.

Usage

To use Next App Router Transitions in your project, follow these steps:

Create a new client component in your app directory, e.g., app/TransitionLayout.tsx:

"use client";

import { TransitionWrapper } from "next-app-router-transitions";

export default function TransitionLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <TransitionWrapper
      transitionType="block"
      duration={0.5}
      backgroundColor="#000">
      {children}
    </TransitionWrapper>
  );
}

Use this component in your root layout (app/layout.tsx):

import TransitionLayout from "./TransitionLayout";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <TransitionLayout>{children}</TransitionLayout>
      </body>
    </html>
  );
}

This setup ensures that the transition effects are applied consistently across your entire application.

API

The TransitionWrapper component accepts the following props:

Prop	Type	Default	Description
transitionType	string	'block'	Type of transition effect ('block', 'multiBlock', 'blinds')
duration	number	0.75	Duration of the transition in seconds
backgroundColor	string	'black'	Background color of the transition element
ease	string \| number[]	'easeInOut'	Easing function for the transition
zIndex	number	50	z-index of the transition element

Examples

Block Transition

<TransitionWrapper transitionType="block" duration={0.5} backgroundColor="#000">
  {children}
</TransitionWrapper>

MultiBlock Transition

<TransitionWrapper
  transitionType="multiBlock"
  duration={0.7}
  backgroundColor="#fff">
  {children}
</TransitionWrapper>

Blinds Transition

<TransitionWrapper
  transitionType="blinds"
  duration={0.6}
  backgroundColor="#333">
  {children}
</TransitionWrapper>

Troubleshooting

If you encounter any issues, ensure that:

You have installed framer-motion as a peer dependency.
You're using the TransitionWrapper in a client component (with the "use client" directive).
The TransitionWrapper is placed as high as possible in your component tree, ideally in the root layout.
You have the correct peer dependencies installed (react, react-dom, next, framer-motion).