react经验：在nextjs中使用motion组件

什么是motion组件？

一种动画组件
motion组件文档

在nextjs中的应用步骤

1.安装motion

npm i framer-motion

2.在next.config.js中配置转义

export default {transpilePackages: ['framer-motion']
}

3.开始应用
**注意要点：**在服务端渲染不可直接用，但凡用到motion的地方都要封装成客户端组件
举例：需要一个motion.div作为容器
首先把motion.div封装成客户端组件

'use client'
import { motion, MotionProps } from "motion/react"declare type Props = {children?:React.ReactNode
} & MotionPropsexport default function MotionDIV(props: Props) {return <motion.div {...props}>{props.children}</motion.div>
}

然后在需要的页面调用这个组件

import MotionDIV from './MotionDIV'
const variants = {hidden: { opacity: 0, y: 50 },visible: { opacity: 1, y: 0 },
};
export default async function HomePage(){return (<MotionDIV className="root"variants={variants}initial="hidden"whileInView="visible"transition={{ duration: 0.5 }}viewport={{ once: true }}>hello world</MotionDIV>)
}

以上。