nextjs framer motion

Step 1: Install Required Packages

npm install next framer-motion

Step 2: Create a New Next.js App

npx create-next-app my-nextjs-app
cd my-nextjs-app

Step 3: Create a Component with Framer Motion Create a new file, e.g., MyComponent.js in the components folder.

// components/MyComponent.js
import { motion } from 'framer-motion';

const MyComponent = () => {
  return (
    <motion.div
      initial={{ opacity: 0, y: -50 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -50 }}
    >
      {/ Your component content here /}
      <h1>Hello, Framer Motion!</h1>
    </motion.div>
  );
};

export default MyComponent;

Step 4: Use the Component in a Page Edit the pages/index.js file to import and use the MyComponent component.

// pages/index.js
import MyComponent from '../components/MyComponent';

const Home = () => {
  return (
    <div>
      <h1>Next.js with Framer Motion</h1>
      <MyComponent />
    </div>
  );
};

export default Home;

Step 5: Start the Next.js App

npm run dev

Visit http://localhost:3000 in your browser to see the animated component.

Note: Customize the motion properties in the MyComponent file according to your animation preferences.