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

You can use libraries like Framer Motion or Barba js.

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.