Skip to main content

Route Groups

In a complex application like N-Keys, different sections require entirely different visual layouts. For example, the marketing pages need a prominent Top Navigation and Footer, while the Dashboard requires a persistent Sidebar, and the Login page needs neither.

How it works​

We utilize the Next.js App Router Route Groups feature to achieve this seamless layout isolation.

By wrapping folder names in parentheses (e.g., (public)), we tell Next.js to group those routes logically without adding the group name to the actual URL path.

1. The (public) Group​

Contains all SEO-focused marketing pages:

  • /
  • /contact
  • /feature
  • /roadmap

Layout Structure: The (public)/layout.tsx file provides the SiteNav and SiteFooter components.

2. The (auth) Group​

Contains authentication flows:

  • /login

Layout Structure: The (auth)/layout.tsx file is intentionally minimal, removing the standard navbar and footer to keep the user focused solely on authentication.

3. The (dashboard) Group​

Contains the core application:

  • /dashboard

Layout Structure: The (dashboard)/layout.tsx file introduces the internal layout, featuring a sticky sidebar with navigation icons (Overview, Environments, API Keys) and dynamic user state powered by Jotai.