Get Started

Install Next Js

System requirements

Node.js 18.18 or later.
macOS, Windows (including WSL), and Linux are supported.

Automatic installation

We recommend starting a new Next.js app using create-next-app, which sets up everything automatically for you. To create a project, run:

npx create-next-app@latest

On installation, you'll see the following prompts:

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`?  No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*

After the prompts, create-next-app will create a folder with your project name and install the required dependencies.

Install ShadCN

For Next Js

Create project

Run the init command to create a new Next.js project or to setup an existing one:

npx shadcn@latest init

You can use the -d flag for defaults i.e new-york, zinc and yes for the css variables.

npx shadcn@latest init -d

Configure components.json

You will be asked a few questions to configure components.json:

Which style would you like to use? › New York
Which color would you like to use as base color? › Zinc
Do you want to use CSS variables for colors? › no / yes

That's it

You can now start adding components to your project.

npx shadcn@latest add button

The command above will add the Button component to your project. You can then import it like this:

index.tsx

import { Button } from "@/components/ui/button";
 
export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  );
}

Install Framer Motion

Installation

npm install motion

Usage

index.tsx

import { motion } from "motion/react";
 
export default function Home() {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
    >
      Hello World
    </motion.div>
  );
}

Other libraries

React Icons

npm install react-icons

Usage

index.tsx

import { FaSearch } from "react-icons/fa";
 
export default function Home() {
  return (
    <div>
      <FaSearch />
    </div>
  );
}

Canvas Confetti

npm install canvas-confetti

npm i --save-dev @types/canvas-confetti

Usage

index.tsx

import { useEffect } from "react";
import confetti from "canvas-confetti";
 
export default function Home() {
  useEffect(() => {
    confetti();
  }, []);
 
  return <div>Hello World</div>;
}

Get Started

Install Next Js

System requirements

Automatic installation

Install ShadCN

For Next Js

Create project

Configure components.json

That's it

Install Framer Motion

Other libraries

On this page

Contribute