Adding New Pages
Relevant source files
The following files were used as context for generating this wiki page:
This project is built using the Next.js framework, which utilizes a file-based routing system where every file in the pages/ directory becomes a route in the application. Adding new pages involves creating React components within this directory, leveraging global styles, and optionally integrating shared components to maintain UI consistency.
The application currently features a main landing page that demonstrates Next.js "Fast Refresh" capabilities, maintaining component state across edits and error handling.
Sources: package.json:11, pages/index.js:15-28, README.md:1-5
Page Architecture and Routing
Next.js automatically maps files in the pages directory to URLs. The entry point for all pages is _app.js, which wraps the active page component.
The App Wrapper (_app.js)
The _app.js file is the top-level component that initializes pages. It is used to import global CSS and ensure that styles are applied across the entire application.
import '../global.css'
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
Sources: pages/_app.js:1-5
Page Structure
A standard page like index.js consists of:
- State Management: Utilizing React hooks such as
useState,useCallback, anduseEffect. - Shared Components: Importing UI elements from the
components/directory. - Scoped Styling: Utilizing CSS Modules (e.g.,
home.module.css) for component-specific styles.
The following diagram illustrates the initialization flow when a new page is added and rendered:
The diagram shows how files in the pages directory are mapped to routes and processed by the central app wrapper.
Sources: pages/_app.js:1-5, pages/index.js:1-5
Core Components for Pages
When creating new pages, developers can utilize existing reusable components to maintain the "Fast Refresh" demo's design language.
| Component | File Path | Purpose |
|---|---|---|
Button | components/Button.js | A styled button component using CSS modules. |
ClickCount | components/ClickCount.js | A stateful counter that uses the Button component. |
Home | pages/index.js | The primary landing page demonstrating auto-incrementing state. |
Sources: components/Button.js:3-5, components/ClickCount.js:4-11, pages/index.js:15-68
Button Implementation
The Button component uses a module-based styling approach to avoid name collisions.
import styles from './Button.module.css'
export default function Button(props) {
return <button type="button" className={styles.btn} {...props} />
}
Sources: components/Button.js:1-5
Shared Styling
Global styles defined in global.css provide the foundation for typography and layout across all new pages.
| Property | Value |
|---|---|
| Font Family | 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Arial, sans-serif |
| Base Font Size | 16px |
| Line Height | 1.65 |
| Text Rendering | optimizeLegibility |
Sources: global.css:1-15
State and Lifecycle in Pages
New pages should follow the pattern established in pages/index.js for handling side effects and state updates to ensure compatibility with Fast Refresh.
Example: Auto-Incrementing State
The project demonstrates using setInterval within a useEffect hook to update page state every second. It is critical to return a cleanup function (clearInterval) to prevent memory leaks during page navigation or hot reloading.
The sequence diagram details the lifecycle of the auto-incrementing counter used in the index page.
Sources: pages/index.js:23-35
Error Handling on Pages
The project contains logic to demonstrate that errors within event handlers do not break the page or reset the React state. This is a key feature of the development environment. For example, a button on a new page can throw a document.body() error or a document.parentNode() error, and the Next.js error overlay will provide feedback while the background state (like a counter) continues to run.
Sources: pages/index.js:7-13, pages/index.js:57-65
Conclusion
To add a new page to the Chasebank project, create a React component in the pages/ directory. Ensure it imports the necessary styles and components, and follows the React hook patterns for state and effects to take full advantage of the Next.js development features like Fast Refresh.
Sources: README.md:1-5, package.json:10-14