.cursorrules Cursor AI prompt file for TypeScript & Next.js

TypeScript Next.js .cursorrules prompt file

Elie Steinbock

NEW

TypeScript Next.js .cursorrules prompt file

You are an expert in TypeScript, Node.js, Next.js App Router, React, Prisma, PostgreSQL, Turborepo, Shadcn UI, Radix UI and Tailwind.

Write concise, technical TypeScript code with accurate examples.
Use functional and declarative programming patterns; avoid classes.
Prefer iteration and modularization over code duplication. But if you don't have a proper abstraction then writing similar code twice is fine.
Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
Structure files: exported component, subcomponents, helpers, static content, types.
Use kebab case for route directories (e.g., api/hello-world/route). Use PascalCase for components (eg. components/Button.tsx)
Shadcn components are in components/ui. All other components are in components/.
Colocate files in the folder they're used. Unless the component can be used in many places across the app. Then it can be placed in the components folder.
We use Turborepo with pnpm workspaces.
We have one app called web in apps/web.
We have packages in the packages folder.
Favor named exports for components.
Use TypeScript for all code.
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
Use Shadcn UI and Tailwind for components and styling.
Implement responsive design with Tailwind CSS; use a mobile-first approach.
Use next/image package for images.
For API get requests to server use the swr package. Example:
```typescript
const searchParams = useSearchParams();
const page = searchParams.get("page") || "1";
const { data, isLoading, error } = useSWR<PlanHistoryResponse>(
/api/user/planned/history?page=${page}
);
```
Use the Loading component. Example:
```tsx
<Card>
<LoadingContent loading={isLoading} error={error}>
{data && <MyComponent data={data} />}
</LoadingContent>
</Card>
```
If we're in a server file, you can fetch the data inline.
For mutating data, use Next.js server actions.
Use isActionError with toastError and toastSuccess. Success toast is optional. Example:
```typescript
import { toastError, toastSuccess } from "@/components/Toast";
const onSubmit: SubmitHandler<TestRulesInputs> = useCallback(async (data) => {
const result = await testAiCustomContentAction({ content: data.message });
if (isActionError(result)) {
toastError({
title: "Error testing email",
description: result.error,
});
} else {
toastSuccess({ description: "Saved!" });
}
}, []);
```
Implement type-safe server actions with proper validation.
Define input schemas using Zod for robust type checking and validation.
Handle errors gracefully and return appropriate responses.
Ensure all server actions return the Promise`` type
Use React Hook Form with Zod for validation. The same validation should be done in the server action too. Example:
```tsx
export const ProcessHistory = () => {
const {
register,
handleSubmit,
formState: { errors, isSubmitting },
} = useForm<ProcessHistoryOptions>({
resolver: zodResolver(processHistorySchema),
});
const onSubmit: SubmitHandler<ProcessHistoryOptions> = useCallback(
async (data) => {
const result = await processHistoryAction(data.email);
handleActionResult(result, Processed history for ${data.email});
},
[]
);
return (
<form className="max-w-sm space-y-4" onSubmit={handleSubmit(onSubmit)}>
`<Input
type="email"
name="email"
label="Email"
registerProps={register("email", { required: true })}
error={errors.email}
/>`
<Button type="submit" loading={isSubmitting}>
Process History
</Button>
</form>
);
};
```
This is the format of a server action. Example:
```typescript
export async function processHistoryAction(unsafeData: ProcessHistoryOptions): Promise<ServerActionResponse> {
const session = await auth();
const userId = session?.user.id;
if (!userId) return { error: "Not logged in" };
const data = processHistorySchema.safeParse(unsafeData);
if (!data.success) return { error: "Invalid data" };
// perform action
await processHistory();
revalidatePath('/history');
}
```

stack:

No items found.

TypeScript Next.js .cursorrules prompt file

Elie Steinbock

About .cursorrules prompt file

What you can build

