Layouts and Templates
Relevant source files
The following files were used as context for generating this wiki page:This document outlines the layout and templating structure of the TAF-SAF project, which is built using Next.js. The core of the application's UI structure is defined by the root layout, which wraps all page content, and individual page templates that define the content for specific routes. This system leverages Next.js App Router conventions, global CSS for theming, and Tailwind CSS for styling.
The primary files governing this structure are src/app/layout.tsx for the global application shell and src/app/page.tsx for the main landing page template. Styling is managed globally through src/app/globals.css, which sets up CSS variables for theming and integrates Tailwind CSS.
Root Layout
The root layout, defined in src/app/layout.tsx, serves as the main application shell. It sets up the <html> and <body> tags, loads global fonts, defines metadata, and renders child components, which are typically the page templates.
Sources: [src/app/layout.tsx](https://github.com/djanni974/TAF-SAF/blob/HEAD/src/app/layout.tsx)
Component Structure
The RootLayout component wraps all page content. It accepts a children prop, which corresponds to the content of the active page (e.g., the component exported from src/app/page.tsx).
This diagram illustrates how the RootLayout component encapsulates page content.
Sources: src/app/layout.tsx:25-35
Font Management
The project uses next/font to optimize and load the Geist font family. Two variations are loaded: Geist (sans-serif) and Geist_Mono (monospace). These are configured as CSS variables (--font-geist-sans and --font-geist-mono) and applied to the <body> tag, making them available globally throughout the application.
| Font Variable | Font Family | Purpose |
|---|---|---|
--font-geist-sans | Geist | Primary sans-serif font for UI text. |
--font-geist-mono | Geist_Mono | Monospace font, used for code elements. |
Sources: src/app/layout.tsx:2-15, src/app/layout.tsx:32, src/app/globals.css:10-11
Metadata
Default metadata for the application is defined in the layout.tsx file. This includes the site title and description, which are used for SEO and browser tab information.
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
Sources: src/app/layout.tsx:17-20
Home Page Template
The main landing page is defined by the Home component in src/app/page.tsx. This file serves as the template for the / route and demonstrates the use of layout, styling, and components within the application.
Sources: [src/app/page.tsx](https://github.com/djanni974/TAF-SAF/blob/HEAD/src/app/page.tsx)
Page Structure
The Home component uses a CSS Grid layout (grid grid-rows-[20px_1fr_20px]) to structure its content into three main sections: a top spacer, the main content area, and a footer. The main content and footer are vertically and horizontally centered.
This diagram shows the high-level structure of the Home page component.
Sources: src/app/page.tsx:5-104
Styling and Components
The page is styled using Tailwind CSS utility classes. It makes extensive use of flex and grid for layout. It also demonstrates how to consume the global fonts defined in the root layout by referencing the CSS variables:
<div class="... font-[family-name:var(--font-geist-sans)]">...</div>
<code class="... font-[family-name:var(--font-geist-mono)]">...</code>
Sources: src/app/page.tsx:5, src/app/page.tsx:13
The page utilizes the next/image component for optimized image loading, including logos for Next.js and Vercel.
Sources: src/app/page.tsx:8-12, src/app/page.tsx:38-44
Global Styling and Theming
Global styles and theme variables are defined in src/app/globals.css. This file sets up the foundation for the application's look and feel, including support for light and dark color schemes.
Theme Variables
CSS custom properties (variables) are defined at the :root level for background and foreground colors. A prefers-color-scheme: dark media query overrides these variables for dark mode.
| Variable | Light Mode Value | Dark Mode Value |
|---|---|---|
--background | #ffffff | #0a0a0a |
--foreground | #171717 | #ededed |
These variables, along with the font variables, are mapped to Tailwind's theme using the @theme directive.
Sources: src/app/globals.css:3-19
Style Application Flow
The following diagram illustrates how styles are defined and applied from the CSS file to the React components.
Project Configuration
The project's structure and behavior are also influenced by several configuration files.
| File | Purpose | Key Details |
|---|---|---|
package.json | Defines dependencies and scripts. | Includes next, react, tailwindcss. The dev script uses --turbopack. |
tsconfig.json | TypeScript compiler options. | Defines the path alias @/* to point to ./src/*. |
next.config.ts | Next.js configuration. | Currently empty, but available for future configuration. |
README.md | Project documentation. | Confirms the project is bootstrapped with create-next-app. |
Sources: package.json:5-10, 14-21, tsconfig.json:19-21, next.config.ts:3-7, README.md:1-3
Summary
The TAF-SAF project employs a standard yet powerful layout and templating system based on the Next.js App Router. A single RootLayout provides the global HTML structure and font loading, while individual page components like Home define the content for specific routes. Styling is managed through a combination of global CSS for theming (with dark mode support) and Tailwind CSS for component-level styling, creating a cohesive and maintainable frontend architecture.