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

要在 SSR 完整刷新情况下使用 Framer Motion 实现新页面从下方划入效果，你可以使用以下步骤：

1. 首先，确保你已经在 Next.js v13 项目中安装并配置了 Framer Motion。

2. 在你的 Next.js 项目的 _app.js 文件中，导入 useEffect 和 useRouter 钩子。

import { useEffect } from 'react';
import { useRouter } from 'next/router';

3. 在 _app.js 文件中，创建一个 useRouterScroll 自定义钩子函数，用于处理页面滚动的逻辑。

const useRouterScroll = () => {
  const router = useRouter();

  useEffect(() => {
    const handleRouteChange = () => {
      window.scrollTo(0, 0);
    };

    router.events.on('routeChangeComplete', handleRouteChange);

    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    };
  }, [router]);
};

4. 在 _app.js 文件中，将 useRouterScroll 钩子函数放在 function MyApp({ Component, pageProps }) 函数中的 useEffect 钩子中。

function MyApp({ Component, pageProps }) {
  useRouterScroll();

  return <Component {...pageProps} />;
}

5. 在你的页面组件中，使用 Framer Motion 的 motion 组件来包裹你的页面内容。

import { motion } from 'framer-motion';

const MyPage = () => {
  return (
    <motion.div
      initial={{ opacity: 0, translateY: 100 }}
      animate={{ opacity: 1, translateY: 0 }}
      exit={{ opacity: 0, translateY: -100 }}
    >
      {/* 页面内容 */}
    </motion.div>
  );
};

在上面的代码中，initial 属性定义了页面初次加载时的动画效果，animate 属性定义了页面切换时的动画效果，exit 属性定义了离开页面时的动画效果。你可以根据自己的需求来调整这些属性。

这样，当你在 Next.js v13 SSR 完整刷新的情况下进行页面切换时，新页面将会从下方划入。