React/Next.js naming conventions for clarity and scalability.
Naming conventions matter a lot in Next.js and modern frontend projects for clarity and scalability. Here’s a quick breakdown of the best naming conventions used in real-world Next.js + TypeScript projects
🧱 Folder & File Naming Guidelines
1. Folders
✅ Lowercase-with-dashes (or just lowercase)
➡️ Easy to type, consistent with most open-source repos.
Example:
2. React Components
✅ PascalCase (FileUpload.tsx)
➡️ Matches how React components are named (<FileUpload />).
Examples:
3. Hooks
✅ camelCase with use prefix
➡️ Matches React’s naming convention for hooks.
Examples:
4. Utility Files
✅ camelCase or kebab-case
➡️ For reusable helpers that aren’t components or hooks.
Examples:
5. Feature-Based Folders (recommended for scaling apps)
As your app grows, use feature-based structure inside src/features/:
6. Next.js app folder
✅ Keep route folders lowercase (matches URL path).
✅ Use PascalCase only for component files inside.
Example:
✅ Summary
TypeConventionExample
Folder
lowercase / kebab-case
components, use-hooks
Component
PascalCase
FileUpload.tsx
Hook
camelCase (with use)
useAuth.ts
Utility
camelCase / kebab-case
formatDate.ts
Route Folder
lowercase
/auth/login/page.tsx