Learn how to create multiple pages and build a simple navigation system for your SaaS.
What You’ll Learn In this lesson (Days 2-3), you’ll learn:
File-based routing in Next.js
Creating multiple pages (Home, Pricing, About)
Using the Link component for navigation
Building a simple navbar
Basic SaaS page structure
File Structure Next.js uses file-based routing - the folder name becomes the URL path:
02-pages-routing/ ├── app/ │ ├── page.js → / (home page) │ ├── pricing/ │ │ └── page.js → /pricing │ ├── about/ │ │ └── page.js → /about │ └── layout.js → wraps all pages └── package.json
The folder name = the URL path! Create a folder called contact with a page.js inside, and you get /contact automatically.
Setting Up cd 02-pages-routing npm install npm run dev
Open http://localhost:3000
Building the Navigation Every page needs navigation. Here’s a simple navbar using Next.js Link:
import Link from 'next/link' < nav style = { { padding: '20px 50px' , backgroundColor: '#000' , color: '#fff' , display: 'flex' , gap: '30px' , alignItems: 'center' } } > < Link href = "/" style = { { color: '#fff' , textDecoration: 'none' , fontWeight: 'bold' , fontSize: '20px' } } > MySaaS </ Link > < div style = { { marginLeft: 'auto' , display: 'flex' , gap: '20px' } } > < Link href = "/pricing" style = { { color: '#fff' , textDecoration: 'none' } } > Pricing </ Link > < Link href = "/about" style = { { color: '#fff' , textDecoration: 'none' } } > About </ Link > </ div > </ nav >
Always use <Link> from next/link instead of <a> tags. Links provide client-side navigation, making your SaaS feel instant!
The Home Page Your landing page is the most important page - it needs to hook visitors in 5 seconds:
import Link from 'next/link' export default function HomePage () { return ( < div style = { { fontFamily: 'Arial, sans-serif' } } > { /* Navigation */ } < nav style = { { padding: '20px 50px' , backgroundColor: '#000' , color: '#fff' , display: 'flex' , gap: '30px' , alignItems: 'center' } } > < Link href = "/" style = { { color: '#fff' , textDecoration: 'none' , fontWeight: 'bold' , fontSize: '20px' } } > MySaaS </ Link > < div style = { { marginLeft: 'auto' , display: 'flex' , gap: '20px' } } > < Link href = "/pricing" style = { { color: '#fff' , textDecoration: 'none' } } > Pricing </ Link > < Link href = "/about" style = { { color: '#fff' , textDecoration: 'none' } } > About </ Link > </ div > </ nav > { /* Hero Section */ } < div style = { { padding: '100px 50px' , textAlign: 'center' , backgroundColor: '#f8f9fa' } } > < h1 style = { { fontSize: '48px' , marginBottom: '20px' } } > Build Your Dream SaaS 🚀 </ h1 > < p style = { { fontSize: '20px' , color: '#666' , marginBottom: '30px' } } > The easiest way to launch your product and make money online. </ p > < button style = { { padding: '15px 40px' , fontSize: '18px' , backgroundColor: '#0070f3' , color: '#fff' , border: 'none' , borderRadius: '6px' , cursor: 'pointer' } } > Get Started Free </ button > </ div > { /* Features */ } < div style = { { padding: '80px 50px' } } > < h2 style = { { textAlign: 'center' , fontSize: '36px' , marginBottom: '50px' } } > Why Choose Us? </ h2 > < div style = { { display: 'grid' , gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))' , gap: '30px' , maxWidth: '1000px' , margin: '0 auto' } } > < div style = { { padding: '20px' , textAlign: 'center' } } > < div style = { { fontSize: '48px' , marginBottom: '15px' } } > ⚡ </ div > < h3 > Lightning Fast </ h3 > < p style = { { color: '#666' } } > Built with Next.js for incredible speed </ p > </ div > < div style = { { padding: '20px' , textAlign: 'center' } } > < div style = { { fontSize: '48px' , marginBottom: '15px' } } > 🔒 </ div > < h3 > Secure </ h3 > < p style = { { color: '#666' } } > Your data is safe with us </ p > </ div > < div style = { { padding: '20px' , textAlign: 'center' } } > < div style = { { fontSize: '48px' , marginBottom: '15px' } } > 💰 </ div > < h3 > Affordable </ h3 > < p style = { { color: '#666' } } > Start free, scale as you grow </ p > </ div > </ div > </ div > </ div > ) }
The Pricing Page Pricing is essential for every SaaS. Keep it simple and clear:
import Link from 'next/link' export default function PricingPage () { return ( < div style = { { fontFamily: 'Arial, sans-serif' } } > { /* Navigation (same as home) */ } { /* Pricing Header */ } < div style = { { padding: '80px 50px 40px' , textAlign: 'center' } } > < h1 style = { { fontSize: '42px' , marginBottom: '15px' } } > Simple, Transparent Pricing </ h1 > < p style = { { fontSize: '18px' , color: '#666' } } > Start free. Upgrade when you're ready. </ p > </ div > { /* Pricing Cards */ } < div style = { { display: 'grid' , gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))' , gap: '30px' , maxWidth: '1000px' , margin: '0 auto' , padding: '50px' } } > { /* Free Plan */ } < div style = { { border: '1px solid #ddd' , borderRadius: '12px' , padding: '40px 30px' , textAlign: 'center' } } > < h3 style = { { fontSize: '24px' , marginBottom: '10px' } } > Free </ h3 > < div style = { { fontSize: '48px' , fontWeight: 'bold' , margin: '20px 0' } } > $0 < span style = { { fontSize: '18px' , fontWeight: 'normal' } } > /mo </ span > </ div > < ul style = { { listStyle: 'none' , padding: '0' , marginBottom: '30px' , textAlign: 'left' , lineHeight: '2' } } > < li > ✓ 5 projects </ li > < li > ✓ Basic features </ li > < li > ✓ Community support </ li > </ ul > < button style = { { width: '100%' , padding: '12px' , backgroundColor: '#f0f0f0' , border: '1px solid #ddd' , borderRadius: '6px' , cursor: 'pointer' } } > Get Started </ button > </ div > { /* Pro Plan - POPULAR */ } < div style = { { border: '2px solid #0070f3' , borderRadius: '12px' , padding: '40px 30px' , textAlign: 'center' , position: 'relative' } } > < div style = { { position: 'absolute' , top: '-15px' , left: '50%' , transform: 'translateX(-50%)' , backgroundColor: '#0070f3' , color: '#fff' , padding: '5px 20px' , borderRadius: '20px' , fontSize: '14px' } } > POPULAR </ div > < h3 style = { { fontSize: '24px' , marginBottom: '10px' } } > Pro </ h3 > < div style = { { fontSize: '48px' , fontWeight: 'bold' , margin: '20px 0' } } > $29 < span style = { { fontSize: '18px' , fontWeight: 'normal' } } > /mo </ span > </ div > < ul style = { { listStyle: 'none' , padding: '0' , marginBottom: '30px' , textAlign: 'left' , lineHeight: '2' } } > < li > ✓ Unlimited projects </ li > < li > ✓ Advanced features </ li > < li > ✓ Priority support </ li > < li > ✓ Custom domain </ li > </ ul > < button style = { { width: '100%' , padding: '12px' , backgroundColor: '#0070f3' , color: '#fff' , border: 'none' , borderRadius: '6px' , cursor: 'pointer' , fontSize: '16px' } } > Start Free Trial </ button > </ div > </ div > </ div > ) }
Notice the “POPULAR” badge on the Pro plan? This nudges users toward your most profitable tier.
Web Fundamentals Recap
HTTP (HyperText Transfer Protocol) is how browsers talk to servers. When you visit a URL, your browser sends an HTTP request, and the server sends back an HTTP response with the page content.
DNS (Domain Name System) converts domain names like mysaas.com into IP addresses like 192.168.1.1 that computers understand. It’s like a phonebook for the internet.
Routing shows different pages based on the URL. /pricing shows the pricing page, /about shows the about page. Next.js handles this automatically based on your folder structure.
SaaS Pages You Need Every SaaS needs these core pages:
Page Purpose Priority Landing page Hook visitors in 5 seconds Critical Pricing Clear, simple, with CTA buttons Critical About Build trust, tell your story High Contact Let people reach you Optional for MVP
Try This
Create a contact page
Create app/contact/page.js with a contact form
Add to navigation
Add a “Contact” link to the navbar in all pages
Customize pricing
Change the pricing amounts to match your SaaS idea
Add your idea
Replace “MySaaS” with your actual SaaS name and description
Create a footer
Add a footer component at the bottom (copy the nav style)
Common Issues Navigation duplicated on every page? In the next lesson, you’ll learn how to create a reusable Navbar component to avoid repetition.
Next Steps Move to Lesson 3: Tailwind Components to make this look professional with Tailwind CSS and reusable components.