Routing and Navigation

How users move through the application

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, 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/

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.