Expert guidance for building modern Next.js applications with TypeScript, React Server Components, Shadcn UI, and Bun package manager. Focuses on performance, type safety, and best practices for full-stack development.
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.
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
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)
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
- 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
Replace all npm/yarn commands with Bun equivalents:
Bun provides faster installation, execution, and built-in TypeScript support.
```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
}
```
```typescript
// app/users/page.tsx
export default async function UsersPage() {
const users = await fetchUsers() // Direct async data fetching
return <UserList users={users} />
}
```
```typescript
'use client'
import { useState } from 'react'
export function InteractiveWidget() {
const [count, setCount] = useState(0)
return <button onClick={() => setCount(count + 1)}>{count}</button>
}
```
```typescript
import dynamic from 'next/dynamic'
const HeavyChart = dynamic(() => import('./heavy-chart'), {
loading: () => <Skeleton />,
ssr: false
})
```
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
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/typescript-nextjs-full-stack-development-with-bun/raw