<nextjs_shadcn_setup> <title>How to Set Up a Basic Next.js ShadCN App in a frontend Folder</title> Create a New Next.js ShadCN Project in a Folder Named frontend 1 Create a New Next.js Project npx create-next-app@latest frontend
Create a new directory named frontend.
Install the latest version of Next.js and its dependencies.
Set up a basic project structure with some initial files in the frontend directory.
2
Navigate to Your Project Directory
cd frontend
3
Install ShadCN CLI
npm install -D @shadcn/ui
4
Initialize ShadCN
npx shadcn@latest init
5
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?
yes
6
App structure
<folder_tree>
</folder_tree>
UI components are placed in the components/ui folder.
The lib folder contains all the utility functions. utils.ts defines the cn helper.
The styles folder contains the global CSS.
7
Start the Development Server
npm run dev
Execute this please, use a MODULAR APPROACH with codeblocks I Run Please: