Skip to main content
affpapa.org
RU EN
rule

typescript-nextjs-react-cursorrules-prompt-file: Cursor rule

Configures Cursor for TypeScript, Next.js 14 App Router, React, and Tailwind. Useful when building frontend interfaces with Vercel AI SDK streaming.

Install into Cursor · Manually: put the files in place All methods and platforms ↓ 
.cursor/rules/typescript-nextjs-react-cursorrules-prompt-file.mdc
Open on GitHub

What typescript-nextjs-react-cursorrules-prompt-file does

This rule instructs Cursor to operate as a developer focused on TypeScript, React, Tailwind, and Next.js 14 App Router. It tells the editor to follow the Next.js 14 documentation when handling routing, rendering, and data fetching.

Streaming and model interactions are delegated to the Vercel AI SDK. Because alwaysApply is set to false, Cursor does not attach these directives to every single prompt by default, even though the file pattern is **/*.

What it helps with

  • structure Next.js 14 App Router pages and data fetching
  • integrate Vercel AI SDK for streaming responses
  • style React components using Tailwind CSS

Example prompts for the agent

  • Create a Next.js 14 App Router page with data fetching and Tailwind styling.
  • Add a streaming chat endpoint using Vercel AI SDK.

How to install typescript-nextjs-react-cursorrules-prompt-file

Manually: put the files in place

.cursor/rules/typescript-nextjs-react-cursorrules-prompt-file.mdc

Frontmatter: description, globs, alwaysApply

Step by step, with commands for each platform: Cursor rules: .mdc files, four modes and what replaced .cursorrules

Questions about typescript-nextjs-react-cursorrules-prompt-file

How do I install typescript-nextjs-react-cursorrules-prompt-file in Cursor?

Place the rule file at .cursor/rules/typescript-nextjs-react-cursorrules-prompt-file.mdc in your project root.

What does typescript-nextjs-react-cursorrules-prompt-file do?

It instructs Cursor to write code using TypeScript, Next.js 14 App Router conventions, React, Tailwind, and the Vercel AI SDK.

Does this rule run on every query automatically?

The rule specifies alwaysApply: false, so Cursor will not activate it on every prompt automatically despite the **/* glob.

Source text

typescript-nextjs-react-cursorrules-prompt-file.mdc · CC0-1.0 
---
description: "Cursor rules for TypeScript development with Next.js and React integration."
globs: **/*
alwaysApply: false
---
You are an expert in TypeScript, Next.js App Router, React, and Tailwind.

Follow @Next.js 14 App Router docs for Data Fetching, Rendering, and Routing.

Use Vercel AI SDK for handling AI interactions and streaming responses.

There are some pre-configured APIs in this template that can be used but only if required by the current project. These have already been created:

© PatrickJS · CC0-1.0 · PatrickJS/awesome-cursorrules

Similar IDE rules

All IDE rules for Frontend and UI →
winui3 official github This rule guides GitHub Copilot on WinUI 3 and Windows App SDK patterns, from XAML bindings to window management. Use it when working on a Windows desktop app. ★ 40,451repo stars vue official github A Copilot instruction file that sets Vue 3 conventions: Composition API, <script setup>, reactivity, Pinia and Vue Router. Useful when the agent writes components your way. ★ 40,451repo stars tanstack-start-shadcn-tailwind official github A Copilot instruction file that pins the stack to TanStack Start, Shadcn/ui and Tailwind CSS, with Zod validating every external payload. ★ 40,451repo stars tailwind-v4-vite official github This rule guides GitHub Copilot through setting up Tailwind CSS v4 in a Vite project with the official Vite plugin. It also covers migration from v3. ★ 40,451repo stars svelte official github Guides GitHub Copilot on Svelte 5 and SvelteKit 2 standards, enforcing runes reactivity, TypeScript props, and safe SSR data loading. ★ 40,451repo stars power-bi-custom-visuals-development official github A GitHub Copilot rule that gives the agent patterns for building Power BI custom visuals with React, D3.js and TypeScript. ★ 40,451repo stars

From the same set234

The whole set →
typescript-nodejs-nextjs-react-ui-css-cursorrules- A Cursor rule that pins down how the agent writes TypeScript, Next.js App Router, React and Tailwind code. Useful when generated components drift from your conventions. ★ 41,024repo stars typescript-nodejs-nextjs-app-cursorrules-prompt-fi Configures Cursor for Next.js App Router, TypeScript, Tailwind, and Shadcn UI. It enforces React Server Components and keeps client-side state minimal. ★ 41,024repo stars typescript-nodejs-nextjs-ai-cursorrules-prompt-fil This rule steers Cursor toward concrete code or direct explanations for TypeScript, Node.js, and Next.js projects with AI integration. ★ 41,024repo stars typescript-nextjs-supabase-cursorrules-prompt-file A Cursor rule that keeps TypeScript work on Next.js App Router and Supabase consistent: server components first, Shadcn UI, Tailwind. ★ 41,024repo stars typescript-nextjs-cursorrules-prompt-file This rule sets coding conventions for TypeScript and Next.js App Router, with guidance for React and Daisy UI with Tailwind. Use it to steer Cursor toward those patterns in a project. ★ 41,024repo stars typescript-llm-tech-stack-cursorrules-prompt-file Cursor rule for TypeScript projects integrating LLM stacks. Enforces functional programming, type aliases over interfaces, and strict library conventions. ★ 41,024repo stars typescript-expo-jest-detox-cursorrules-prompt-file A Cursor rule that points the assistant at TypeScript, React Native, Expo and mobile UI work. Useful when your app runs on Expo and you test it with Jest and Detox. ★ 41,024repo stars typescript-code-convention-cursorrules-prompt-file A Cursor rule that pins down TypeScript code style for Next.js App Router, React, Expo, tRPC and Tailwind projects. Useful when the agent writes code inconsistently. ★ 41,024repo stars

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor