Environment Variables

Relevant source files

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

• next.config.ts
• package.json
• src/app/globals.css
• src/app/layout.tsx
• src/app/page.tsx
• README.md

This document outlines the use of variables for configuration within the TAF-SAF Next.js application. While the project does not currently define traditional environment variables (e.g., in a .env file), it extensively uses CSS Custom Properties (variables) for theming and styling, which serve a similar purpose of abstracting configuration values from the code. The project is a standard Next.js application, and its structure supports the use of file-based environment variables as per Next.js conventions.

The primary form of environmental configuration found is for styling, including colors and fonts. These are defined globally and applied throughout the application, allowing for centralized control over the application's look and feel. The development environment is initiated via an npm script, which is the standard entry point for loading environment-specific configurations in a Next.js project.

Application Execution and Configuration

The project's execution is managed through scripts defined in package.json. The primary script for development loads the Next.js application, which in turn processes configuration files and applies environmental settings.

Sources: package.json, next.config.ts

Scripts

The package.json file contains scripts to run, build, and lint the application. The dev script is used to start the development server.

Script	Command	Description
dev	next dev --turbopack	Runs the application in development mode with Turbopack for faster performance.
build	next build	Creates an optimized production build of the application.
start	next start	Starts a production server after the application has been built.
lint	next lint	Runs the Next.js linter to check for issues in the code.

Sources: package.json:5-10

Next.js Configuration

The next.config.ts file is the central place for Next.js configuration. Although currently empty, it is where environment variables can be exposed to the browser via the env property or other build-time configurations can be set.

// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
};

export default nextConfig;

Sources: next.config.ts:1-7

Styling and Theming Variables

The application uses CSS Custom Properties for theming. These variables are defined in src/app/globals.css and are used to maintain a consistent color scheme and font selection across the application.

Color Scheme Variables

Two primary color variables are defined for background and foreground, with different values for light and dark color schemes.

This diagram shows how the color scheme is determined and applied.

The values are defined as follows:

Variable	Light Mode Value	Dark Mode Value	Description
--background	#ffffff	#0a0a0a	The main background color of the page.
--foreground	#171717	#ededed	The main text and element color.

Sources: src/app/globals.css:3-8, src/app/globals.css:16-22

Font Variables

The application uses next/font to load the Geist Sans and Geist Mono fonts. In src/app/layout.tsx, these fonts are assigned to CSS variables, which are then used in src/app/globals.css and src/app/page.tsx to style text.

This process is illustrated below:

Font Definition and Application

1. Font Loading: The Geist and Geist_Mono fonts are imported and configured in the root layout.

   // src/app/layout.tsx:2-14
   import { Geist, Geist_Mono } from "next/font/google";
   
   const geistSans = Geist({
     variable: "--font-geist-sans",
     subsets: ["latin"],
   });
   
   const geistMono = Geist_Mono({
     variable: "--font-geist-mono",
     subsets: ["latin"],
   });
   

   Sources: src/app/layout.tsx:2-14

2. Variable Assignment: The variable property in the font configuration makes the font family available as a CSS variable. These variables are then applied to the <body> tag.

   // src/app/layout.tsx:27-29
   <body
     className={`${geistSans.variable} ${geistMono.variable} antialiased`}
   >
   

   Sources: src/app/layout.tsx:27-29

3. CSS Consumption: The global stylesheet consumes these variables to create theme-level font variables.

   /* src/app/globals.css:11-12 */
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
   

   Sources: src/app/globals.css:11-12

4. Component Usage: Components like the main page use these variables (often via Tailwind CSS utility classes) to apply the correct font family.

   // src/app/page.tsx:14-16
   <ol className="... font-[family-name:var(--font-geist-mono)]">
     ...
   </ol>
   

   Sources: src/app/page.tsx:14-16