Next.js Component Naming Conventions: Best Practices for File and Component Names

Are you building with Next.js and wondering about the best way to name your files? Let's cut to the chase and explore the recommended conventions that will make your codebase more maintainable.

TL;DR

• Use lowercase kebab-case for file names (user-profile.tsx)
• Keep PascalCase for component names (function UserProfile())
• Stay consistent across your project
• Follow Next.js App Router conventions for folder names

Why Kebab-Case is the Way to Go

1. Cross-Platform Compatibility

# Works everywhere
/components/user-profile.tsx

# Might cause issues
/components/UserProfile.tsx  # Case sensitivity problems on Linux

1. URL-Friendly Structure

// File: pages/blog-posts/[slug].tsx
// URL: /blog-posts/my-awesome-post

1. Next.js App Router Alignment

app/
├── dashboard/           # /dashboard
│   ├── settings/       # /dashboard/settings
│   │   └── page.tsx
│   └── analytics/      # /dashboard/analytics
│       └── page.tsx
└── profile/            # /profile
    └── page.tsx

Practical Implementation

Component Files

// user-profile.tsx
export default function UserProfile() {
  return (
    <div className="profile-container">
      <h1>User Profile</h1>
      {/* Component content */}
    </div>
  )
}

// Usage in other files
import UserProfile from './user-profile'

Feature Organization

features/
├── auth/
│   ├── login-form.tsx
│   ├── auth-provider.tsx
│   └── auth-hooks.ts
└── dashboard/
    ├── data-table.tsx
    ├── chart-widget.tsx
    └── dashboard-utils.ts

API Routes

// app/api/user-data/route.ts
import { NextResponse } from 'next/server'

export async function GET() {
  return NextResponse.json({ message: 'Hello from API' })
}

Common Pitfalls to Avoid

❌ Don't mix naming conventions:

components/
├── UserProfile.tsx     # Inconsistent
├── data-table.tsx     # Correct
└── NavigationBar.tsx  # Inconsistent

✅ Do maintain consistency:

components/
├── user-profile.tsx
├── data-table.tsx
└── navigation-bar.tsx

Quick Reference Guide

File Names

# ✅ Good
data-table.tsx
user-profile.tsx
auth-provider.tsx

# ❌ Avoid
DataTable.tsx
userProfile.tsx
auth_provider.tsx

Component Names

// ✅ Good
export default function DataTable() {
  // ...
}

// ❌ Avoid
export default function dataTable() {
  // ...
}

Why This Matters

Routing Consistency: Next.js uses file-based routing, making lowercase names crucial for URL predictability.
System Compatibility: Prevents case-sensitivity issues between Windows and Linux.
Team Collaboration: Makes code more predictable and easier to navigate.

Real-World Project Structure

src/
├── components/
│   ├── common/
│   │   ├── button.tsx
│   │   └── input.tsx
│   └── features/
│       ├── user-profile.tsx
│       └── data-table.tsx
├── hooks/
│   ├── use-auth.ts
│   └── use-theme.ts
├── utils/
│   ├── api-helpers.ts
│   └── date-formatters.ts
└── pages/
    ├── api/
    │   └── user-data.ts
    ├── blog/
    │   └── [slug].tsx
    └── index.tsx

Quick Setup Tip
Add an .editorconfig file to enforce consistency:

# .editorconfig
root = true

[*]
end_of_line = lf
insert_final_newline = true
charset = utf-8
indent_style = space
indent_size = 2

[*.{js,jsx,ts,tsx}]
trim_trailing_whitespace = true

Conclusion

Following these naming conventions will help you build more maintainable Next.js applications. Remember: consistency is key, and kebab-case is your friend in the modern web development landscape.

Resources

• Next.js Documentation
• TypeScript Guidelines