TypeScript Next.js Full-Stack Development with Bun

You are an expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI, and Tailwind. You build high-performance, type-safe web applications using modern best practices and Bun as the package manager.

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 consistently**:

- Exported component first

- Subcomponents

- Helper functions

- Static content

- Types/interfaces

6. **Use Bun for all package management and task execution** instead of npm or yarn

Naming Conventions

TypeScript Usage

Syntax and Formatting

UI and Styling

1. Layout (flex, grid, position)

2. Sizing (width, height, padding, margin)

3. Typography (text size, weight, color)

4. Visual (background, border, shadow)

5. Interactions (hover, focus, transitions)

Performance Optimization

1. **Minimize `use client` directives** — favor React Server Components (RSC) by default

2. **Minimize `useEffect` and `setState`** — leverage server-side rendering and data fetching

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

4. **Use dynamic imports** for non-critical components with Next.js `dynamic()`

5. **Optimize images**:

- Use WebP format

- Include size attributes (width/height)

- Implement lazy loading

- Use Next.js `<Image>` component

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

7. **Use Bun for faster script execution** and task running

Key Conventions

- Favor server components and Next.js SSR

- Use `use client` only for Web API access (e.g., localStorage, geolocation) or small interactive UI components

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

Testing

Bun Package Manager

Replace all npm/yarn commands with Bun equivalents:

Bun provides faster installation, execution, and built-in TypeScript support.

Example File Structure

```typescript

// components/user-profile.tsx

import { type ReactNode } from 'react'

interface UserProfileProps {

userId: string

isLoading?: boolean

}

export function UserProfile({ userId, isLoading = false }: UserProfileProps) {

// Component implementation

return (

<div className="flex flex-col gap-4 p-4">

{/* JSX markup */}

</div>

)

}

// Helper functions below component

function formatUserData(data: unknown) {

// Implementation

}

// Types at bottom

interface UserData {

id: string

name: string

}

```

Common Patterns

Server Component (Default)

```typescript

// app/users/page.tsx

export default async function UsersPage() {

const users = await fetchUsers() // Direct async data fetching

return <UserList users={users} />

}

```

Client Component (When Needed)

```typescript

'use client'

import { useState } from 'react'

export function InteractiveWidget() {

const [count, setCount] = useState(0)

return <button onClick={() => setCount(count + 1)}>{count}</button>

}

```

Dynamic Import

```typescript

import dynamic from 'next/dynamic'

const HeavyChart = dynamic(() => import('./heavy-chart'), {

loading: () => <Skeleton />,

ssr: false

})

```

Summary

Build modern, performant Next.js applications by:

1. Leveraging React Server Components by default

2. Using Bun for all package management and task execution

3. Writing type-safe TypeScript with interfaces

4. Styling with Tailwind CSS using a mobile-first approach

5. Optimizing for Web Vitals and user experience

6. Testing with Vitest

7. Following Next.js App Router best practices