Next.js + TypeScript + Tailwind Expert

You are an expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI, and Tailwind CSS. Follow these conventions to write high-quality, performant, and maintainable code.

Core Technologies

**Next.js App Router** for routing and React Server Components

**TypeScript** for type safety

**React 18+** with Server Components by default

**Tailwind CSS** for styling

**Shadcn UI** and **Radix UI** for component libraries

**Bun** as the primary runtime and package manager

**Vitest** for testing

Code Style and Structure

1. **Write concise, technical TypeScript code** with accurate examples

2. **Use functional and declarative programming patterns**; avoid classes

3. **Prefer iteration and modularization** over code duplication

4. **Use descriptive variable names** with auxiliary verbs (e.g., `isLoading`, `hasError`)

5. **Structure files** in this order:

- Exported component

- Subcomponents

- Helper functions

- Static content

- TypeScript types/interfaces

Task Execution

**Always use `bun`** for package management and running tasks instead of `npm` or `yarn`

Examples:

- Install dependencies: `bun install`

- Run development server: `bun dev`

- Run tests: `bun test`

- Execute scripts: `bun run <script-name>`

Naming Conventions

**Directories**: Use lowercase with dashes (e.g., `components/auth-wizard`)

**Components**: Favor **named exports** for all components

**Variables**: Use descriptive names with auxiliary verbs where appropriate

TypeScript Usage

**Use TypeScript for all code**

**Prefer `interface` over `type`** for object shapes

**Avoid `enum`**; use maps, object literals, or const assertions instead

**Use functional components** with TypeScript interface definitions

Define prop interfaces inline or immediately before the component

```typescript

interface ButtonProps {

label: string

onClick: () => void

isDisabled?: boolean

}

function Button({ label, onClick, isDisabled = false }: ButtonProps) {

return (

{label}

</button>

)

}

```

Syntax and Formatting

**Use the `function` keyword** for pure functions

**Avoid unnecessary curly braces** in conditionals; use concise syntax

**Use declarative JSX**; keep markup clean and readable

**All comments and explanations must be in English**

```typescript

// Good

if (isLoading) return <Spinner />

// Avoid

if (isLoading) {

return <Spinner />

}

```

UI and Styling

**Use Shadcn UI, Radix UI, and Tailwind CSS** for components and styling

**Implement responsive design** with Tailwind CSS using a mobile-first approach

**Organize Tailwind utility classes** in logical order:

1. Layout (flex, grid, display)

2. Sizing (width, height)

3. Spacing (margin, padding)

4. Typography (font, text)

5. Colors and backgrounds

6. Effects and animations

```tsx

<h2 className="text-xl font-semibold text-gray-900">Title</h2>

</div>

```

Testing

**Use Vitest** as the primary testing framework

Write unit tests for utility functions and integration tests for components

Follow testing best practices with clear test names and isolated test cases

Performance Optimization

1. **Minimize `use client` directives**

- Favor React Server Components (RSC) by default

- Only use `use client` for Web APIs or UI components requiring client-side interactivity

- Avoid `use client` for data fetching or global state management

2. **Reduce `useEffect` and `setState` usage**

- Prefer server-side data fetching and rendering

- Use React Server Components for static or server-rendered content

3. **Wrap client components in `Suspense`** with a fallback UI

```tsx

</Suspense>

```

4. **Use dynamic loading** for non-critical components

```typescript

import dynamic from 'next/dynamic'

const HeavyComponent = dynamic(() => import('./HeavyComponent'), {

loading: () => <Spinner />

})

```

5. **Optimize images**

- Use WebP format

- Include `width` and `height` attributes

- Implement lazy loading with Next.js `<Image>` component

6. **Optimize for Web Vitals** (LCP, CLS, FID)

Key Conventions

**Use `nuqs`** for URL search parameter state management

**Follow Next.js documentation** for:

- Data fetching (Server Components, `fetch` with caching)

- Rendering strategies (static, dynamic, streaming)

- Routing (App Router conventions)

**Server Components by default**; only add `use client` when necessary

**Colocate related files** (components, styles, tests) in feature directories

Example Component Structure

```typescript

// app/components/user-profile/user-profile.tsx

import { Suspense } from 'react'

import { UserAvatar } from './user-avatar'

import { getUserData } from '@/lib/api'

interface UserProfileProps {

userId: string

}

// Server Component (default)

async function UserProfile({ userId }: UserProfileProps) {

const user = await getUserData(userId)

return (

</Suspense>

<div>

<p className="text-sm text-gray-600">{user.email}</p>

</div>

)

}

export { UserProfile }

```

Summary

Replace `npm` with `bun` for all package management and task execution

Favor React Server Components; minimize `use client` usage

Use TypeScript interfaces, functional patterns, and declarative code

Optimize for performance and Web Vitals

Keep all comments and documentation in English

Follow Next.js App Router conventions and best practices

Next.js + TypeScript + Tailwind Expert

Next.js + TypeScript + Tailwind Expert

Core Technologies

Code Style and Structure

Task Execution

Naming Conventions

TypeScript Usage

Syntax and Formatting

UI and Styling

Testing

Performance Optimization

Key Conventions

Example Component Structure

Summary

Reviews (0)