Start a New Project

A comprehensive guide to creating a new project with The Next UI

1. Set up your development environment

Ensure you have Node.js (version 14 or later) installed on your system. You can download it from nodejs.org.

2. Create a new Next.js project

Open your terminal and run the following command:

npx create-next-app@latest my-next-ui-project

This will create a new Next.js project in a folder named "my-next-ui-project".

3. Configure your project

During the setup, you'll be asked several questions. Here are the recommended options for use with The Next UI:

  • Would you like to use TypeScript? Yes
  • Would you like to use ESLint? Yes
  • Would you like to use Tailwind CSS? Yes
  • Would you like to use 'src/' directory? Yes
  • Would you like to use App Router? Yes
  • Would you like to customize the default import alias? No

4. Navigate to your project folder

cd my-next-ui-project

5. Install The Next UI dependencies

npm install framer-motion clsx tailwind-merge

6. Set up The Next UI utilities

Follow the instructions in the "Add Utilities" page to set up the necessary utility functions and configure Tailwind CSS for The Next UI.

7. Start the development server

npm run dev

This will start your Next.js development server. Open http://localhost:3000 in your browser to see your new project.

8. Start building with The Next UI

You can now start creating components using The Next UI utilities. The main page is located at src/app/page.tsx. As you make changes, the browser will automatically update.

9. Version control

Initialize a Git repository and make your first commit:

git init
git add .
git commit -m "Initial commit with The Next UI setup"

10. Next steps

You're now ready to start building your application with The Next UI! Here are some suggestions for next steps:

  • Create reusable components using The Next UI utilities
  • Implement responsive layouts with Tailwind CSS
  • Explore advanced animations with Framer Motion
  • Set up a component library for your project
  • Integrate with a backend API or database
  • Implement authentication and authorization
  • Optimize your application for performance