Next.js Configuration
Relevant source files
The following files were used as context for generating this wiki page:
The Next.js configuration for the cooltools project defines the environment, build settings, and runtime behaviors of the phone comparison platform. This configuration encompasses the core framework settings, TypeScript integration, middleware security policies, and global styling and layout definitions.
As a project bootstrapped with create-next-app, it utilizes Next.js 15.5.4 features, including the App Router architecture and Turbopack for optimized development and build performance.
Sources: cooltools/README.md:1-5, cooltools/package.json:20
Core Framework Configuration
The central configuration file for the Next.js application provides a foundation for extending framework behavior.
Next Config
The next.config.ts file exports a NextConfig object. In its current state, it serves as a placeholder for project-specific overrides such as environment variables, image domain whitelisting, or experimental features.
Sources: cooltools/next.config.ts:1-5
Build and Development Scripts
The project utilizes specific CLI commands to manage the lifecycle of the application, incorporating port 5000 as the default for local development and production starts.
| Script | Command | Purpose |
|---|---|---|
dev | next dev --turbopack --port 5000 | Starts development server with Turbopack |
build | next build --turbopack | Compiles the application for production |
start | next start --port 5000 | Runs the compiled production build |
lint | eslint | Executes static code analysis |
Sources: cooltools/package.json:5-11
Middleware and Security
The application implements a middleware layer to enforce security policies and handle request/response transformations globally.
Security Headers
The middleware.ts file intercepts requests to apply standard security headers to all non-static and non-api routes. This includes protection against MIME-type sniffing, clickjacking, and cross-site scripting (XSS).
The diagram shows how the middleware filters requests to apply specific security headers before returning the response.
Sources: cooltools/middleware.ts:5-18
Middleware Configuration
The middleware is configured with a matcher to exclude internal Next.js assets and API routes, ensuring performance is not impacted for static resources.
Sources: cooltools/middleware.ts:19-21
TypeScript and Path Aliasing
The project uses a strict TypeScript configuration to ensure type safety across the App Router and library modules.
Compiler Options
The tsconfig.json defines how the TypeScript compiler handles the codebase. Notably, it includes a path alias @/* mapping to the root directory ./*, allowing for cleaner import statements throughout the application.
| Option | Value | Purpose |
|---|---|---|
target | ES2017 | Target ECMAScript version |
moduleResolution | bundler | Optimized for modern bundlers |
strict | true | Enables all strict type-checking options |
paths | {"@/*": ["./*"]} | Root path aliasing |
Sources: cooltools/tsconfig.json:3-23
Layout and Global Styling
The Next.js configuration extends into the UI layer via the Root Layout and global CSS.
Font Optimization
The application utilizes next/font/google to load and optimize the Geist and Geist Mono font families. These are injected into the HTML body as CSS variables.
Sources: cooltools/app/layout.tsx:6-18
Global Metadata
The configuration includes static metadata used for SEO and browser tab titles, centralizing the platform's identity.
Sources: cooltools/app/layout.tsx:20-23
Tailwind CSS Integration
The project integrates Tailwind CSS via the @import "tailwindcss" directive in globals.css. It defines a custom theme that maps CSS variables (like fonts and background colors) to Tailwind utilities.
The diagram illustrates the flow of CSS variables from the global stylesheet into the Tailwind theme configuration.
Sources: cooltools/app/globals.css:1-15
Summary
Next.js configuration in this project establishes a modern development environment using TypeScript and Next.js 15. It prioritizes security through middleware-injected headers, performance via Turbopack, and maintainability through path aliasing and centralized font management. The configuration ensures a consistent behavior across development and production environments by standardizing ports and build scripts.