This guide walks you through the process of setting up a new Next.js project with advanced UI components and animations.
First, create a new Next.js app using the following command:
npx create-next-app my-nextjs-project
cd my-nextjs-project
Install Dependencies
Install Framer Motion and React Parallax Tilt to add animations and tilt effects to your project:
```bash
npm install framer-motion react-parallax-tilt
Set Up @shadcn/ui
Initialize @shadcn/ui in your project to access its collection of UI components:
```bash
npx shadcn-ui@latest init
Further, add the Card component from @shadcn/ui:
``bash
npx shadcn-ui@latest add card
Prepare Your Project for Development
Clean Up Default Content
In app/page.tsx, remove the main content, leaving the file ready for custom components.
Create Components Folder
At the root level, create a components folder:
``bash
mkdir components
Add MotionCard Component
Inside the components folder, create a MotionCard.tsx file.
Implement MotionCard in Your Application
In pages/index.tsx, import and use the MotionCard component