Enterprise Dashboard Builder: A platform for creating custom enterprise dashboards using Next.js, Tailwind, and Shadcn UI. Users can integrate their data sources through Node.js APIs and visualize data using various widgets.
Task Management System: Develop a collaborative task management system leveraging Next.js and Prisma with PostgreSQL for handling tasks, projects, and teams efficiently with real-time collaboration features.
E-commerce Platform Starter Kit: A robust e-commerce starter kit built with TypeScript, React, and Next.js. It supports product listings, a shopping cart, and secure checkout processes, integrated with Shadcn UI for design.
Content Management System (CMS): A customizable CMS for developers, built using Next.js and Turborepo, featuring drag-and-drop page builders, and direct database connections with Prisma for PostgreSQL.
Tailwind CSS Helper Tool: A web-based tool to generate responsive Tailwind CSS classes dynamically, with a preview option to see changes in real time and export options for integration into existing projects.
SaaS Template Using Next.js: An out-of-the-box SaaS application template that includes user authentication, subscription management, and billing, utilizing Stripe API and hosted on a serverless infrastructure.
Online Learning Platform: Build an online education platform utilizing React and Next.js for course videos, quizzes, and user progress tracking with data managed by Prisma and PostgreSQL.
Automated Deployment Checker: A Node.js app to check and verify deployment statuses across different environments, utilizing GitHub Actions for continuous integration and deployment feedback.
Personal Finance Tracker: Develop a mobile-first personal finance tracker with a Next.js frontend and a Node.js backend, allowing users to manage budgets, track spending, and generate reports.
Real-time Chat Application: Create a real-time chat application using Next.js with WebSockets support, featuring user authentication, message storage, and notifications, styled with Shadcn UI and Tailwind.

Benefits

Prioritize concise TypeScript examples with accurate use of functional and declarative patterns, avoiding classes.
Implement type-safe server actions using Zod for input validation; ensure proper error handling and response.
Optimize component architecture by favoring named exports, colocating files, and using Shadcn UI with Tailwind.

Synopsis

Developers working with TypeScript, Node.js, and React ecosystems can build scalable, responsive web applications using Next.js, Prisma, PostgreSQL, and modern UI components with the provided guidelines.

Overview of .cursorrules prompt

The .cursorrules file provides guidelines and best practices for developers using technologies like TypeScript, Node.js, Next.js, React, Prisma, and PostgreSQL. It emphasizes writing concise and technical TypeScript code by using functional and declarative programming patterns, descriptive variable names, and consistent file structures. It suggests using Turborepo, handling API requests with swr, and implementing UI components with Shadcn UI and Tailwind CSS. The file also recommends using React Hook Form and Zod for validation and advises using named exports for components. Additionally, it provides examples for server actions and error handling, focusing on type safety and proper validation with schemas.

TypeScript Next.js .cursorrules prompt file

TypeScript Next.js .cursorrules prompt file

TypeScript Next.js .cursorrules prompt file

About .cursorrules prompt file

What you can build

Benefits

Synopsis

Overview of .cursorrules prompt

Tags

.cursorrules file Cursor AI Python FastAPI API

Elixir Code Guidelines .cursorrules prompt file

FastAPI .cursorrules prompt file guide

Flask-RESTful JWT RESTX .cursorrules prompt file

Next.js React TypeScript .cursorrules prompt file

Python Pytest Typer .cursorrules prompt file

Next.js Tailwind CSS Obsidian Plugin .cursorrules prompt file

Next.js TypeScript Clerk Stripe Vercel Setup .cursorrules prompt file

React TypeScript Care Project .cursorrules prompt file

Elixir Code Guidelines .cursorrules prompt file

.cursorrules file Cursor AI Python FastAPI API

SvelteKit TailwindCSS TypeScript .cursorrules prompt file

Python Flask JSON Guide .cursorrules prompt file

Angular Novo Elements .cursorrules prompt file

ES Module Node.js Guidelines .cursorrules prompt file

Cursor Tip

new tutorial: how to get the most out of Cursor, the AI-powered

I built a Slack clone in just 5 minutes using OpenAI's o1-previe

What can an 8-year-old build in 45 minutes with the assistance o

Cursor Tip

Create a Chrome Extension Fast: Cursor AI Tutorial

Build ChatGPT with Python: Cursor AI Tutorial Guide

Build AI Voice Notes App: Cursor AI Tutorial Guide

Cursor AI Tutorial: Easy Loading Page with Shadcn Components