Cursor Rules Template: Next.js + Sanity Live Preview

Overview

Direct answer: Use this Cursor Rules Template to configure Next.js + Sanity Live Preview with a clear role, strict architecture, and safe AI assisted development practices. Paste the block into repository root to activate it.

The Cursor rules configuration for this stack defines how Cursor AI should operate within a Next.js app that uses Sanity CMS for content and supports live preview. It codifies role, structure, security and testing constraints so AI generated guidance stays aligned to the stack.

When to Use These Cursor Rules

• Starting a new Next.js App Router project with Sanity CMS live preview integration
• Enforcing a consistent folder structure for Sanity schema and Next.js app routes
• Defining security boundaries for preview tokens and data access
• Automating CI checks around linting and tests for this stack
• Preventing risky operations in AI generated code such as exposing tokens in client code

Copyable .cursorrules Configuration

// Cursor Rules Template for Next.js + Sanity Live Preview
Framework Role & Context
Next.js App Router with Sanity CMS live preview. You are Cursor AI acting as a Stack specific assistant for this frontend and CMS combo. Provide concrete file content and folder decisions.

Code Style and Style Guides
TypeScript preferred
ESLint + Prettier
React + Next.js conventions
Clear variable naming
No global mutable state in components
Folder structure under src with explicit index exports

Architecture & Directory Rules
src/app routes
src/lib for utilities
src/sanity for CMS config and client
src/components UI
src/styles global styles
Preview specific files at src/pages or app routes for API preview

Authentication & Security Rules
Do not embed secrets in client code
Use Next.js Preview Mode with server side guard
Environment variables for sanity project id, dataset, and token
Validate preview routes

Database and ORM patterns
Sanity headless CMS no ORM; use GROQ queries via sanity client
Typed client wrappers

Testing & Linting Workflows
Jest + React Testing Library
Playwright for end to end
CI lint and tests

Prohibited Actions and Anti-patterns
Do not expose tokens in front end
Do not bypass preview mode for production
Do not mutate data in preview without guardrails
Do not rely on insecure endpoints

Recommended Project Structure

src/
├─ app/
│  ├─ layout.tsx
│  ├─ page.tsx
│  └─ globals.css
├─ lib/
│  └─ sanity.ts
├─ sanity/
│  ├─ client.ts
│  └─ schemas/
│     └─ schema.ts
├─ components/
│  ├─ PreviewToggle.tsx
│  └─ ContentBlock.tsx
└─ styles/
   └─ globals.css

Core Engineering Principles

• Single source of truth for content and UI
• Secure by default and secrets never shipped to client
• Clear boundaries between CMS data and frontend code
• Typed data and linted, testable code
• Deterministic build, test, and deployment processes

Code Construction Rules

• Use Next.js App Router with TypeScript in src/app
• Centralize Sanity client in src/lib/sanity.ts with typed wrappers
• Expose a server-side preview route that only runs in Preview Mode
• Store environment dependent values in .env.local and load via process.env
• Keep UI components pure and avoid side effects during AI guidance
• Do not place tokens in client side bundles or in public repo

Security and Production Rules

• Enable Next.js Preview Mode with server side guardrails
• Use sanitized, typed GROQ queries for content fetches
• Environment variables shield project id, dataset, and tokens
• Validate and limit access to preview endpoints
• Never mutate live content in client side code via AI suggestions

Testing Checklist

• Unit tests for Sanity client wrappers and Next.js data fetching
• Integration tests for preview flow including token handling
• End to end tests for content rendering in live preview
• CI runs lint, type checks, and test suites on push/PR

Common Mistakes to Avoid

• Embedding tokens in client side code or public repos
• Relying on API routes without proper preview mode guards
• Overly broad GROQ queries leaking data
• Unversioned schema migrations that break preview renderings

FAQ

What is a Cursor Rules Template for Next.js and Sanity Live Preview?

A Cursor Rules Template for this stack defines the exact AI guidance and project constraints to apply when building Next.js apps that read content from Sanity with live preview. It specifies role, architecture, security, and testing rules so Cursor AI can generate safe, stack-aligned code and folder structures.

How do I paste the .cursorrules block into my project?

Copy the code block under Copyable .cursorrules Configuration and place it in your project root as a file named .cursorrules. Cursor AI will load these rules during code generation and guidance for the Next.js + Sanity Live Preview stack.

Will these rules affect production builds?

Yes, by enforcing safe patterns for preview mode and preventing client exposure of secrets. Production code should rely on server side guards and environment variables, with AI guidance limited to development and preview contexts.

Can I adapt this template to different CMSs or routing patterns?

Adaptation is possible but requires updating framework notes, directory rules, and security guidance. This template is tailored for Next.js App Router with Sanity Live Preview; when changing CMS or routing, replace the framework context and adjust the architecture notes accordingly.

What should I verify in CI after adding this template?

Verify linting passes, type checks succeed, unit tests for CMS integration pass, and end to end tests for preview flows run without token leakage or unauthorized access.