Good naming is one of the most underrated skills in frontend development. Whether you’re building a small React app or a large-scale Next.js project, consistent and meaningful naming makes your codebase easier to read, maintain, and scale.

This guide covers the most important naming conventions used by professional React and Next.js developers—with examples and explanations that you can apply immediately.

---

1. Component Names Should Use PascalCase

React components must start with a capital letter and use PascalCase:

✔️ Good

function UserProfile() { ... }
export default UserProfile;

❌ Avoid

function userprofile() { ... }
function user_Profile() { ... }

Why?
React considers lowercase tags as HTML elements. Uppercase = custom component.

Next.js note

Pages and components both follow the same rule:

• /app/profile/page.js → exports default function Page() {}
• Components in /components → UserCard.jsx

---

2. Props That Are Functions Should Start with on

This convention mirrors native DOM events (onClick, onChange, etc.):

✔️ Good

<MyButton onClick={handleClick} />

❌ Avoid

<MyButton clickFunction={handleClick} />

Inside the component:

function MyButton({ onClick }) {
  return <button onClick={onClick}>Click</button>;
}

This makes the component API predictable and readable.

---

3. Boolean Props Should Start with is / has / can

Boolean props are easier to understand when phrased like natural language:

✔️ Good

<Modal isOpen={true} />
<Button isDisabled={false} />
<UserCard hasAvatar />

❌ Avoid

<Modal open={true} />
<Button disabledFlag={false} />

This improves readability and clearly signals a boolean value.

---

4. Local Event Handlers Should Use handle Prefix

Inside components, event handlers follow this rule:

• Prop: onClick
• Internal function: handleClick

function Signup() {
  function handleSubmit(e) {
    e.preventDefault();
  }

  return <form onSubmit={handleSubmit}>...</form>;
}

This pairing (onX + handleX) is a standard across the React ecosystem.

---

5. Files and Folders Should Follow Consistent Casing

Recommended: PascalCase for components, camelCase for utilities

components/
  UserCard.jsx
  Header.jsx
lib/
  formatDate.js
hooks/
  useAuth.js

Next.js note

Inside the app/ directory:

• Folder names are lowercase: /dashboard/settings
• Component files use PascalCase: Sidebar.jsx
• Route segment files use lowercase: page.js, layout.js, loading.js

---

6. Custom Hooks Must Start with use

React relies on the naming to detect Hooks.

✔️ Good

function useUserData() { ... }

❌ Avoid

function fetchUserDataHook() {}

This is not optional—React’s linting depends on it.

---

7. State Setters Use the Pattern const [value, setValue] = useState()

This is universal in React:

const [count, setCount] = useState(0);
const [user, setUser] = useState(null);

Don’t invent your own:

❌ Avoid

const [count, changeCount] = useState(0);

---

8. Avoid Abbreviations and Overly Generic Names

✔️ Good

const selectedUserId
const totalPrice

❌ Avoid

const sUID
const x

Short names save seconds; clear names save hours.

---

9. Pages and API Routes in Next.js Should Use Clear Resource Names

Recommended pattern:

app/
  users/
    page.js
  users/[id]/
    page.js
api/
  users/
    route.js

Avoid vague names such as /stuff or /things.

Good RESTful naming leads to predictable routing.

---

10. Avoid “Magical” Names—Prefer Explicit and Descriptive

Prefer:

function calculateDiscount()
function fetchCurrentUser()

Avoid:

function doThing()
function process()

Your future self will thank you.

---

Quick Reference Cheat Sheet

Area	Convention	Example
Component names	PascalCase	UserProfile
Function props	Start with on	onSelect, onUpdate
Internal handlers	Start with handle	handleSelect
Boolean props	is, has, can	isActive, hasRole
Custom hooks	Start with use	useCart
State names	[value, setValue]	[email, setEmail]
Component files	PascalCase filename	UserCard.jsx
Utility files	camelCase	formatNumber.js
Next.js route files	lowercase	page.js, layout.js
Avoid	Abbreviations, vague names	data, x, tmp

---

Conclusion

Naming conventions are not about rules—they’re about creating a shared language within your codebase.

By following these conventions:

• Your React components become easier to use
• Your Next.js structure becomes predictable
• Your team writes code that feels unified
• You reduce bugs introduced by misunderstanding

Whether you’re building your first app or architecting large systems, these naming patterns will help you write code that is readable, scalable, and a joy to work with.