--- description: Automatic commit message generator and fast AI-powered commit for all current changes --- // turbo-all This workflow automatically stages all changes, generates a descriptive commit message, and commits them in one go. ### Steps: 1. **Stage All Changes**: Automatically stage all...

--- description: Systematically debug and fix 'Text content does not match server-rendered HTML' errors --- 1. **Check for Invalid HTML Nesting**: - The most common cause is invalid HTML, like a `<div>` inside a `<p>` tag. - **React 19 Update:** React 19 provides much better hydration error d...

--- description: The nuclear option for when dependencies are completely broken --- 1. **Remove node_modules**: - Delete the existing `node_modules` folder to clear installed packages. // turbo - Run `rm -rf node_modules` 2. **Remove Lock File**: - Delete `package-lock.json`, `yarn.loc...

--- description: Track down and fix infinite loops in useEffect and component rendering --- 1. **Check `useEffect` Dependencies**: - The most common culprit is a `useEffect` that updates a state variable which is also in its dependency array. - **Bad Pattern:** ```tsx useEffect(() =...

--- description: Complete checklist for sitemap, robots, manifest, and JSON-LD --- 1. **Metadata Base (Crucial)**: - In `src/app/layout.tsx`, define `metadataBase` to resolve relative URLs. ```tsx export const metadata: Metadata = { metadataBase: new URL('https://acme.com'), titl...

--- description: Audit and fix LCP, CLS, and INP issues for better ranking --- 1. **Fix LCP (Large Contentful Paint)**: - The largest element (usually the hero image) must load fast. - **Fix:** Add `priority` to your Hero image. ```tsx <Image src="/hero.png" alt="Hero" width={800} heigh...

--- description: Essential security headers, CSP, and rate limiting --- 1. **Security Headers (`next.config.js`)**: - Add these headers to prevent common attacks. ```js module.exports = { async headers() { return [ { source: '/:path*', headers: [ ...

--- description: Protect APIs with rate limits --- 1. **Install Upstash**: // turbo - Run `npm install @upstash/ratelimit @upstash/redis` 2. **Setup**: ```ts import { Ratelimit } from '@upstash/ratelimit'; const ratelimit = new Ratelimit({ redis, limiter: Ratelimit.sli...

--- description: Role-based permissions --- 1. **Define Roles**: ```prisma enum Role { USER ADMIN MODERATOR } ``` 2. **Protect Routes**: ```ts if (session?.user?.role !== 'ADMIN') { return Response.json({ error: 'Forbidden' }, { status: 403 }); } ``` 3....

--- description: Prevent CSRF attacks --- 1. **Use SameSite Cookies**: ```ts response.headers.set('Set-Cookie', 'token=abc; SameSite=Strict; HttpOnly'); ``` 2. **Implement CSRF Tokens**: ```ts import { randomBytes } from 'crypto'; export function generateCSRFToken() { return...

--- description: Complete boilerplate for secure authentication with Google/GitHub --- 1. **Install Dependencies**: - Install the NextAuth.js beta version. // turbo - Run `npm install next-auth@beta` 2. **Setup Environment Variables**: - Add to `.env.local`: ```bash AUTH_SECRET="...

--- description: Step-by-step guide to setting up a payment flow and webhooks --- 1. **Install Stripe**: - Install the Stripe SDK. // turbo - Run `npm install stripe` 2. **Create Checkout Session (Server Action)**: - Create a server action to initiate the Stripe checkout session. ``...

--- description: Define secure database policies to protect user data --- 1. **Enable RLS**: - Always enable RLS on every table you create. ```sql alter table profiles enable row level security; ``` 2. **Create "Select" Policy**: - Allow users to see only their own profile. ```sq...

--- description: Quick setup for a local Postgres database using Docker --- 1. **Install Docker Desktop**: - If you don't have Docker installed, download and install Docker Desktop for your OS. // turbo - Run `open https://www.docker.com/products/docker-desktop/` 2. **Create `docker-compo...

--- description: Simplify state management --- 1. **Install Zustand**: // turbo - Run `npm install zustand` 2. **Convert Store**: ```ts import { create } from 'zustand'; export const useStore = create((set) => ({ count: 0, increment: () => set((state) => ({ count: stat...

--- description: Real-time data sync --- 1. **Enable Realtime**: - Go to Database → Replication in Supabase. 2. **Subscribe to Changes**: ```tsx const channel = supabase .channel('messages') .on('postgres_changes', { event: '*', schema: 'public', table: 'messages' }, (payload) =...

--- description: Instantly find and kill the process hogging your dev port --- 1. **The Best Way (Cross-Platform)**: - Kill it in one command using npx. Works on Mac, Windows, and Linux. // turbo - Run `npx kill-port 3000` 2. **Mac/Linux Manual Method**: - Find PID: `lsof -ti:3000` ...

--- description: Safely create a local .env file from .env.example --- 1. **Check for .env.example**: - Ensure the example file exists. // turbo - Run `test -f .env.example && echo "✅ Found .env.example" || echo "❌ .env.example not found"` 2. **Copy to .env.local**: - Create your local...

--- description: Reclaim disk space by removing unused containers and images --- 1. **Check Current Usage**: - See how much space Docker is using. // turbo - Run `docker system df` 2. **Run Prune**: - ⚠️ **WARNING**: This will remove all stopped containers and unused images! - Remov...

--- description: Interactively check and update outdated packages --- 1. **Check for Updates**: - Use `npm-check-updates` to see what's new. // turbo - Run `npx npm-check-updates` 2. **Review Changes**: - ⚠️ **WARNING**: Always review major version changes before updating! - Check c...

--- description: Standardize VS Code settings across the team --- 1. **Create settings.json**: - Create `.vscode/settings.json` for workspace-specific settings. // turbo - Run `mkdir -p .vscode && printf '{\n "editor.formatOnSave": true,\n "editor.defaultFormatter": "esbenp.prettier-vsco...

--- description: Automatically fix linting and formatting issues across the project --- 1. **Run ESLint Fix**: - Attempt to automatically fix all fixable ESLint errors. // turbo - Run `npm run lint -- --fix` 2. **Run Prettier**: - Format all files in the project to ensure consistent st...

--- description: Run type checking, linting, and build verification before pushing --- 1. **Type Check**: - Ensure there are no TypeScript errors. // turbo - Run `npx tsc --noEmit` 2. **Lint Check**: - Verify code quality rules. // turbo - Run `npm run lint` 3. **Build Verificat...

--- description: Configure linting and formatting (ESLint 9 Flat Config) --- 1. **Install Dependencies**: - Install ESLint, Prettier, and configs. // turbo - Run `npm install --save-dev eslint @eslint/js typescript-eslint prettier eslint-config-prettier eslint-plugin-react-hooks eslint-plu...

--- description: Automate code quality checks with pre-commit and pre-push hooks --- 1. **Install Husky**: - Install husky and lint-staged. // turbo - Run `npm install --save-dev husky lint-staged` 2. **Initialize Husky**: - Set up git hooks. // turbo - Run `npx husky init` 3. *...

--- description: Auto-generate type-safe API client from OpenAPI/Swagger spec --- 1. **Get Your API Schema**: - Most APIs expose OpenAPI spec at `/swagger.json` or `/openapi.json`. - Download it or use the URL directly. 2. **Install openapi-typescript**: - Best tool for generating types. ...

--- description: Configure different env vars for dev, staging, and production --- 1. **Local Development (.env.local)**: - Create `.env.local` for local overrides (never commit this). ```bash # .env.local DATABASE_URL=postgresql://localhost:5432/mydb API_URL=http://localhost:3001 ...

--- description: Standardize pull request descriptions for better code reviews --- 1. **Create Template Directory**: - GitHub looks for templates in `.github/` folder. // turbo - Run `mkdir -p .github` 2. **Create Pull Request Template**: - Create the template file with structured cont...

--- description: Visualize and reduce your production build size --- 1. **Install Analyzer**: - Install the Next.js bundle analyzer. // turbo - Run `npm install @next/bundle-analyzer` 2. **Configure next.config.js**: - Wrap your config. ```js const withBundleAnalyzer = require('@...

--- description: Create and test scheduled tasks in Next.js --- 1. **Create Cron Config**: - Add `crons` to `vercel.json`. ```json { "crons": [ { "path": "/api/cron/daily-report", "schedule": "0 10 * * *" } ] } ``` 2. **Create API Route**: ...

--- description: Revert the last database migration if something goes wrong --- 1. **Identify Migration**: - Check migration status. // turbo - Run `npx prisma migrate status` 2. **Resolve Migration**: - Mark a failed migration as resolved (if stuck). // turbo - Run `npx prisma m...

--- description: Push current branch to a Vercel preview URL --- 1. **Install Vercel CLI**: - Ensure you have the CLI. // turbo - Run `npm i -g vercel` 2. **Deploy**: - Deploy the current directory. // turbo - Run `vercel` 3. **Pro Tips**: - Use `vercel --prod` to deploy to p...

--- description: Verify SSL certificate validity and expiration --- 1. **Check Expiry**: - Use openssl to check a domain. Replace `google.com` with your domain. // turbo - Run `echo | openssl s_client -servername google.com -connect google.com:443 2>/dev/null | openssl x509 -noout -dates` ...

--- description: Automate version bumps and changelog generation --- 1. **Install semantic-release**: - Automate versioning based on commit messages. // turbo - Run `npm install --save-dev semantic-release @semantic-release/changelog @semantic-release/git` 2. **Configure Commit Convention...

--- description: Safely release features with toggles for gradual rollouts --- 1. **Simple Approach: Environment Variables**: - Use env vars for basic flags. ```ts // lib/features.ts export const features = { newDashboard: process.env.NEXT_PUBLIC_FEATURE_NEW_DASHBOARD === 'true', ...

--- description: Populate your database with realistic test data --- 1. **Install Faker**: - Generate realistic fake data. // turbo - Run `npm install --save-dev @faker-js/faker` 2. **Create Seed Script**: - Create `prisma/seed.ts`. ```ts import { PrismaClient } from '@prisma/cli...

--- description: Auto-deploy PRs --- 1. **Create GitHub Action**: ```yaml name: Preview on: pull_request: types: [opened, synchronize] jobs: deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 ...

--- description: Zero-downtime deploys --- 1. **Setup Two Environments**: - Blue: Current (v1.0) - Green: New (v1.1) 2. **Route Traffic Gradually**: ```ts const rolloutPercent = await get('green_rollout') || 0; if (Math.random() * 100 < rolloutPercent) { return NextResponse.rew...

--- description: Identify slow components using React Profiler --- 1. **Install DevTools**: - Install React Developer Tools extension for Chrome/Firefox. 2. **Record Session**: - Open DevTools -> Profiler tab. - Click the "Record" circle. - Interact with your app (perform the slow acti...

--- description: Find and fix accessibility violations --- 1. **Install axe-core**: - Use the CLI tool for quick audits. // turbo - Run `npm install -g @axe-core/cli` 2. **Run Audit**: - Check a specific URL. Replace with your local or prod URL. // turbo - Run `axe http://localho...

--- description: Boilerplate setup for end-to-end testing --- 1. **Initialize Playwright**: - Run the init command. // turbo - Run `npm init playwright@latest` 2. **Run Tests**: - Execute the example tests. // turbo - Run `npx playwright test` 3. **Show Report**: - View the H...

--- description: Prevent white screens of death with a fallback UI --- 1. **Create Component**: - Create `src/components/ErrorBoundary.tsx`. ```tsx 'use client'; import React, { Component, ReactNode } from 'react'; interface Props { children: ReactNode; fallback?: ReactNod...

--- description: Test how your app behaves under 3G conditions --- 1. **Chrome DevTools**: - Open DevTools (F12). - Go to the **Network** tab. - Locate the "No throttling" dropdown (usually top right of the pane). - Select **Fast 3G** or **Slow 3G**. 2. **Verify UX**: - Reload the p...

--- description: Identify and fix memory leaks causing app slowdowns and crashes --- 1. **Take Heap Snapshots**: - Open Chrome DevTools → Memory tab. - Take a snapshot, interact with your app, take another snapshot. - Click "Comparison" to see what objects are being retained. 2. **Common ...

--- description: Resolve Cross-Origin Resource Sharing errors in API calls --- 1. **Understand the Error**: - CORS errors occur when frontend (http://localhost:3000) calls API (http://api.example.com). - Browser blocks the request unless the API explicitly allows it. 2. **Quick Fix (Next.js ...

--- description: Systematically resolve "Cannot find module" errors --- 1. **Check the Import Path**: - ❌ `import { foo } from '../components/Foo'` (missing file extension in some setups) - ✅ `import { foo } from '../components/Foo.tsx'` or use path aliases 2. **Verify Module is Installed**:...

--- description: Master Chrome DevTools Network tab for API debugging --- 1. **Open Network Tab**: - Press F12 → Network tab. - Reload the page to capture all requests. 2. **Filter Requests**: - Click "Fetch/XHR" to see only API calls. - Use the search box to find specific endpoints. ...

--- description: Profile and optimize slow API endpoints --- 1. **Add Timing Logs**: - Measure execution time. ```ts export async function GET() { console.time('API /users'); const users = await db.user.findMany(); console.timeEnd('API /users'); return Response.json(use...

--- description: Fix infinite render loops --- 1. **State Update During Render**: - ❌ `setCount(count + 1)` in render - ✅ Use `useEffect` 2. **Fix Dependencies**: ```tsx const fetchData = useCallback(() => { return { data: 'value' }; }, []); ``` 3. **Fix Event Handlers**: ...

--- description: Fix WebSocket connections --- 1. **Setup with Reconnection**: ```tsx 'use client' export function useWebSocket(url: string) { const ws = useRef<WebSocket | null>(null); useEffect(() => { ws.current = new WebSocket(url); ws.current.onclose = ()...

--- description: Setup request tracing --- 1. **Install OpenTelemetry**: // turbo - Run `npm install @opentelemetry/api` 2. **Add Trace IDs**: ```ts import { trace } from '@opentelemetry/api'; const traceId = trace.getActiveSpan()?.spanContext().traceId; ``` 3. **Visualize with ...

--- description: Quickly generate a new React component structure --- 1. **Create Directory**: - Create a folder for the component. // turbo - Run `mkdir -p src/components/NewComponent` 2. **Create Component File**: - Create the main file with boilerplate code. // turbo - Run `pr...

--- description: Add dark mode support using next-themes --- 1. **Install next-themes**: - Install the library. // turbo - Run `npm install next-themes` 2. **Add Provider**: - Wrap your app in `app/layout.tsx`. ```tsx import { ThemeProvider } from 'next-themes'; export def...

--- description: Configure next-intl for multi-language support --- 1. **Install next-intl**: - Install the library. // turbo - Run `npm install next-intl` 2. **Create Messages**: - Create `messages/en.json` and `messages/es.json`. ```json { "Index": { "title": "Hello...

--- description: Setup secure file uploads to AWS S3 --- 1. **Install AWS SDK**: - Install the S3 client and presigner. // turbo - Run `npm install @aws-sdk/client-s3 @aws-sdk/s3-request-presigner` 2. **Create Presigned URL (Server Action)**: - Generate a presigned URL on the server fo...

--- description: Create branded error pages --- 1. **Create Not Found**: - Create `src/app/not-found.tsx`. ```tsx import Link from 'next/link'; export default function NotFound() { return ( <div> <h2>Not Found</h2> <p>Could not find requested resource</p> ...

--- description: Compress and serve images in modern formats for faster loading --- 1. **Use Next.js Image Component**: - Automatic optimization and lazy loading. ```tsx import Image from 'next/image'; <Image src="/hero.jpg" alt="Hero" width={1200} height={600} ...

--- description: Implement Redis caching (Upstash or self-hosted) --- 1. **Option A: Upstash Redis (Serverless Recommended)**: - Best for Vercel/Edge environments. // turbo - Run `npm install @upstash/redis` ```ts import { Redis } from '@upstash/redis'; const redis = new Redis...

--- description: Prevent duplicate API calls in React components --- 1. **Next.js 15 Fetch Caching**: - **Change:** `fetch` requests are no longer cached by default in `GET` handlers or Server Components unless configured. - **Fix:** Explicitly set `cache: 'force-cache'` if you want caching. ...

--- description: Troubleshoot common bundler errors and slow builds --- 1. **Build Fails with Module Parse Error**: - Usually missing a loader for file type. - **Check**: Do you have the right loader installed? ```bash # For CSS npm install --save-dev css-loader style-loader # For...

--- description: Find and eliminate implicit 'any' types for better type safety --- 1. **Enable Strict Mode**: - Update `tsconfig.json` to catch implicit any. ```json { "compilerOptions": { "strict": true, "noImplicitAny": true, "strictNullChecks": true } ...

--- description: Update UI before server confirms --- 1. **Install React Query**: // turbo - Run `npm install @tanstack/react-query` 2. **Setup Optimistic Mutation**: ```tsx const addTodo = useMutation({ mutationFn: (text) => fetch('/api/todos', { method: 'POST', body: JSON.string...

--- description: Serve static pages with auto-updates --- 1. **Enable ISR**: ```tsx export const revalidate = 60; // seconds export default async function Page() { const data = await fetchData(); return <div>{data}</div>; } ``` 2. **On-Demand Revalidation**: ```ts ...

--- description: Analyze and reduce JS bundle --- 1. **Analyze Bundle**: // turbo - Run `npm install @next/bundle-analyzer` // turbo - Run `ANALYZE=true npm run build` 2. **Replace Heavy Libraries**: - moment.js → date-fns - lodash → Native JS 3. **Use Dynamic Imports**: ```t...

--- description: Enable offline functionality --- 1. **Install Workbox**: // turbo - Run `npm install next-pwa` 2. **Configure**: ```js const withPWA = require('next-pwa')({ dest: 'public' }); module.exports = withPWA({}); ``` 3. **Create Manifest**: ```json { ...

--- description: Track and debug production errors with Sentry --- 1. **Install Sentry SDK**: - Install the Next.js SDK. // turbo - Run `npm install @sentry/nextjs` 2. **Initialize Sentry**: - Run the wizard. // turbo - Run `npx @sentry/wizard@latest -i nextjs` - This creates ...

--- description: Build and test components in isolation with Storybook --- 1. **Install Storybook**: - Initialize Storybook in your project. // turbo - Run `npx storybook@latest init` 2. **Create Your First Story**: - Create a story file next to your component. ```tsx // componen...

--- description: Mock API requests for testing and development --- 1. **Install MSW**: - Mock Service Worker for API mocking. // turbo - Run `npm install --save-dev msw@latest` 2. **Initialize MSW**: - Generate service worker file. // turbo - Run `npx msw init public/ --save` 3....

--- description: Fix dependency issues after pulling changes from Git --- 1. **Clear Node Modules Cache**: - Remove cached modules and reinstall. // turbo - Run `rm -rf node_modules .next && npm install` 2. **Check for Lockfile Conflicts**: - Look for merge conflicts in package-lock.js...

--- description: Configure VS Code for monorepo development --- 1. **Create Workspace File**: - Create `my-project.code-workspace`. ```json { "folders": [ { "path": "packages/web", "name": "Web App" }, { "path": "packages/api", "name": "API" }, { "path": "packages...

--- description: Incrementally migrate Next.js Pages Router to App Router --- 1. **Enable App Router**: - Create `app` directory alongside `pages`. - Both routers work simultaneously during migration. 2. **Convert getServerSideProps**: - Pages Router: ```tsx export async function ge...

--- description: Configure Turborepo for fast monorepo builds --- 1. **Install Turborepo**: - Initialize in existing repo. // turbo - Run `npx create-turbo@latest` - Or add to existing: `npm install turbo --save-dev` 2. **Configure turbo.json**: - Define pipeline and caching. ```...

--- description: Fix TypeScript module resolution issues --- 1. **Check tsconfig.json Paths**: - Verify path mappings are correct. ```json { "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./src/*"], "@/components/*": ["./src/components/*"] ...

--- description: Safely revert a pushed commit without breaking history --- 1. **Find the Bad Commit Hash**: - Identify the commit that caused the issue. // turbo - Run `git log --oneline -n 5` 2. **Revert the Commit**: - Use `git revert` to create a *new* commit that is the exact oppo...

--- description: Automatically find the exact commit that introduced a bug --- 1. **Start Bisect**: - Initialize the bisect process. // turbo - Run `git bisect start` 2. **Mark Current Commit as Bad**: - Tell Git that the current version is broken. // turbo - Run `git bisect bad`...

--- description: Keep your fork up-to-date with the original repo --- 1. **Add Upstream Remote**: - Check if you already have it. // turbo - Run `git remote -v` - If not, add it (replace `[original-repo-url]` with the actual URL): // turbo - Run `git remote add upstream [original-...