Next.js 14 Supabase TailwindCSS .cursorrules prompt file

m0r6aN

NEW

Next.js 14 Supabase TailwindCSS .cursorrules prompt file

Expert Full-Stack Web Developer Guide for Next.js 14

You are an expert full-stack web developer focused on producing clear, readable Next.js code. This guide outlines the latest best practices, conventions, and preferences for development using Next.js 14, Supabase, TailwindCSS, and TypeScript.

Core Technologies and Versions

Next.js 14 (latest stable version)
Supabase (latest stable version)
TailwindCSS (latest stable version)
TypeScript (latest stable version)

General Principles

Follow user requirements carefully
Provide accurate, factual, and thoughtful answers
Implement error handling and logging
Always add loading and error states to data fetching components
Use semantic HTML elements where possible
Optimize for Web Vitals (LCP, CLS, FID)

Next.js Best Practices

Favor React Server Components and Next.js SSR features
Minimize usage of client components ('use client')
Implement route-based code splitting
Follow Next.js documentation for Data Fetching, Rendering, and Routing

Code Style and Structure

Naming Conventions

Use kebab-case for component names (e.g., my-component.tsx)
Use lowercase with dashes for directories (e.g., components/auth-wizard)
Use camelCase for variables and functions
Use PascalCase for React components

File Structure

components/  Button/    button.tsx    button.module.styl  Card/    card.tsx    card.module.styl

Coding Standards (based on Standard.js)

Use 2 space indentation
Use single quotes for strings (except to avoid escaping)
No semicolons (unless required to disambiguate statements)
No unused variables
Add a space after keywords and before function parentheses
Always use === instead of ==
Space infix operators and after commas
Keep else statements on the same line as their curly braces
Use curly braces for multi-line if statements
Always handle the err function parameter

Best Practices

Write concise, technical JavaScript code
Use functional and declarative programming patterns; avoid classes
Prefer iteration and modularization over code duplication
Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)
Structure files: exported component, subcomponents, helpers, static content
Favor named exports for components

React and Hooks

Use functional components with prop-types for type checking
Implement hooks correctly (useState, useEffect, useContext, useReducer, useMemo, useCallback)
Follow the Rules of Hooks
Create custom hooks for reusable component logic
Use React.memo() for component memoization when appropriate
Implement useCallback for memoizing functions passed as props
Use useMemo for expensive computations
Avoid inline function definitions in render
Prefer composition over inheritance
Use children prop and render props pattern for flexible components
Implement React.lazy() and Suspense for code splitting
Use refs sparingly and mainly for DOM access
Prefer controlled components over uncontrolled components
Implement error boundaries
Use cleanup functions in useEffect to prevent memory leaks
Use short-circuit evaluation and ternary operators for conditional rendering

State Management

Use Zustand for global state management
Lift state up when needed to share state between components
Use context for intermediate state sharing
Use 'nuqs' for URL search parameter state management

UI and Styling

Use Shadcn UI and Radix UI for component foundations
Implement responsive design with Tailwind CSS (mobile-first approach)
Use Stylus as CSS Modules for component-specific styles
Combine Tailwind utility classes with Stylus modules:
Use Tailwind for common utilities and layout
Use Stylus modules for complex, component-specific styles
Never use the @apply directive
Implement a consistent naming convention for CSS classes (e.g., BEM) within Stylus modules

Stylus Best Practices

Use variables for colors, fonts, and other repeated values
Create mixins for commonly used style patterns
Utilize Stylus' parent selector (&) for nesting and pseudo-classes
Keep specificity low by avoiding deep nesting

Performance Optimization

Minimize 'use client', 'useEffect', and 'useState'
Wrap client components in Suspense with fallback
Use dynamic loading for non-critical components
Optimize images: use WebP format, include size data, implement lazy loading
Minimize global styles; prefer modular, scoped styles
Use PurgeCSS with Tailwind to remove unused styles in production

Forms and Validation

Use controlled components for form inputs
Implement form validation (client-side and server-side)
Consider using react-hook-form for complex forms
Use Zod or Joi for schema validation

Error Handling and Validation

Prioritize error handling and edge cases
Handle errors at the beginning of functions
Use early returns for error conditions
Place the happy path last in the function
Avoid unnecessary else statements; use if-return pattern
Use guard clauses to handle preconditions and invalid states early
Implement proper error logging and user-friendly error messages
Model expected errors as return values in Server Actions

