CODEWITHSUNDEEP
reactjsnext.js
lemokami
lemokami

Reputation: 43

What is the best way to add page transitions to Nextjs?

I am trying to add page transitions to my Nextjs app. What should I do to add that?

Upvotes: 4

Views: 4336

Answers (2)

Ashok
Ashok

Reputation: 3611

  1. You can install the dependency react-transition-group

    $ npm install react-transition-group

  2. create a transition_sample.js or transition_sample.tsxcomponent in the component folder

  3. Next, import the transition_sample.js or transition_sample.tsx component to your layouts/MainLayout or _app.js or _app.tsx if you're doing this in the _app.js/_app.tsx be sure to replace children with <Component {...pageProps} />

  4. Import useRouter from next//router and pass the pathname to location props

  5. All done then use the MainLayout in your pages and to use the layout wrap your pages with MainLayout.

Upvotes: 1

Akhil Ravindran
Akhil Ravindran

Reputation: 126

You can use libraries like Framer Motion or Barba js.

Upvotes: 2

Related Questions