Skip to main content
Module 7

Building Pages

Assemble components into complete, professional pages

1 min read213 words0/4 deliverables checked
Reading progress0%

What You'll Learn

In Next.js, the file structure determines your URLs. This module teaches you to create layouts, build pages, and maintain consistency across your site.

File-Based Routing

app/
├── page.tsx          → yoursite.com/
├── about/
│   └── page.tsx      → yoursite.com/about
├── services/
│   └── page.tsx      → yoursite.com/services

Homepage Section Flow

A homepage typically follows this flow:

  1. Hero: Capture attention, state value proposition
  2. Problem: Show you understand their pain
  3. Solution: Introduce your approach
  4. Social proof: Testimonials, logos, stats
  5. How it works: Demystify your process
  6. CTA: Clear next step

Deliverable: Create Root Layout

Purpose: Set up the layout that wraps all pages.

Expert Role: Next.js Layout Architect

Tools to Use: File system (write app/layout.tsx), Context7 MCP

Expected Output

  • Complete root layout with fonts, nav, footer
  • Accessibility features (skip link)
  • Default metadata

Prompt Template

Act as a Next.js layout architect. Create the root layout
(app/layout.tsx) with:
1. HTML and body tags with proper lang attribute
2. Font loading for our display and body fonts
3. Global CSS import
4. Nav component at top
5. Main content area with id="main-content"
6. Footer component at bottom
7. Skip-to-main-content link for accessibility
8. Metadata defaults (title, description)

Deliverable: Create Homepage

Purpose: Build your main landing page.

Expert Role: Full-Stack Developer with Conversion Expertise

Tools to Use: File system (write app/page.tsx)

Expected Output

  • Complete homepage with all sections
  • Uses existing components
  • Follows design system

Prompt Template

Act as a full-stack developer with conversion expertise. Create
the homepage (app/page.tsx) with these sections:

1. **Hero Section**
   - Headline: "[Your headline]"
   - Subheadline: "[Your subheadline]"
   - CTA: "[Button text]" linking to /contact

2. **Problem Section**
   - Show 3-4 pain points our audience experiences
   - Use card components

3. **Solution Section**
   - Explain our approach in 3 steps
   - Use ProcessStepper component

4. **Social Proof Section**
   - 3 key statistics
   - Client testimonials or logos

5. **CTA Section**
   - Final call to action
   - Contact button

Use our Section, Container, and other components.
Follow the design system exactly.

Deliverable: Add SEO Metadata

Purpose: Optimize pages for search engines and social sharing.

Expert Role: SEO Specialist and Next.js Developer

Tools to Use: File system (edit pages), Context7 MCP

Expected Output

  • Metadata on all pages
  • Open Graph tags for social sharing

Prompt Template

Act as an SEO specialist and Next.js developer. Add proper
metadata to all pages:

For each page, set:
- title: Page-specific title | Company Name
- description: 1-2 sentence description of the page
- openGraph: Image, title, description for social sharing

Use Next.js Metadata API (not manual tags).
Show me how to customize per page.
Prev: Building ComponentsNext: Setting Up the Backend