# Routing and Navigation

### **Routing and Navigation**

**How routing works**

This project uses Next.js App Router. Most tools are accessed through dynamic routes under [`app/[slug]/page.tsx`](vscode-file://vscode-app/c:/Users/Syed%20Fahad/AppData/Local/Programs/Microsoft%20VS%20Code/bdd88df003/resources/app/out/vs/code/electron-browser/workbench/workbench.html), which means a single route pattern handles all 40+ tools.

For example:

* `/json-formatter` renders the JSON formatter tool
* `/base64-encoder` renders the Base64 encoder tool
* `/css-minifier` renders the CSS minifier tool

The `[slug]` is a placeholder that represents any tool identifier.

**Adding a new tool route**

You don't need to create individual route files. Instead:

1. Create your component in [`app/components/developmentToolsComponent/`](vscode-file://vscode-app/c:/Users/Syed%20Fahad/AppData/Local/Programs/Microsoft%20VS%20Code/bdd88df003/resources/app/out/vs/code/electron-browser/workbench/workbench.html)
2. Register it in `app/libs/developmentToolsConstant.tsx` with a slug
3. The route automatically works

The constants file acts as the source of truth. When you add an entry there, the tool becomes accessible at `/{slug}` automatically.

**Navigation and discovery**

Tools are listed on the homepage and in navigation automatically. The list comes from `developmentToolsConstant.tsx`, not hardcoded routes.

This means:

* No manual route editing needed
* Tools appear everywhere consistently
* Reordering or hiding tools is just a config change

**Special routes**

Some routes exist outside the dynamic pattern:

* `/` (homepage)
* `/[slug]/` (the catch-all for tools)

Keep tool-specific logic inside components, not in route handlers.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.betterbugs.io/contributing-to-betterbugs/design-of-our-code/routing-and-navigation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.