Gourav.io Next.js Style Guide

Personal site & blog development conventions using Next.js, TypeScript, Tailwind CSS, and MDX.

Core Technologies

**TypeScript** - Use latest v5.6+ features when working with types

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

**Next.js v14** - Modern framework features and patterns

**Tailwind CSS v3.4** - Utility-first styling (no dark mode classes)

**Node.js v20** - Built-in fetch for API calls

Code Style & Structure

TypeScript & React

Use function declaration syntax for React components

Prefer `type` over `interface` for component definitions

Use latest TypeScript v5.6+ features when working with types

Avoid React namespace types (no `React.` prefix)

Named exports only - never use `export default` for components

**Example:**

```typescript

type ButtonProps = {

label: string;

onClick: () => void;

}

export function Button({ label, onClick }: ButtonProps) {

// Component logic

}

```

Component Patterns

Use early returns instead of ternary operators in component logic

Create separate components instead of nesting components

Keep component structure flat and readable

**Good:**

```typescript

export function UserProfile({ user }: UserProfileProps) {

if (!user) {

return <EmptyState />

}

return <ProfileCard user={user} />

}

```

**Avoid:**

```typescript

export function UserProfile({ user }: UserProfileProps) {

return user ? <ProfileCard user={user} /> : <EmptyState />

}

```

Async Operations

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

Leverage Node.js built-in `fetch()` instead of third-party HTTP libraries

**Example:**

```typescript

async function fetchPosts() {

try {

const response = await fetch('/api/posts')

const data = await response.json()

return data

} catch (error) {

console.error('Failed to fetch posts:', error)

}

```

Styling with Tailwind

Generate Tailwind utility classes without dark mode variants

Focus on light mode styling only

General Principles

1. **Preserve comments** - When refactoring code, keep existing comments intact

2. **Minimal dependencies** - Avoid third-party libraries if native solutions exist

3. **Readability over optimization** - Prefer linear, readable code over micro-optimizations

4. **Modern approaches** - Choose latest patterns when multiple solutions exist

5. **Descriptive naming** - Use clear, descriptive names for variables, functions, and components

6. **Latest versions** - Always use the most recent stable versions of libraries

Library Preferences

**HTTP requests**: Node.js built-in `fetch()` (no axios, got, etc.)

**Date handling**: Native JavaScript Date or Temporal API (avoid moment.js)

**State management**: React hooks (avoid unnecessary state libraries)

Code Organization

Flat component hierarchy

Separate files for separate concerns

Named exports for better refactoring

Type definitions near usage

This guide optimizes for developer experience, code maintainability, and modern JavaScript ecosystem standards while building content-driven sites with Next.js.

Gourav.io Next.js Style Guide

Gourav.io Next.js Style Guide

Core Technologies

Code Style & Structure

TypeScript & React

Component Patterns

Async Operations

Styling with Tailwind

General Principles

Library Preferences

Code Organization

Reviews (0)