Routing and Navigation
How users move through the application
Last updated
How users move through the application
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:
Create your component in app/components/developmentToolsComponent/
Register it in app/libs/developmentToolsConstant.tsx with a slug
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.
Last updated