将页面转换添加到 Nextjs 的最佳方法是什么？

Question

我正在尝试将页面转换添加到我的 Nextjs 应用程序中。我应该怎么做才能添加它？

Answer 1

您可以使用 Framer Motion 或 Barba js 之类的库。

Answer 2

1. 您可以安装依赖项react-transition-group

   $ npm install react-transition-group

2. 在组件文件夹中创建一个 transition_sample.js 或 transition_sample.tsx 组件

3. 接下来，如果您在 transition_sample.js 或 transition_sample.tsx 组件中执行此操作，请将 layouts/MainLayout 或 _app.js 组件导入到您的 _app.tsx 或 _app.js/_app.tsx 或 <Component {...pageProps} /> {1}} 务必将孩子替换为 useRouter

4. 从 next//router 导入 MainLayout 并将路径名传递给 location props

5. 全部完成，然后在您的 pages 中使用 MainLayout 并使用布局用 var result = ['0','50','0']; 包裹您的页面。