Next.js Routing & Layouts
Relevant source files
The following files were used as context for generating this wiki page:
- truelens-app/src/app/layout.tsx
- truelens-app/src/app/page.tsx
- truelens-app/src/components/Navbar.tsx
- truelens-app/src/components/Footer.tsx
- truelens-app/src/app/scan/page.tsx
- truelens-app/src/app/results/[id]/page.tsx
- truelens-app/src/app/dashboard/page.tsx
- truelens-app/src/app/api/v1/scans/route.ts
Introduction
TrueLens utilizes the Next.js App Router architecture to provide a seamless, AI-powered content verification experience. The system is built around a centralized layout that maintains a consistent user interface—including navigation and footer elements—across various functional routes such as content scanning, results visualization, and document management.
The routing system manages transitions between the marketing homepage, the core analysis engine, and administrative dashboards. It employs dynamic routing for individual scan results and utilizes API routes to proxy requests between the frontend and the underlying FastAPI backend.
Sources: truelens-app/src/app/layout.tsx, truelens-app/src/app/page.tsx, truelens-app/src/app/api/v1/scans/route.ts
Root Layout Architecture
The RootLayout serves as the entry point for the entire application, defining the global HTML structure, metadata, and core UI components that persist across page transitions.
Global Configuration
The layout enforces a dark theme and integrates global styles via globals.css. It also injects essential web fonts (Inter and JetBrains Mono) through the <head> tag to maintain typography standards.
Persistent Components
The application structure follows a standard vertical stack:
- Navbar: Sticky top navigation component providing access to main modules.
- Main Content: A flexible container (
main) with apadding-top: 64pxto account for the fixed navbar height. - Footer: A site-wide footer containing brand information and navigational links.
The diagram shows how the RootLayout wraps all application pages with persistent UI elements.
Sources: truelens-app/src/app/layout.tsx:1-41
Page Routing Structure
TrueLens uses file-system based routing located within the src/app directory. Each subdirectory represents a URL segment containing a page.tsx file.
Static and Dynamic Routes
The application implements both static routes for primary features and dynamic routes for resource-specific data fetching.
| Route Path | Description | File Reference |
|---|---|---|
/ | Landing page with platform overview | src/app/page.tsx |
/scan | Interface for submitting URLs or text for analysis | src/app/scan/page.tsx |
/dashboard | Overview of user scan activity and statistics | src/app/dashboard/page.tsx |
/documents | Document verification and management portal | src/app/documents/page.tsx |
/results/[id] | Dynamic route for viewing specific scan analysis | src/app/results/[id]/page.tsx |
/developers | API documentation and integration guides | src/app/developers/page.tsx |
Sources: truelens-app/src/app/page.tsx, truelens-app/src/app/scan/page.tsx, truelens-app/src/app/results/[id]/page.tsx, truelens-app/src/app/dashboard/page.tsx
Dynamic Routing Logic
For the results page, TrueLens utilizes dynamic segments. The id is extracted from the URL parameters using the use hook to retrieve specific scan data from the API.
export default function ResultsPage({ params }: { params: Promise<{ id: string }> }) {
const { id } = use(params);
// ... fetch logic using id
}
Sources: truelens-app/src/app/results/[id]/page.tsx:15-17
Navigation and Flow
Navigation is managed primarily through the Navbar component and the useRouter hook for programmatic transitions.
Client-Side Navigation
The Navbar uses the usePathname hook to determine the active route and apply highlight styles to the corresponding link. It supports both desktop and mobile views, using framer-motion for an animated mobile menu.
Programmatic Redirection
The scanning workflow demonstrates the transition from input to results. Upon a successful POST request to the analysis endpoint, the useRouter hook redirects the user to the dynamic results path.
This sequence illustrates the flow from content submission to dynamic result viewing.
Sources: truelens-app/src/app/scan/page.tsx:43-62, truelens-app/src/components/Navbar.tsx:21-45
API Routing & Backend Proxying
TrueLens implements API routes within the App Router (using route.ts files) to act as a proxy layer. This architecture abstracts the internal FastAPI backend URL from the client.
Scan API Route (/api/v1/scans)
The scan route handles two primary HTTP methods:
- POST: Validates the incoming content type (URL or Text) and proxies the request to
${BACKEND_URL}/api/v1/scans/. It maps snake_case responses from the backend (e.g.,trust_score) to camelCase (e.g.,trustScore) for the frontend. - GET: Fetches a list of all scans and aggregated statistics for the dashboard.
Sources: truelens-app/src/app/api/v1/scans/route.ts:5-76
Summary
The routing and layout system of TrueLens provides a robust foundation for AI content verification. By leveraging Next.js layouts, the application maintains a persistent brand identity and navigation structure. The combination of static paths for feature modules, dynamic paths for data-driven results, and proxy API routes for backend communication ensures a secure and performant user experience across the platform.