Next.js Web App Interfaces
Relevant source files
The following files were used as context for generating this wiki page:
The Next.js web application serves as the primary user interface and entry point for the AI Code Reviewer system. It is responsible for handling user authentication through GitHub OAuth, managing repository onboarding, and serving as the ingestion point for GitHub webhooks. The application is built using the Next.js App Router, utilizing React Server Components for data fetching and a modular architecture that separates HTTP handling from business logic.
Sources: apps/web/README.md, apps/web/app/page.tsx, README.md:16-17
Core Architecture and Layout
The application utilizes a centralized layout structure and a standalone output configuration for optimized deployment. It leverages shared UI components from the @repo/ui package and follows a strict separation of concerns where route handlers only parse input and delegate work to underlying services.
Global Configuration and Layout
The RootLayout defines the base HTML structure, applying the Geist Sans and Geist Mono fonts and global CSS styles. The application is configured to output in standalone mode, which creates a self-contained production environment suitable for Docker containers.
The configuration explicitly transpiles internal workspace packages like @repo/ui and @repo/services because they are shipped as raw TypeScript.
Sources: apps/web/app/layout.tsx:12-28, apps/web/next.config.js:10-33
Dependency Injection
The web app uses manual dependency injection through a getContainer() function. This wires together Prisma, pg-boss, and various services, allowing route handlers to access backend resources without complex DI frameworks.
Sources: README.md:54-58, apps/web/app/onboarding/page.tsx:40
User Authentication and Landing
The landing page (/) serves as the entry point for unauthenticated users, providing a call-to-action to sign in via GitHub.
Authentication Flow
The application uses session-based authentication. If a valid session is detected on the home page, the user is automatically redirected to the onboarding interface.
Error Handling
The landing page includes a dedicated error messaging system to handle various GitHub OAuth failures, such as state mismatches or expired sign-ins.
| Error Key | Display Message |
|---|---|
state_mismatch | Sign-in expired or was tampered with. Try again. |
github_error | GitHub rejected the sign-in. Check your app credentials. |
auth_failed | You tried to sign in with an installation you don’t own. |
Sources: apps/web/app/page.tsx:16-45
Repository Onboarding and Management
The /onboarding page is the management hub where users select which repositories the AI should review. It lists all GitHub installations (Personal or Organization) associated with the user.
Onboarding Logic
- Installation Fetching: The page retrieves all installations for the authenticated user.
- Repository Listing: For each active installation, it fetches accessible repositories via the GitHub API.
- State Management: It identifies which repositories are already "active" in the system's database.
Enable/Disable Actions
The interface uses separate forms for enabling and disabling repositories to maintain tight payloads and narrow server action logic. Enabling a repository passes metadata like the GitHub ID, owner, name, and default branch to the backend.
Sources: apps/web/app/onboarding/page.tsx:34-129, apps/web/app/onboarding/page.tsx:162-205
Webhook Ingestion Pipeline
The web app acts as the entry point for GitHub webhooks via the /api/webhooks/github route. This route is designed for high-throughput and low latency, responding quickly to GitHub while offloading work to background workers.
Ingestion Sequence
The route performs several critical security and integrity checks before accepting a payload:
- Size Guard: Enforces a 25 MB payload cap.
- Signature Verification: Validates the
x-hub-signature-256header using HMAC-SHA256 to ensure the request originated from GitHub. - Deduplication: Stores the
x-github-deliveryID in theWebhookDeliverytable. If a delivery has already been processed, it returns a success status immediately. - Job Enqueueing: Sends a
webhook.processjob to thepg-bossqueue.
Summary
The Next.js Web App Interfaces provide the essential management layer for the AI Code Reviewer. By combining high-performance webhook ingestion with a React-based management dashboard, the system ensures that repository configuration is user-friendly while maintaining the security and scalability required for handling large-scale GitHub events. Its architecture emphasizes asynchronous processing, ensuring that the web UI remains responsive while heavy operations like AI analysis are handled by the background worker.
Sources: README.md:40-45, apps/web/app/onboarding/page.tsx:112-115