.cursorrules Cursor AI: TypeScript, Node.js, Next.js Guide

TypeScript Node.js Next.js .cursorrules prompt file

Elie Steinbock

NEW

TypeScript Node.js 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.
We have Next.js server actions in the apps/web/utils/actions folder. Eg. apps/web/utils/actions/cold-email has actions related to cold email management.
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 how you do a text area. Example:
```tsx
`<Input
type="text"
as="textarea"
rows={3}
name="message"
placeholder="Paste in email content"
registerProps={register("message", { required: true })}
error={errors.message}
/>`
```
This is the format of a server action. Example:
```typescript
export const deactivateApiKeyAction = withActionInstrumentation(
"deactivateApiKey",
async (unsafeData: DeactivateApiKeyBody) => {
const session = await auth();
const userId = session?.user.id;
if (!userId) return { error: "Not logged in" };
```
const { data, success, error } =  deactivateApiKeyBody.safeParse(unsafeData);if (!success) return { error: error.message };await prisma.apiKey.update({  where: { id: data.id, userId },  data: { isActive: false },});revalidatePath("/settings");
```
}
);
```

stack:

TypeScript Node.js Next.js .cursorrules prompt file

Elie Steinbock

About .cursorrules prompt file

What you can build

Component Library Generator: A platform offering customizable UI components using Shadcn UI and Tailwind, empowering developers to generate reusable components following specific naming conventions and folder structures.
Next.js Project Boilerplate: Automatically generate a Next.js project setup with a predefined folder structure including apps/web, packages, and server actions, fully integrated with TypeScript, Prisma, and Turborepo.
Form Builder with Validation: An app that allows users to create forms using React Hook Form and Zod, ensuring type-safe validation synchronized across client and server, making form creation efficient and error-resistant.
API Call Manager: A tool that leverages swr for data fetching in Next.js apps, providing a dashboard interface to manage API requests and responses, including error handling and loading states.
Responsive Design Assistant: A web app utilizing Tailwind CSS to visually design responsive interfaces in a mobile-first approach, including integration with Shadcn UI components for cohesive styling across devices.
Server Action Scaffold Tool: A service that generates templates for Next.js server actions with type safety using Zod, aligning with pre-defined examples for error handling, validation, and response consistency.
Toast Notification Service: An easy-to-use solution for adding error and success toast notifications utilizing toastError and toastSuccess, customizable for any application adhering to the guide’s example structure.
Database Schema Converter: Transform Prisma models into PostgreSQL schemas, ensuring seamless integration within a Node.js environment while maintaining updates with Turborepo workflows.
Image Optimization Platform: A utility built around next/image for optimizing and managing images in Next.js apps, focusing on performance and best practices in various loading conditions.
Static Content Management: A microservice for managing and deploying static content files with guidelines for file placement and naming, improving organizational consistency across repositories.

Benefits

Integrate Turborepo with pnpm workspaces; structure with apps and packages folders.
Utilize Shadcn UI and Tailwind for UI components; implement responsive, mobile-first design.
Use Zod and React Hook Form for type-safe validation both client-side and server-side.

Synopsis

Developers building a full-stack application with a modern web tech stack like TypeScript, Node.js, Next.js, React, Prisma, PostgreSQL, can create scalable, type-safe, and well-structured applications, benefiting from the provided guidelines to improve code quality and maintainability.

Overview of .cursorrules prompt

The .cursorrules file provides guidelines for a development environment utilizing TypeScript, Node.js, Next.js, and React with various supporting libraries such as Prisma, PostgreSQL, Turborepo, Shadcn UI, Radix UI, and Tailwind. It emphasizes writing concise and accurate TypeScript code, using functional and declarative programming patterns, and favoring code modularization. It specifies best practices for file structuring, naming conventions, type safety, and error handling. The file also outlines the use of specific tools and libraries for tasks like API requests, server actions, and validation, promoting a consistent and efficient development workflow.

TypeScript Node.js Next.js .cursorrules prompt file

TypeScript Node.js Next.js .cursorrules prompt file

TypeScript Node.js Next.js .cursorrules prompt file

About .cursorrules prompt file

What you can build

Benefits

Synopsis

Overview of .cursorrules prompt

Tags

React TypeScript Care Project .cursorrules prompt file

JavaScript CSS HTML Obsidian .cursorrules prompt file

Tanstack Start TypeScript State Mgmt .cursorrules prompt file

Node React Tailwind Guide .cursorrules prompt file

Shopify Polaris Prisma .cursorrules prompt file

.cursorrules file Cursor AI Python FastAPI API

Python FastAPI Scalable API .cursorrules prompt file

Flask-RESTful JWT RESTX .cursorrules prompt file

Cursor AI React TypeScript Shadcn UI .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

ES Module Node.js Guidelines .cursorrules prompt file

Next.js TypeScript .cursorrules prompt file

Optimize Rell Blockchain Code .cursorrules prompt file

Cursor Tip

Here is a quick example of leveraging the .cursorrules file (sys

Cursor Tip

Cursor Tip

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