Generate and verify new Next.js App

gistfile1.txt

# 🚀 Generate New Next.js App

## What This Command Does
- Creates a new Next.js application using the latest version
- Configures TypeScript, Tailwind CSS, ESLint, and App Router
- Sets up the project structure with best practices
- Performs automatic verification of the setup
- Provides manual validation instructions

## Where to Run This Command

Run this command from your **home directory** (`~/`). The command will create the new Next.js app in `~/apps/[APP_NAME]`.

## Instructions for the Agent

You are creating a new Next.js application from scratch. Use the latest Next.js with TypeScript, Tailwind CSS, ESLint, and the App Router.

### Step 1: Ask for app name

Ask the user what they want to name the new project. This will be used as the directory name.

If not provided, suggest they provide a name before proceeding.

### Step 2: Ensure ~/apps directory exists

Create the apps directory if it doesn't exist:

```bash
mkdir -p ~/apps
```

### Step 3: Safety check - verify app directory doesn't exist

Before creating anything, check if the target directory already exists:

```bash
if [ -d ~/apps/[APP_NAME] ]; then
  echo "❌ Error: ~/apps/[APP_NAME] already exists"
  echo "Please choose a different name or remove the existing directory"
  exit 1
fi
```

Replace `[APP_NAME]` with the actual app name from Step 1.

If the directory exists, stop immediately and inform the user. Do not proceed with generation.

### Step 4: Generate the Next.js app

Run the create-next-app command in the ~/apps directory:

```bash
cd ~/apps
npx create-next-app@latest test-app --typescript --tailwind --eslint --app --no-src-dir --import-alias "@/*" --yes
```

Replace `[APP_NAME]` with the actual app name from Step 1.

### Step 5: Navigate to the new app directory

```bash
cd ~/apps/[APP_NAME]
```

### Step 6: Automatic Verification

After generation, verify the following automatically:

1. **Check key files exist:**
   ```bash
   test -f package.json && echo "✓ package.json exists" || echo "✗ package.json missing"
   test -f tsconfig.json && echo "✓ tsconfig.json exists" || echo "✗ tsconfig.json missing"
   test -f tailwind.config.ts && echo "✓ tailwind.config.ts exists" || echo "✗ tailwind.config.ts missing"
   test -f next.config.js && echo "✓ next.config.js exists" || echo "✗ next.config.js missing"
   test -f .eslintrc.json && echo "✓ .eslintrc.json exists" || echo "✗ .eslintrc.json missing"
   test -d app && echo "✓ app directory exists" || echo "✗ app directory missing"
   ```

2. **Verify package.json scripts:**
   ```bash
   grep -q '"dev"' package.json && echo "✓ dev script exists" || echo "✗ dev script missing"
   grep -q '"build"' package.json && echo "✓ build script exists" || echo "✗ build script missing"
   grep -q '"start"' package.json && echo "✓ start script exists" || echo "✗ start script missing"
   grep -q '"lint"' package.json && echo "✓ lint script exists" || echo "✗ lint script missing"
   ```

3. **Check TypeScript configuration:**
   ```bash
   grep -q '"@/*"' tsconfig.json && echo "✓ path alias configured" || echo "✗ path alias missing"
   ```

4. **Verify app structure:**
   ```bash
   test -f app/layout.tsx && echo "✓ app/layout.tsx exists" || echo "✗ app/layout.tsx missing"
   test -f app/page.tsx && echo "✓ app/page.tsx exists" || echo "✗ app/page.tsx missing"
   test -f app/globals.css && echo "✓ app/globals.css exists" || echo "✗ app/globals.css missing"
   ```

5. **Check dependencies:**
   ```bash
   grep -q '"next"' package.json && echo "✓ next dependency exists" || echo "✗ next dependency missing"
   grep -q '"react"' package.json && echo "✓ react dependency exists" || echo "✗ react dependency missing"
   grep -q '"typescript"' package.json && echo "✓ typescript dependency exists" || echo "✗ typescript dependency missing"
   grep -q '"tailwindcss"' package.json && echo "✓ tailwindcss dependency exists" || echo "✗ tailwindcss dependency missing"
   ```

### Step 7: Output Summary

After verification, output a summary:

```
✅ Next.js app generation complete!

📁 App directory: ~/apps/[APP_NAME]
📦 Package manager: npm
⚙️  Configuration:
   - TypeScript: ✓
   - Tailwind CSS: ✓
   - ESLint: ✓
   - App Router: ✓
   - Import alias (@/*): ✓

📋 Verification Results:
[Output all verification results from Step 6]

🎯 Next Steps:
1. In Cursor: File → Open Folder → ~/apps/[APP_NAME]
2. npm run dev
3. Open http://localhost:3000 in your browser
```

### Step 8: Manual Validation Instructions

Provide the user with these manual validation steps:

```
🔍 Manual Validation Checklist:

1. **Open the new app in Cursor:**
   File → Open Folder → ~/apps/[APP_NAME]

2. **Start the development server:**
   npm run dev
   
   Expected: Server starts on http://localhost:3000 without errors

3. **Verify the homepage loads:**
   - Open http://localhost:3000 in your browser
   - Should see the default Next.js welcome page
   - Page should have Tailwind CSS styling applied

4. **Check TypeScript compilation:**
   - Look for any TypeScript errors in the terminal
   - Should compile without errors

5. **Verify file structure:**
   - app/layout.tsx should exist and export a RootLayout
   - app/page.tsx should exist and export a default component
   - app/globals.css should contain Tailwind directives

6. **Test hot reload:**
   - Edit app/page.tsx
   - Save the file
   - Browser should automatically refresh with changes

7. **Run linting:**
   npm run lint
   
   Expected: No linting errors (or only warnings)

8. **Test build:**
   npm run build
   
   Expected: Build completes successfully with no errors

✅ If all checks pass, your Next.js app is ready to use!
```

## Tags

nextjs, setup, typescript, tailwind, app-router, verification