Next.js Configuration

Relevant source files

The following files were used as context for generating this wiki page:

• next.config.ts
• package.json
• tsconfig.json
• tailwind.config.ts
• components.json
• README.md

The Next.js configuration for KernelForge defines the build environment, optimization strategies, and deployment parameters required to run a web-based dashboard as a native mobile application. The system primarily relies on a static export strategy to ensure compatibility with the Capacitor bridge, which packages the application for Android (ARM64) environments.

Sources: README.md:16-19, next.config.ts:4-7

Build and Output Strategy

The project configures Next.js to generate a standalone static site. This allows the application to function without a Node.js server, facilitating native mobile deployment via Capacitor.

Static Export

The configuration explicitly sets the output mode to export. This instructs Next.js to produce a collection of HTML, CSS, and JavaScript files during the build process instead of a dynamic server-side bundle.

Sources: next.config.ts:5, README.md:17-19

Build Scripts

The project defines several execution scripts to manage different stages of the development and production lifecycle.

Script	Command	Purpose
dev	next dev --turbopack -p 9002	Starts a development server using Turbopack on port 9002.
build	NODE_ENV=production next build	Compiles a production-ready application.
build:static	next build	Standard build command used for static generation.
lint	next lint	Executes ESLint to identify code quality issues.
typecheck	tsc --noEmit	Validates TypeScript types without generating output files.

Sources: package.json:5-15

Dependency and Environment Management

The configuration integrates several core technologies to enable AI-powered troubleshooting and kernel development features.

The diagram above illustrates how the Next.js framework serves as the foundation for the static export which is eventually consumed by Capacitor for Android deployment.

Sources: package.json:20-55, README.md:17-20

Compiler Options

The TypeScript configuration (tsconfig.json) and Next.js settings prioritize build speed and flexibility during development.

• Error Handling: The build process ignores TypeScript and ESLint errors to prevent failed deployments during experimental phases.
• Path Aliases: Custom aliases (e.g., @/*) are defined to simplify imports from the src directory.
• Module Resolution: The system uses bundler resolution and targets ES2017.

Sources: next.config.ts:8-12, tsconfig.json:3-23, components.json:11-17

Image Optimization and Assets

Because the application is exported as a static site for mobile use, standard Next.js server-side image optimization is disabled.

• Unoptimized Images: The unoptimized flag is set to true because a static export cannot utilize the Next.js Image Optimization API.
• Remote Patterns: Specific hostnames are whitelisted for external asset loading, including placehold.co, images.unsplash.com, and picsum.photos.

Sources: next.config.ts:13-35

Theming and UI Configuration

The project uses Tailwind CSS integrated with Shadcn UI to manage the visual appearance of the dashboard.

Tailwind Extensions

The configuration extends the default Tailwind theme to include custom font families and a specific color palette suited for a "dark mode" kernel development environment.

Category	Key Identifiers	Value/Description
Fonts	body, headline, code	Inter, Space Grotesk, Source Code Pro
Colors	primary, secondary	HSL variables defining the neon-green aesthetic
Layout	sidebar	Specific widths and colors for navigation components

Sources: tailwind.config.ts:11-70, components.json:5-10

Component Architecture

The application uses a specific directory structure for UI components, as defined in components.json:

1. UI Components: Located in @/components/ui.
2. Dashboard Components: Located in @/components/dashboard.
3. Hooks: Located in @/hooks.

Sources: components.json:11-17

CI/CD and Release Workflow

Next.js configuration supports an automated pipeline via GitHub Actions. When a version tag is pushed, the system performs the following sequence:

1. Static Payload Compilation: Next.js generates the static site.
2. Injection: The payload is injected into the Android Capacitor wrapper.
3. Native Build: The system builds and signs the arm64-v8a APK.
4. Distribution: The APK is published to the GitHub Releases page.

Sources: README.md:25-30

Summary

The Next.js configuration in KernelForge is centered around a static export model (output: 'export') to facilitate native Android execution. By disabling server-side features like image optimization and ignoring build-time errors, the project prioritizes a streamlined build process for local and CI/CD environments. This setup allows developers to leverage modern web technologies (React 19, Tailwind CSS) while deploying a functional standalone APK for kernel development.

Sources: next.config.ts:4-35, package.json:5-15, README.md:16-30