Nextjs App Router Page Transition

Installation

For npm users:

Loading...

For yarn users:

Loading...

For pnpm users:

Loading...

QuickStart

  • create a new nextjs app with pnpm create next-app, select yes for App Router.
  • run pnpm i narpt.
  • replace app/layout.js with the following code.
  • Loading...

  • replace app/page.js with the following code.
  • Loading...

  • create a new page app/about/page.js and insert the following code.
  • Loading...

Customised page transition

For more customised animation check out useTransition() hook.