#Next.js
43 entries
Prompt to Add Better Auth to Next.js with PostgreSQL
A copy-paste prompt for adding Better Auth and PostgreSQL session handling to a Next.js App Router project.
Prompt to Add Cloudflare R2 File Upload
Copy-paste AI prompt to add Cloudflare R2 presigned upload URLs to a Next.js App Router project with server-side validation.
Prompt to Add Dark Mode with Tailwind CSS v4
AI agent prompt to add system-aware dark mode to a Next.js app using Tailwind CSS v4 CSS variables and next-themes, with no flash on load.
Prompt to Add PostgreSQL Full-Text Search
Copy-paste AI prompt to add native PostgreSQL full-text search with tsvector, GIN index, and ranked results to an existing Next.js app.
Prompt to Add a Sitemap and robots.txt
AI agent prompt to add a dynamically generated sitemap.xml and a correct robots.txt to a Next.js or Astro project for better search indexing.
Prompt to Add Stripe Checkout to a Next.js App
AI agent prompt to add Stripe Checkout with webhook handling, customer portal, and subscription status to a Next.js App Router project.
Prompt to Build a Next.js AI Tool Directory
AI agent prompt to build a searchable Next.js AI tool directory with MDX data files, category filters, and static generation.
Prompt to Build a SaaS Pricing Page in Next.js
Copy-paste AI prompt to build a SaaS pricing page in Next.js with Tailwind, toggle billing, and Stripe-ready plan data.
Prompt to Create a GitHub Actions Deploy Workflow
AI agent prompt to generate a production GitHub Actions CI/CD workflow for a Next.js app with type-check, test, build, and deploy steps.
Prompt to Create an Admin Dashboard in Next.js
AI agent prompt to build a protected Next.js admin dashboard with data tables, server-side auth guards, and a sidebar layout using Tailwind.
Prompt to Generate OG Images at Build Time
AI agent prompt to generate per-page Open Graph images at build time in Astro or Next.js using Satori and sharp, with no external service.
Prompt to Migrate a Next.js 14 App to Next.js 16
Structured AI agent prompt to migrate a Next.js 14 App Router project to Next.js 16 with breaking-change handling and incremental steps.
Prompt to Refactor a React Component Safely
Structured AI agent prompt to refactor a complex React component with a read-audit-refactor-verify loop that prevents regressions.
AGENTS.md Rules for a Next.js SaaS App
A drop-in AGENTS.md that keeps AI coding agents on-stack and on-convention in a Next.js SaaS codebase.
AI Coding Rules for Auth and Security
AGENTS.md rules for authentication and security that prevent agents from rolling custom crypto, leaking secrets, or bypassing authorization checks.
AI Coding Rules for PostgreSQL Apps
AGENTS.md rules for PostgreSQL-backed apps covering query safety, migration discipline, indexing conventions, and preventing agents from writing N+1 queries.
AI Coding Rules for SEO Content Sites
AGENTS.md rules for SEO-focused content sites that prevent duplicate metadata, enforce structured data, and keep agents from breaking crawlability.
AI Coding Rules for Static Site Performance
AGENTS.md rules for static site performance that enforce Core Web Vitals, image optimization, font loading, and prevent agents from shipping render-blocking resources.
AI Coding Rules for TypeScript Strict Projects
AGENTS.md rules for TypeScript strict-mode projects that eliminate any types, enforce narrowing patterns, and prevent agents from compiling-but-wrong code.
Claude Code Rules for Prisma Projects
Claude Code rules for Prisma ORM projects covering migration safety, query patterns, relation loading, and preventing agents from corrupting the schema.
Cursor Rules for Tailwind CSS and shadcn/ui
Cursor rules that enforce Tailwind v4 conventions and shadcn/ui component patterns, preventing agents from reinventing primitives that already exist.
Prompt-to-PR: Add a Pricing Page
SOP for generating a production pricing page with monthly/annual toggle, feature matrix, and Stripe Checkout links in a Next.js Tailwind project.
Prompt-to-PR: Add a Sitemap and robots.txt
SOP for adding a dynamic XML sitemap and robots.txt to a Next.js or Astro project — correct lastmod, priority, and crawl rules for production SEO.
Prompt-to-PR: Add an Admin Data Table
SOP for adding a server-side paginated, sortable, searchable admin data table in Next.js using TanStack Table and a PostgreSQL query — no ORM magic.
Prompt-to-PR: Add Better Auth to a Next.js App
Full SOP for wiring Better Auth into a Next.js App Router project — sessions, email/password, OAuth, and middleware protection in one pass.
Prompt-to-PR: Add Cloudflare R2 File Upload
End-to-end SOP for wiring presigned R2 uploads into a Next.js or Cloudflare Workers app — bucket binding, presigned URLs, and client upload flow.
Prompt-to-PR: Add Dark Mode
End-to-end SOP for adding flicker-free dark mode to a Next.js Tailwind app using next-themes — class strategy, system preference, and persisted toggle.
Prompt-to-PR: Add PostgreSQL Full-Text Search
SOP for adding native PostgreSQL full-text search with tsvector, GIN index, ts_rank, and a Next.js search API — no third-party search service needed.
Prompt-to-PR: Migrate Next.js 14 to 16
Step-by-step SOP for migrating a Next.js 14 App Router project to Next.js 16 — Turbopack, React 19, async APIs, and caching changes covered.
Checklist for Reviewing AI-Generated API Routes
A human review checklist for REST and RPC API routes written by AI coding agents — authentication, input validation, rate limiting, and error handling.
Checklist for Reviewing AI-Generated Auth Code
A human review checklist for authentication code written by AI coding agents — sessions, JWTs, OAuth flows, and authorization logic for web apps.
Checklist for Reviewing AI-Generated Next.js Code
A human review checklist for Next.js code written by AI coding agents — App Router, Server Components, data fetching, and deployment correctness.
Checklist for Reviewing AI-Generated SEO Pages
A human review checklist for SEO-targeted pages written by AI coding agents — metadata, structured data, canonical URLs, and Core Web Vitals for Astro and Next.js.
Checklist for Reviewing AI-Generated Stripe Code
A human review checklist for Stripe integration code written by AI coding agents — webhook security, idempotency, race conditions, and payment flows.
Checklist for Reviewing AI-Generated Tailwind UI
A human review checklist for Tailwind CSS UI components written by AI coding agents — accessibility, responsiveness, dark mode, and purge safety.
How to Fix AI Creating React Hydration Mismatches
AI agents generate React components that render different HTML on the server and client, triggering hydration errors and broken UI on first load.
How to Fix AI Forgetting Environment Variable Validation
AI agents read process.env values directly without validation, causing silent undefined bugs and missing startup errors when env vars are absent.
How to Fix AI Ignoring SEO Metadata
AI agents scaffold Next.js and Astro pages without title tags, Open Graph metadata, or canonical URLs, shipping pages that are invisible to search engines and social crawlers.
How to Fix AI Overusing useEffect
AI agents reach for useEffect to handle derived state, event transforms, and data fetching that should instead use useMemo, event handlers, or Server Components.
How to Fix AI Putting Server Code in Client Components
AI agents leak database queries, secret env vars, and Node.js APIs into 'use client' components, exposing server-only logic to the browser bundle.
How to Fix AI Coding Agents Using Outdated Next.js APIs
AI agents frequently generate Next.js code using deprecated Pages Router patterns, getServerSideProps, and removed APIs that break App Router projects.
Next.js SaaS Starter — Context Pack
Copyable context pack for a Next.js SaaS app with App Router, Better Auth, Stripe billing, and Postgres so your AI agent works correctly from prompt one.
PostgreSQL Search App — Context Pack
Copyable context pack for a full-text and vector search application backed by PostgreSQL with pgvector, so your AI agent writes correct SQL and migration code from the start.