Cursor Rules Template: Next.js Personal Brand Website Generator

Overview

This Cursor Rules Template provides a Next.js-based personal brand website generator that includes a blog, projects, SEO metadata generation, analytics hooks, and AI-assisted copywriting. It targets a modern static + dynamic site architecture optimized for performance and discoverability. Direct answer: copy the included .cursorrules block into your project root to configure Cursor AI for this stack.

When to Use These Cursor Rules

You are building a personal brand site with a blog and a projects gallery using Next.js.
You want automated SEO metadata for pages and posts, plus analytics instrumentation.
You need AI-assisted copywriting for landing pages, blog intros, and project descriptions.
You prefer a server-first data access pattern with a small PostgreSQL backend and no heavy ORM.
You require a reproducible project structure and strict security guidelines for production.

Copyable .cursorrules Configuration

// Cursor Rules Template: Next.js Personal Brand Website Generator
Framework: Next.js 14+ with App Router (TypeScript)
Context: You are a Cursor AI developer assistant tasked with producing a precise, copyable Cursor Rules block for a Next.js personal-brand site. Your output must fit into a .cursorrules file at the project root and drive automated code generation, SEO metadata, and AI copywriting templates.

// Code Style and Style Guides
Style: TypeScript, ESLint (recommended), Prettier 2-space, strict type-checking, no implicit any, consistent naming, no semicolons in React components unless required by lint rules.
Lint: Run eslint --ext .ts,.tsx . && prettier --check .
Testing: Use Vitest for unit tests, React Testing Library for components, and Playwright for end-to-end tests.

// Architecture & Directory Rules
Directory: /src (Next.js App Router)
- /src/app (routes, server components)
- /src/blog (blog-specific routes and components)
- /src/projects (projects gallery routes)
- /src/lib (shared utilities)
- /src/db (PostgreSQL access via node-postgres with parameterized queries)
- /src/components (UI primitives)
- /src/styles (global and component styles)
- /src/analytics (analytics integration modules)
- /src/copy (AI-assisted copy templates)

// Authentication & Security Rules
Auth: Optional; use signed cookies or NextAuth; do not expose secrets to the client; CSRF protection on API routes; Content Security Policy enforced via headers; environment variables stored in .env.local

// Database and ORM patterns
DB: PostgreSQL with node-postgres (pg); no ORM. Use parameterized queries, explicit schema mapping, and a small repository layer. Ensure connection pooling via DATABASE_URL, and separate read/write replicas if available. Do not rely on client-side DB access.

// Testing & Linting Workflows
CI: GitHub Actions matrix for Node.js, run lint, type-check, unit tests, and e2e tests on push/PRs. Include a cache step for node_modules and pnpm/yarn workspace.

// Prohibited Actions and Anti-patterns
- Do not hardcode secrets in code or cursorrules.
- Do not bypass SSR for SEO-critical data.
- Do not fetch user data on the client for initial page renders that affect SEO.
- Do not use heavy ORMs that complicate deployment in small projects.
- Do not disable accessibility testing; ensure images have alt text and semantic HTML.

// End Cursor Rules block

Recommended Project Structure

src/
  app/                # Next.js App Router
    layout.tsx
    globals.css
    blog/
      [slug]/
        page.tsx
        metadata.ts
    projects/
      [id]/
        page.tsx
        metadata.ts
  components/
  lib/
  db/
  analytics/
  copy/
  styles/
  tests/

Core Engineering Principles

TypeScript-first with strict typings and explicit contracts across boundaries.
Server Components for performance and better caching strategies.
Data fetching with clear separation: UI layer, data access layer, and domain logic.
SEO-first rendering: ensure metadata and sitemap generation are correct at build time.
Security by default: never expose secrets; validate inputs; enforce CSP and proper auth flows.

Code Construction Rules

All pages should be React Server Components where possible for performance; client components used only when necessary.
Use TypeScript interfaces for page and API data shapes; avoid any-typed data from API responses.
Blog posts and projects use slug-based routing; ensure slug generation is URL-safe and unique.
SEO metadata must be generated from content and template data; use next/head or metadata API accordingly.
All API routes must implement input validation, parameterized queries, and proper error handling.
Do not mix server-only logic into client components; keep authentication checks server-side when possible.

Security and Production Rules

Store secrets in environment variables; never commit them to repository.
Implement strict Content Security Policy (CSP) headers and disable inline scripts unless nonce-enabled.
Use CSRF protection on state-changing endpoints; validate all inputs server-side.
Apply rate limiting on API routes; protect analytics endpoints from misuse.
Validate third-party script sources for analytics and social widgets.

Testing Checklist

Unit tests for UI components and utility functions.
Integration tests for API routes with parameterized inputs.
End-to-end tests for blog, projects, and SEO metadata rendering.
Type checking and linting in CI; ensure Prettier formatting matches project rules.
Build and deploy checks, including static export of blog posts for ISR.

Common Mistakes to Avoid

Hardcoding URLs or API keys in components or cursorrules blocks.
Ignoring accessibility (Alt text, semantic HTML, keyboard navigation) in templates.
Skipping SEO metadata generation for dynamic routes.
Using client-only data for content that should be server-rendered for SEO.
Over-reliance on a single ORM; prefer explicit queries and clear data access layers.

Related Cursor rules templates

Explore adjacent Cursor rules templates for similar stacks, workflows, and production constraints.

FAQ

What stack does this Cursor Rules Template cover?

The template targets a Next.js 14+ app with the App Router, TypeScript, PostgreSQL via node-postgres, and a lightweight data access pattern without a heavy ORM. It includes AI copywriting templates and SEO metadata generation to support a personal-brand site with a blog and projects.

How do I use the .cursorrules block?

Copy the raw .cursorrules block from the Copyable section and paste it into the root of your project as .cursorrules. Cursor AI will guide code generation, enforce project conventions, and produce consistent metadata, tokens, and templates for pages, blog posts, and projects.

Does this template include SEO metadata generation?

Yes. The Cursor Rules Template includes automated SEO metadata generation for pages and blog posts, including title templates, meta descriptions, og:tags, canonical URLs, and structured data schema blocks suitable for Next.js pages.

How should analytics be integrated securely?

Analytics should be implemented via a privacy-conscious approach: load analytics scripts asynchronously, avoid collecting PII by default, and expose opt-out mechanisms. Use server-side feature flags to switch analytics on/off without redeploying code.

What are common pitfalls when applying these rules?

Common pitfalls include hardcoding secrets, neglecting SEO on dynamic routes, failing to sanitize user input, and overusing client-side rendering for critical content. The template emphasizes server-rendered data and strict typing to minimize these issues.

Target User

Use Cases