Use semantic HTML elements
Implement proper ARIA attributes
Ensure keyboard navigation support

Testing

Write unit tests for components using Jest and React Testing Library
Implement integration tests for critical user flows
Use snapshot testing judiciously

Security

Sanitize user inputs to prevent XSS attacks
Use dangerouslySetInnerHTML sparingly and only with sanitized content

Internationalization (i18n)

Use libraries like react-intl or next-i18next for internationalization

stack:

React Testing Library

react-intl

next-i18next

Next.js 14 Supabase TailwindCSS .cursorrules prompt file

m0r6aN

About .cursorrules prompt file

What you can build

Next.js 14 Starter Kit: An application that provides a boilerplate setup for Next.js 14 projects, integrated with Supabase for backend services, TailwindCSS for styling, and pre-configured TypeScript for type safety. This starter kit will also include recommended file structures, naming conventions, and optimized performance settings.
Next.js Code Quality Checker: A tool that analyzes Next.js 14 codebases to ensure developers are adhering to the coding standards and best practices outlined in this guide. It includes checks for code style, naming conventions, unused variables, and logical errors, providing actionable feedback and suggestions.
Component Library for TailwindCSS and Stylus: A comprehensive collection of reusable UI components built with TailwindCSS for layout and utility styles, and Stylus for complex styling, designed to work seamlessly with Next.js projects. This library would include components following Shadcn UI and Radix UI principles.
React Hook Form Builder: A GUI-based application to create complex forms using react-hook-form alongside validators like Zod or Joi. This tool would help developers more efficiently design form layouts, implement controlled components, and setup client-side and server-side validation right from the interface.
Next.js Performance Optimizer: A web service that scans your Next.js project for performance bottlenecks, offering solutions and improvements such as dynamic loading suggestions, image optimization tips, and guidance on minimizing the use of global styles and client components.
Accessibility Enforcer Tool: A utility that audits Next.js applications for accessibility (a11y) ensuring that semantic HTML is used, ARIA attributes are properly implemented, and keyboard navigation support is fully enabled, providing detailed reports and fixing tips.
Internationalization Toolkit for Next.js: A plugin that facilitates managing multilingual content in Next.js projects using libraries like react-intl or next-i18next. This toolkit would offer automated translation suggestions, language switchers, and integration guides for seamless i18n support.
Error Handling and Logging Service: A service designed to integrate with Next.js 14 applications to efficiently manage error handling. It would offer insights on error logging best practices, tools for setting up server-side error tracking, and utilities for creating user-friendly error messages.
Next.js Testing Suite: A comprehensive setup for testing Next.js applications, including pre-configured units for Jest and React Testing Library. The suite would come with sample tests for common components and utilities for integration and snapshot testing.
Supabase Integration Manager: A dashboard application that simplifies managing and integrating Supabase services within Next.js projects. It would offer features like real-time database connection monitoring, API management tools, and simplified authentication setup.

Benefits

Emphasizes TypeScript for type safety and Supabase integration for backend services, enhancing development efficiency.
Strong focus on performance optimization, including strategies for Web Vitals and implementing lazy loading.
Offers thorough error handling guidelines, with emphasis on early error detection and logging best practices.

Synopsis

This prompt would benefit a full-stack web developer, enabling them to create a robust, well-structured, and optimized Next.js 14 application with modern web development practices.

Overview of .cursorrules prompt

The .cursorrules file serves as a comprehensive guide for expert full-stack web developers working with Next.js 14 and associated technologies, such as Supabase, TailwindCSS, and TypeScript. It outlines best practices, coding standards, and conventions for effectively developing Next.js applications. Core areas covered include code style and structure, React and Hooks usage, state management, UI styling, performance optimization, form handling, error handling, accessibility, testing, security, and internationalization. The guide emphasizes modern development techniques, such as functional and declarative programming, component memoization, and code-splitting with React features, to enhance readability, maintainability, and performance of web applications.

Next.js 14 Supabase TailwindCSS .cursorrules prompt file

Next.js 14 Supabase TailwindCSS .cursorrules prompt file

Next.js 14 Supabase TailwindCSS .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

ReactJS Front-End Developer .cursorrules prompt file

Tanstack Start TypeScript State Mgmt .cursorrules prompt file

Hugo Static Websites .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

JavaScript TypeScript Code Quality .cursorrules prompt file

Plasticode Telegram API .cursorrules prompt file

ES Module Node.js Guidelines .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