# 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`](https://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/`](https://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.