TypeScript React Next.js Best Practices

A comprehensive skill for writing clean, modern TypeScript code with React, Next.js, and Tailwind CSS. Focuses on code readability, modern patterns, and maintainable architecture.

Core Technologies

**TypeScript v5.6+**: Use latest type system features

**React v18**: Function declaration syntax for components

**Next.js v14**: Modern App Router patterns

**Tailwind CSS v3.4**: Utility-first styling

**Node.js v20**: Built-in fetch and modern APIs

Code Style Guidelines

TypeScript Conventions

Prefer `type` over `interface` for React component props

Use latest TypeScript 5.6+ features when working with types

Avoid using the full `React.` namespace prefix for types

Use descriptive names for variables, functions, and components

React Component Patterns

**Use function declarations** for components:

```tsx

type UserCardProps = {

name: string;

email: string;

}

export function UserCard({ name, email }: UserCardProps) {

// Component logic

}

```

**Do NOT use default exports** for React components:

```tsx

// ❌ Avoid

export default function MyComponent() {}

// ✅ Prefer

export function MyComponent() {}

```

Component Structure

**Early returns over ternaries**: Use guard clauses instead of nested ternary operators

**No nested components**: Always define components at the module level

**Preserve existing comments**: Keep documentation when refactoring

**Early return pattern:**

```tsx

export function UserProfile({ user }: UserProfileProps) {

if (!user) {

return <EmptyState />;

}

if (user.suspended) {

return <SuspendedMessage />;

}

return <ProfileContent user={user} />;

}

```

Async Patterns

Use `async/await` instead of `.then().catch()`

Use Node.js built-in `fetch()` over third-party HTTP libraries

```tsx

// ✅ Preferred

async function fetchUser(id: string) {

const response = await fetch(`/api/users/${id}`);

const user = await response.json();

return user;

}

// ❌ Avoid

function fetchUser(id: string) {

return fetch(`/api/users/${id}`)

.then(res => res.json())

.catch(err => console.error(err));

}

```

Tailwind CSS

Do not generate dark mode classes automatically

Use utility-first approach with descriptive class names

Prefer Tailwind utilities over custom CSS when possible

Dependencies

Avoid third-party libraries when native solutions exist

Use Node.js built-in APIs (fetch, crypto, fs) over external packages

Only add dependencies when they provide clear value

Code Quality

**Readability first**: Prioritize linear, easy-to-follow code over micro-optimizations

**Descriptive naming**: Variables, functions, and components should be self-documenting

**Modern approaches**: Choose newer patterns when multiple solutions exist

**Preserve context**: Keep existing comments during refactoring

Implementation Checklist

When writing or refactoring code:

[ ] Use TypeScript v5.6+ features for types

[ ] Write React components as function declarations

[ ] Use `type` instead of `interface` for props

[ ] Avoid default exports

[ ] Use early returns instead of ternaries

[ ] Extract nested components to module level

[ ] Use async/await for asynchronous code

[ ] Use built-in fetch() for API calls

[ ] Write descriptive variable/function names

[ ] Preserve existing comments

[ ] Avoid dark mode Tailwind classes

[ ] Check if native solution exists before adding dependencies

Example Component

```tsx

type ProductCardProps = {

id: string;

title: string;

price: number;

imageUrl: string;

}

export function ProductCard({ id, title, price, imageUrl }: ProductCardProps) {

const [loading, setLoading] = useState(false);

async function handleAddToCart() {

setLoading(true);

const response = await fetch('/api/cart', {

method: 'POST',

headers: { 'Content-Type': 'application/json' },

body: JSON.stringify({ productId: id })

});

if (!response.ok) {

setLoading(false);

return;

}

setLoading(false);

}

return (

<h3 className="mt-2 text-lg font-semibold">{title}</h3>

<p className="text-gray-600">${price.toFixed(2)}</p>

<button

onClick={handleAddToCart}

disabled={loading}

className="mt-4 w-full rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 disabled:opacity-50"

{loading ? 'Adding...' : 'Add to Cart'}

</button>

</article>

);

}

```

TypeScript React Next.js Best Practices

TypeScript React Next.js Best Practices

Core Technologies

Code Style Guidelines

TypeScript Conventions

React Component Patterns

Component Structure

Async Patterns

Tailwind CSS

Dependencies

Code Quality

Implementation Checklist

Example Component

Reviews (0)