nextjs app router在 SSR 完整刷新情况下如何使用 framer motion 在站内跳转的时候实现新页面从下划入效果

要在 Next.js 应用程序中使用 Framer Motion 在站内跳转时实现新页面从下方滑入效果，可以按照以下步骤进行操作：

1. 首先，安装 framer-motion 和 react-scroll 库：

npm install framer-motion react-scroll

2. 在页面中导入所需的模块：

import { motion } from 'framer-motion';
import { Link } from 'react-scroll';

3. 创建一个自定义的链接组件，该组件将使用 react-scroll 实现平滑的滚动效果：

const CustomLink = ({ to, children }) => (
  <Link to={to} smooth={true} duration={500} offset={-70}>
    {children}
  </Link>
);

4. 使用自定义链接组件替代 Next.js 的 Link 组件，以便在站内进行平滑的滚动跳转：

<CustomLink to="about">About</CustomLink>

5. 使用 framer-motion 的 motion 组件包裹要过渡的页面内容，并为其添加滑入效果的动画属性：

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  exit={{ opacity: 0, y: 20 }}
>
  {/* 页面内容 */}
</motion.div>

6. 在页面之间进行平滑的滚动跳转时，页面将具有从下方滑入的过渡效果。

注意：确保在页面组件中使用 getInitialProps 或 getServerSideProps 进行服务器端渲染，以便在 SSR 完整刷新情况下正确加载页面。