Home Page Component
Relevant source files
The following files were used as context for generating this wiki page:The Home Page component, defined in src/app/page.tsx, serves as the main landing page for this Next.js application. It is a React Server Component responsible for rendering the initial user interface. The page is structured with a main content area and a footer, featuring key branding elements like the Next.js and Vercel logos, and provides instructional text and primary navigation links to external resources such as the Next.js documentation and deployment options on Vercel.
The component's styling is managed by Tailwind CSS, with global styles and CSS variables defined in src/app/globals.css. The overall page structure and font definitions are inherited from the root layout defined in src/app/layout.tsx.
Architecture and Structure
The Home component is a default export function that returns JSX, forming the page's DOM structure. The root element is a div that employs a CSS Grid layout to organize its children into three rows, creating a distinct header space, a main content area, and a footer.
Sources: src/app/page.tsx:4-5
Page Layout
The primary layout is defined by the class grid grid-rows-[20px_1fr_20px], which partitions the screen vertically. The main content resides in the second row, which is configured to take up the remaining flexible space (1fr).
The following diagram illustrates the high-level component structure of the home page.
This diagram shows the nested structure of the Home component, with a main grid layout containing the <main> and <footer> elements.
Sources: src/app/page.tsx:5-100
Key Sections
The page is divided into two primary visual sections within the grid layout:
<main>: The central content area, starting on the second grid row. It contains the Next.js logo, introductory text, and primary call-to-action buttons.
Sources: src/app/page.tsx:7-63<footer>: The footer area, starting on the third grid row. It provides secondary links for learning and exploring examples.
Sources: src/app/page.tsx:64-99
Core Components and Elements
The Home Page is composed of several key elements, including images, text, and interactive links.
Images
The page utilizes the next/image component for optimized image handling.
| Image Source | Alt Text | Dimensions (WxH) | priority | Location |
|---|---|---|---|---|
/next.svg | Next.js logo | 180x38 | true | Main Content |
/vercel.svg | Vercel logomark | 20x20 | false | "Deploy now" button |
/file.svg | File icon | 16x16 | false | "Learn" link |
/window.svg | Window icon | 16x16 | false | "Examples" link |
/globe.svg | Globe icon | 16x16 | false | "Go to nextjs.org" link |
The Next.js logo is loaded with the priority prop to ensure it is preloaded for better performance. The dark:invert class is used on the Next.js and Vercel logos to adjust their appearance in dark mode.
Sources: src/app/page.tsx:9-15, src/app/page.tsx:43-49, src/app/page.tsx:73-79, src/app/page.tsx:83-89, src/app/page.tsx:93-99
Instructional Text
An ordered list provides initial guidance to developers. It points to src/app/page.tsx as the file to edit for modifications. The text uses the Geist Mono font, as specified by the font-[family-name:var(--font-geist-mono)] class.
<ol class="list-inside list-decimal ... font-[family-name:var(--font-geist-mono)]">
<li class="mb-2 ...">
Get started by editing{" "}
<code class="...">
src/app/page.tsx
</code>.
</li>
<li class="...">
Save and see your changes instantly.
</li>
</ol>
Sources: src/app/page.tsx:16-28
Action Links and Buttons
The page features several prominent links styled as buttons, directing users to external resources.
| Link Text | href Target | Styling |
|---|---|---|
| Deploy now | https://vercel.com/new?... | Solid background, styled as a primary action button. |
| Read our docs | https://nextjs.org/docs?... | Bordered, styled as a secondary action button. |
| Learn | https://nextjs.org/learn?... | Underlined on hover. |
| Examples | https://vercel.com/templates?... | Underlined on hover. |
| Go to nextjs.org → | https://nextjs.org?... | Underlined on hover. |
All external links use target="_blank" and rel="noopener noreferrer" for security and user experience.
Sources: src/app/page.tsx:31-62, src/app/page.tsx:65-99
Styling and Theming
Styling is primarily handled by Tailwind CSS, with a foundational setup in globals.css and layout.tsx.
Global Styles and Fonts
The root layout at src/app/layout.tsx is responsible for setting up the application's fonts and applying global styles to the <body> element.
- Font Loading: The
Geist(sans-serif) andGeist_Mono(monospace) fonts are imported fromnext/font/google. - CSS Variables: The fonts are assigned to CSS variables (
--font-geist-sansand--font-geist-mono). - Body Classes: These variables are applied to the
<body>tag, making them available throughout the application.
The following diagram shows the flow of how styles and fonts are applied to the Home Page.
Color Theming (Light/Dark Mode)
The application supports both light and dark color schemes. This is configured in src/app/globals.css using a @media (prefers-color-scheme: dark) query.
| CSS Variable | Light Mode Value | Dark Mode Value |
|---|---|---|
--background | #ffffff | #0a0a0a |
--foreground | #171717 | #ededed |
These variables are then used to set the background and color properties on the body element.
Sources: src/app/globals.css:3-9, src/app/globals.css:16-21
Project Configuration
The Home Page component operates within the context of the broader Next.js project configuration.
Dependencies
The project relies on the following core dependencies as defined in package.json:
next: ^15.3.2react: ^19.0.0react-dom: ^19.0.0
Development dependencies include typescript and tailwindcss.
Sources: package.json:9-18
Build and Development Scripts
The package.json file defines a dev script that uses Turbopack for faster development server performance.
"scripts": {
"dev": "next dev --turbopack",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
Sources: package.json:4-8
TypeScript Configuration
The tsconfig.json file configures the TypeScript compiler. Key settings include:
"jsx": "preserve": Preserves JSX for the Next.js compiler to handle."moduleResolution": "bundler": Uses the modern bundler module resolution strategy."paths": { "@/*": ["./src/*"] }: Sets up a path alias for easier imports from thesrcdirectory.
Sources: tsconfig.json