# 🛠️ Building your first page

Adding a new page to your project is super simple. All you need to do is create a new folder inside the `src/` directory. The **folder name becomes the path**, and each page folder must include a `page.tsx` file.

***

## 📁 Example Structure

```
src/
    dashbord/
        page.tsx
    users/
        page.tsx
        editUser/
            page.tsx
```

## 🌐 Available Routes

Based on the structure above, your project will have these routes:

* `localhost:5173/dashboard`
* `localhost:5173/users`
* `localhost:5173/users/editUser`

***

## 🧩 Adding Extra Files

If your page needs helper functions or components, you can add folders **within** the page directory.\
To avoid these folders becoming routes, prefix their names with an underscore `_`.

```
src/
    dashboard/
        page.tsx
        _functions/
            loadData.ts
            removeData.ts
        _components/
            userCard.tsx
        editUser/
            page.tsx
```

## 📌 How This Works

* Only folders that contain a `page.tsx` file are treated as routes.
* Folders like `_functions/` and `_components/` are ignored by the router but still accessible in your imports.
* The underscore `_` is just a naming convention—it helps you (and other developers) instantly recognize folders that **aren’t** routes.

***

## ✅ **Summary**

* Create a folder in `src/` to make a new page.
* Add a `page.tsx` file to define the route content.
* Use `_`-prefixed folders to organize your components and logic inside each page folder.