Common Next.js App Router development tasks and troubleshooting
This skill provides guidance for working with Next.js App Router projects, specifically for the suno-forge codebase.
npm run dev
The app will be available at http://localhost:3000
Port Already in Use:
# Kill process on port 3000 (Windows)
Get-Process -Id (Get-NetTCPConnection -LocalPort 3000).OwningProcess | Stop-Process
# Or use a different port
npm run dev -- -p 3001
Cache Issues:
# Clear Next.js cache
Remove-Item -Recurse -Force .next
npm run dev
# Type check without emitting files
npx tsc --noEmit
# Run tests
npm test
# Build for production
npm run build
tsconfig.json for strict mode settingsNextResponsetypes/ directory match actual usageAPI routes in App Router use route.ts files:
// app/api/example/route.ts
import { NextRequest, NextResponse } from 'next/server';
export async function POST(request: NextRequest) {
try {
const body = await request.json();
// Process request
return NextResponse.json({ success: true });
} catch (error) {
return NextResponse.json(
{ error: 'Internal server error' },
{ status: 500 }
);
}
}
# Using curl (PowerShell)
Invoke-RestMethod -Uri "http://localhost:3000/api/generate" -Method POST -Body '{"style":"jazz"}' -ContentType "application/json"
# Or use the browser console
fetch('/api/generate', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ style: 'jazz' })
}).then(r => r.json()).then(console.log)
Check .env.local for:
OPENAI_API_KEY - For AI-powered featuresNEXT_PUBLIC_SUPABASE_URL - Supabase project URLNEXT_PUBLIC_SUPABASE_ANON_KEY - Supabase anon key.env.local (never commit this file).env.example as a templateprocess.env.NEXT_PUBLIC_*process.env.*If changes aren't reflecting:
.next directorynpm run build
# Check output for page sizes