Vercel React Best Practices

11 steps · start to finish.

1. 1
   Step 1

   Environment Setup

   ▶

   echo "=== Environment Setup ==="
   # Verify required tools
   command -v node >/dev/null || { echo "ERROR: node not installed"; exit 1; }
   command -v npm  >/dev/null || { echo "ERROR: npm not installed"; exit 1; }
   
   # Create output directories
   mkdir -p /app/results
   
   # Verify the target codebase exists and is a React/Next.js project
   TARGET="${TARGET_PATH:-$(pwd)}"
   if [ ! -f "$TARGET/package.json" ]; then
     echo "ERROR: No package.json found at $TARGET"
     exit 1
   fi
   
   # Check for React/Next.js dependencies
   if ! grep -q '"react"\|"next"' "$TARGET/package.json"; then
     echo "WARNING: No react or next dependency found — ensure this is a React project"
   fi
   
   echo "Target: $TARGET"
   echo "Node: $(node --version)"
   echo "Setup complete."
   

   ---

2. 2
   Step 2

   Audit Waterfall Elimination (CRITICAL — Priority 1)

   ▶

   Apply the `async-` rule category. These are the highest-impact rules.

3. 3
   Step 3

   Audit Bundle Size (CRITICAL — Priority 2)

   ▶

   Apply the `bundle-` rule category.

4. 4
   Step 4

   Audit Server-Side Performance (HIGH — Priority 3)

   ▶

   Apply the `server-` rule category.

5. 5
   Step 5

   Audit Client-Side Data Fetching (MEDIUM-HIGH — Priority 4)

   ▶

   Apply the `client-` rule category.

6. 6
   Step 6

   Audit Re-render Optimization (MEDIUM — Priority 5)

   ▶

   Apply the `rerender-` rule category.

7. 7
   Step 7

   Audit Rendering Performance (MEDIUM — Priority 6)

   ▶

   Apply the `rendering-` rule category.

8. 8
   Step 8

   Audit JavaScript Performance (LOW-MEDIUM — Priority 7)

   ▶

   Apply the `js-` rule category.

9. 9
   Step 9

   Audit Advanced Patterns (LOW — Priority 8)

   ▶

   Apply the `advanced-` rule category.

10. 10
    Step 10

    Iterate on Errors (max 3 rounds)

    ▶

    If any audit step produces errors or fails to scan correctly:

11. 11
    Step 11

    Write Audit Findings

    ▶

    Compile all findings into `/app/results/audit_findings.md`: