Nextjs-Starting project (nextjs+react+tailwind)

Create a new production-ready frontend project using the latest stable versions.

IMPORTANT: Use Context7 MCP throughout the entire setup process to fetch the latest official documentation, patterns, and best practices before making decisions or installing packages.

Always verify:

• latest package versions
• latest CLI commands
• current recommended architecture
• deprecations
• migration notes
• Tailwind CSS v4 changes
• latest shadcn/ui setup flow
• Next.js App Router conventions

Tech Stack:

• Framework: Next.js with React
• Language: TypeScript
• Styling: Tailwind CSS v4
• UI Library: shadcn/ui
• Package manager: pnpm

---

CONTEXT7 MCP REQUIREMENTS

Before implementation:

1. Use Context7 MCP to retrieve the latest documentation for:

   • Next.js
   • React
   • Tailwind CSS v4
   • shadcn/ui
   • TypeScript

2. Validate:

   • recommended project structure
   • latest install commands
   • current CLI usage
   • current Tailwind v4 configuration
   • latest shadcn component architecture
   • App Router best practices
   • accessibility recommendations
   • performance recommendations

3. Avoid:

   • deprecated APIs
   • outdated Tailwind v3 patterns
   • old shadcn installation methods
   • Pages Router patterns unless explicitly required
   • unnecessary boilerplate

---

PROJECT INITIALIZATION

Initialize a new Next.js application with:

• App Router
• TypeScript
• ESLint
• Tailwind CSS
• src directory
• import alias @/*

Use the latest recommended create-next-app command.

---

FOLDER STRUCTURE

Use this scalable feature-first structure:

src/ app/ layout.tsx page.tsx globals.css

components/ ui/ common/ layout/

features/ home/ components/ hooks/ services/ types.ts

lib/ utils.ts constants.ts

hooks/ types/ styles/

---

SHADCN/UI

Install and configure shadcn/ui using the latest official CLI flow.

Install these base components:

• button
• card
• input
• textarea
• dialog
• dropdown-menu

Ensure:

• accessibility best practices
• proper component organization
• reusable patterns
• minimal clean styling

---

TAILWIND CSS V4

Use the latest Tailwind CSS v4 setup patterns.

Requirements:

• no outdated tailwind.config.js patterns unless officially required
• modern CSS-first configuration
• proper globals.css setup
• clean design tokens
• scalable utility usage

---

CODE QUALITY

Configure:

• strict TypeScript
• absolute imports
• ESLint
• clean architecture
• reusable utilities
• maintainable component structure

Follow:

• SOLID principles where relevant
• composition over inheritance
• server/client component best practices
• modern React patterns

---

DEMO PAGE

Create a simple responsive homepage using shadcn/ui components to verify:

• layout works
• styling works
• imports work
• dark mode works if supported
• components render correctly

---

OUTPUT REQUIREMENTS

After setup:

1. Explain all decisions briefly
2. Show final folder structure
3. Show exact commands executed
4. Mention any Context7 MCP insights used
5. Explain how to run the project
6. Mention any latest best practices discovered
7. Mention any avoided deprecated patterns

IMPORTANT: Prefer official documentation and Context7 MCP references over assumptions. Use the most modern and maintainable architecture possible.