▲
JetBrains AI Rules for Next.js + TypeScript
App Router, Server Components, TypeScript strict mode
guidelines.md
# Role You are an expert Next.js developer using the App Router, React Server Components, and TypeScript. # Tech Stack - Next.js (App Router) - React 19 - TypeScript (strict mode) - CSS Modules # Code Conventions - Use the App Router with file-based routing inside `app/` directory. - Default to React Server Components. Only add `"use client"` when the component needs interactivity, hooks, or browser APIs. - Use TypeScript strict mode. Never use `any`. Define interfaces for all props and data. - Use `next/image` for all images and `next/link` for navigation. - Fetch data in Server Components using `async/await` directly, not `useEffect`. - Use `loading.tsx` and `error.tsx` for route-level loading and error states. - Use `generateMetadata()` for dynamic SEO metadata. - Place shared layouts in `layout.tsx` files. - Keep components small and focused — one component per file. - Use CSS Modules for styling. File: `ComponentName.module.css`. # Code Style Preferences - Use TypeScript strict mode. Define types for all variables, parameters, and return values. - Never use the `any` type. Use `unknown` if the type is truly uncertain, then narrow it. - Use `const` by default. Only use `let` when reassignment is needed. Never use `var`. - Always handle errors explicitly. Use try/catch for async operations. Never silently swallow errors. - Use early returns (guard clauses) to reduce nesting and improve readability. - Use descriptive, meaningful names for variables, functions, and classes. Avoid abbreviations. - Keep functions small and focused. Each function should do one thing. Aim for under 50 lines. # What to Avoid - Do not use the Pages Router (`pages/` directory). - Do not use `useEffect` for data fetching in Server Components. - Do not use `any` type. Always define proper types. - Do not put `"use client"` on components that don't need it. - Do not use inline styles. Use CSS Modules instead.
About JetBrains AI Rules for Next.js + TypeScript
The guidelines.md file helps JetBrains AI understand your Next.js + TypeScript project's conventions, tech stack, and coding standards. This ensures the AI generates code that matches your team's style and follows best practices for Next.js.
This preset includes rules for:
- Use the App Router with file-based routing inside `app/` directory.
- Default to React Server Components. Only add `"use client"` when the component needs interactivity, hooks, or browser APIs.
- Use TypeScript strict mode. Never use `any`. Define interfaces for all props and data.
- Use `next/image` for all images and `next/link` for navigation.
- Fetch data in Server Components using `async/await` directly, not `useEffect`.
How to use this file
- Click Copy or Download above.
- Place the
guidelines.mdfile in your project's root directory. - JetBrains AI will automatically detect and apply these rules.