---
type: article
title: "Naming .tsx files"
slug: naming-tsx

description: "How should you name your `.tsx` files?"
image:
  name: "name-tsx.png"
  width: 2002
  height: 840

status: "published"
date: "2023-09-04T01:05:14.555Z"
tags: ["React", "typescript", "Next.js", "javascript", "jsx", "tsx"]
previousPostSlug: "useeffect-everything-you-need-to-know"
nextPostSlug: "use-context-auth"
---

| SPA (**Vite**)      | File-based routing framework (**Next.js**) |
| ------------------- | ------------------------------------------ |
| `DismissButton.tsx` | `dismiss-button.tsx`                       |

## How should you name your `.tsx` files?

Common naming conventions you might see:

- `DismissButton.tsx`
- `dismissButton.tsx`
- `dismiss_button.tsx`
- **`dismiss-button.tsx`**

## PascalCase

When your framework or dev tools **don't** use file based routing, so the file name has nothing to do with the url, then it usually makes a lot of sense to use **PascalCase**. That way the default export of a component matches the file name.

**DismissButton.tsx**

```tsx
export default function DismissButton() {
  return <button>Dismiss</button>
}
```

However, when your framework or dev tools **do** use file based routing, then it makes a lot of sense to use **kebab-case**. This is the case in Next.js, where the file name is used to determine the url.

## kebab-case

PascalCase, camelCase, or any case that potentially depends on distinguishing between uppercase and lowercase letters can be problematic in URLs. Most Unix-based web servers (not MacOS, but who uses MacOS as a web server anyway?) are case-sensitive, whereas some like Microsoft's IIS are not.

That leaves us with lowercase naming conventions, and kebab-case is popular and reliable. It's hard to find a reason **not** to use this case, so let's use it for our urls.

Next.js uses a file-system based router, which means that the names of our directories will appear as part of the url. So directory names will be kebab case. On top of that, the framework uses kebab-case for its `.tsx` file names, even when they don't appear as part of the url. One example in their docs is the [`not-found.tsx`](https://nextjs.org/docs/app/api-reference/file-conventions/not-found) page:

```tsx
// not-found.tsx
import Link from "next/link"

export default function NotFound() {
  return (
    <div>
      <h2>Not Found</h2>
      <p>Could not find requested resource</p>
      <Link href="/">Return Home</Link>
    </div>
  )
}
```

You can see the name of the file uses kebab-case even though the default export uses PascalCase.

Consistency is important within a project so it makes sense to keep all `.tsx` files in kebab-case, even when they don't represent an entire page. So here's an example of a route:

```
- 📁 app
  - 📁 create-post
    - 📄 page.tsx
    - 📄 not-found.tsx
    - 📄 create-post-form.tsx
    - 📄 submit-button.tsx
```

Each of these files would contain a react component as the default export, and remember that react components are PascalCase.

All of this only applies to `.tsx` files. Other files, including `.js` or `.ts` files, can use PascalCase or camelCase depending on your preference. For example, I default export a helper `calculateTotals` function in `/src/utils/calculateTotals.ts`.

## Summary

- Maintain consistency in your `.tsx` file naming for readability and maintainability.
- Use kebab-case with diretories and `.tsx` files when you are dealing with file-based routing.
- Use PascalCase when not dealing with file-based routing.
- Other file types can use PascalCase or camelCase based on your project's guidelines.