Next.js App Router SSR: 实现 Framer Motion 页面过渡动画

要在 SSR 的情况下使用 Framer Motion 在站内跳转时实现旧界面从下划出和新页面从下划入的效果，可以使用以下步骤：

1. 首先，确保你的 Next.js 应用已经集成了 Framer Motion。你可以通过在项目中安装 framer-motion 包来实现：npm install framer-motion。

2. 创建一个自定义的路由组件（例如：CustomLink.js），并导入 motion 和 useRouter 对象：

import { motion } from 'framer-motion';
import { useRouter } from 'next/router';

const CustomLink = ({ href, children }) => {
  const router = useRouter();

  const handleLinkClick = (e) => {
    e.preventDefault();
    router.push(href);
  };

  return (
    <motion.a
      href={href}
      onClick={handleLinkClick}
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -20 }}
    >
      {children}
    </motion.a>
  );
};

export default CustomLink;

3. 在你的页面中使用自定义的路由组件来实现站内跳转效果，例如：

import CustomLink from './CustomLink';

const HomePage = () => {
  return (
    <div>
      <CustomLink href='/about'>About</CustomLink>
    </div>
  );
};

export default HomePage;

4. 这样，当用户点击链接时，旧页面将会向下滑出（exit 动画），而新页面将会从下方滑入（initial 和 animate 动画）。

需要注意的是，Next.js 的默认行为是进行页面的完整刷新，这会导致无法使用 Framer Motion 的过渡效果。为了解决这个问题，你可以使用 Next.js 的 Link 组件或自定义的路由组件来处理站内的页面跳转。