Learning Objectives

By the end of this lesson, you will understand:

What Next.js is and why use it
Next.js 16 key features
The App Router architecture
File-based routing
Server vs Client components

1. What is Next.js?

Next.js is a React framework that provides powerful features for building modern web applications. It handles many complex aspects of web development automatically, allowing you to focus on building your product.

Next.js is a React framework that provides:

Feature	Description
Server-Side Rendering (SSR)	Render pages on the server for better SEO and performance
Static Site Generation (SSG)	Pre-render pages at build time
File-based Routing	Create routes by adding files to the `app` directory
API Routes	Build backend APIs within your Next.js app
Built-in Optimizations	Automatic image, font, and script optimization
TypeScript Support	First-class TypeScript integration

Why Next.js for Our Bill Payment Platform?

SEO - Important for public-facing pages
Performance - Fast page loads improve user experience
Full-stack - API routes handle backend logic
Security - Server components keep sensitive code server-side
Developer Experience - Fast refresh, TypeScript, great tooling

2. Next.js 16 Key Features

App Router (Recommended)

The App Router is the modern way to build Next.js applications. It uses a file-system based router where folders define routes, and special files like page.tsx define the UI for each route.

app/
├── layout.tsx       # Root layout
├── page.tsx         # Home page (/)
├── about/
│   └── page.tsx     # About page (/about)
└── dashboard/
    ├── layout.tsx   # Dashboard layout
    └── page.tsx     # Dashboard page (/dashboard)

React 19 Support

Next.js 16 includes React 19 features:

React Compiler (stable)
Server Components by default
Enhanced Server Actions
Improved hydration

Turbopack (Default)

Turbopack is now the default bundler for development, providing significantly faster build times compared to Webpack.

pnpm dev  # Turbopack enabled by default

Key improvements:

Up to 10x faster full builds
Over 100x faster incremental builds
Seamless HMR (Hot Module Replacement)

Async Params and SearchParams

In Next.js 16, params and searchParams are now Promises and must be awaited. This change enables better streaming and performance optimizations.

// app/posts/[id]/page.tsx
type Props = {
  params: Promise<{ id: string }>
  searchParams: Promise<{ sort?: string }>
}

export default async function Page({ params, searchParams }: Props) {
  const { id } = await params
  const { sort } = await searchParams
  // ...
}

Proxy Routes (Replaces Middleware for Proxying)

Next.js 16 introduces proxy.ts for proxying requests to external services. This simplifies the process of forwarding API calls to backend services.

// proxy.ts
import type { NextProxy } from 'next/server'

export const proxy: NextProxy = {
  '/api/external/:path*': {
    target: 'https://external-api.com/:path*',
  },
}

Caching with "use cache"

The "use cache" directive provides granular control over caching at the function level. This allows you to cache expensive operations without caching entire routes.

async function getData() {
  "use cache"
  const res = await fetch('https://api.example.com/data')
  return res.json()
}

Caching Changes

In Next.js 16, caching is opt-in by default:

GET Route Handlers are not cached
Client Router Cache is not cached
You explicitly opt into caching with "use cache"

3. File-Based Routing

Next.js uses a file-based routing system where the file structure in your app directory directly maps to URL routes. This eliminates the need for a separate routing configuration.

Basic Routes

File Path	URL Route
`app/page.tsx`	`/`
`app/about/page.tsx`	`/about`
`app/contact/page.tsx`	`/contact`
`app/dashboard/page.tsx`	`/dashboard`

Special Files

These special file names have specific meanings in Next.js and trigger framework behaviors automatically.

File	Purpose
`page.tsx`	Defines a route's UI
`layout.tsx`	Shared UI for a segment and children
`loading.tsx`	Loading UI (uses Suspense)
`error.tsx`	Error UI (uses Error Boundary)
`not-found.tsx`	404 UI
`route.ts`	API endpoint

Example Structure for Our App

This structure demonstrates how to organize a real-world application with authentication, dashboard, and service pages. Route groups (parentheses) organize routes without affecting URLs.

app/
├── layout.tsx              # Root layout (navbar, footer)
├── page.tsx                # Home/landing page
├── globals.css
│
├── (auth)/                 # Auth route group
│   ├── login/
│   │   └── page.tsx        # /login
│   ├── register/
│   │   └── page.tsx        # /register
│   └── forgot-password/
│       └── page.tsx        # /forgot-password
│
├── (dashboard)/            # Dashboard route group
│   ├── layout.tsx          # Dashboard layout (sidebar)
│   ├── dashboard/
│   │   └── page.tsx        # /dashboard
│   ├── transactions/
│   │   └── page.tsx        # /transactions
│   ├── wallet/
│   │   └── page.tsx        # /wallet
│   └── settings/
│       └── page.tsx        # /settings
│
├── services/               # Services section
│   ├── page.tsx            # /services
│   ├── airtime/
│   │   └── page.tsx        # /services/airtime
│   ├── data/
│   │   └── page.tsx        # /services/data
│   ├── electricity/
│   │   └── page.tsx        # /services/electricity
│   └── cable/
│       └── page.tsx        # /services/cable
│
└── api/                    # API routes
    ├── auth/
    │   └── route.ts        # /api/auth
    └── transactions/
        └── route.ts        # /api/transactions

4. Layouts

Layouts wrap pages and preserve state during navigation. They are perfect for shared UI elements like navigation bars, sidebars, and footers that should persist across page transitions.

Root Layout (Required)

The root layout is required in every Next.js application. It defines the HTML document structure and wraps all pages in your app. This is where you set up global providers, fonts, and metadata.

// app/layout.tsx
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import './globals.css'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'RizPay Clone',
  description: 'Pay bills easily',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <header>
          <nav>{/* Navigation */}</nav>
        </header>
        <main>{children}</main>
        <footer>{/* Footer */}</footer>
      </body>
    </html>
  )
}

Nested Layout

Nested layouts allow different sections of your app to have their own layout structure. The dashboard layout adds a sidebar while the children render in the main content area.

// app/(dashboard)/layout.tsx
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className="flex">
      <aside className="w-64">
        {/* Sidebar navigation */}
      </aside>
      <div className="flex-1">
        {children}
      </div>
    </div>
  )
}

5. Server vs Client Components

Understanding the difference between Server and Client Components is crucial for building performant Next.js applications. This distinction determines where your code runs and what capabilities are available.

Server Components (Default)

All components in the App Router are Server Components by default. They run on the server and can directly access databases, file systems, and environment variables without exposing sensitive information to the client.

// app/page.tsx - Server Component (default)
async function getUser() {
  const res = await fetch('https://api.example.com/user')
  return res.json()
}

export default async function Page() {
  // Can use async/await directly
  const user = await getUser()

  // Can access backend resources
  // Cannot use useState, useEffect, onClick, etc.

  return <div>Hello, {user.name}</div>
}

Benefits:

Direct database/API access
Smaller JavaScript bundle
Sensitive data stays on server
Better performance

Client Components

Client Components run in the browser and enable interactivity. Add the "use client" directive at the top of the file to opt into client-side rendering. Use these for event handlers, state, and browser APIs.

// components/Counter.tsx - Client Component
"use client"

import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  )
}

When to use Client Components:

Event handlers (onClick, onChange)
State (useState, useReducer)
Effects (useEffect)
Browser APIs (localStorage, window)
Custom hooks that use state/effects

Composition Pattern

The composition pattern allows you to combine Server and Client Components effectively. Fetch data in Server Components and pass it to Client Components that need interactivity.

// app/dashboard/page.tsx - Server Component
import { getTransactions } from '@/lib/db'
import TransactionList from '@/components/TransactionList'
import TransactionFilters from '@/components/TransactionFilters'

export default async function DashboardPage() {
  // Fetch data on server
  const transactions = await getTransactions()

  return (
    <div>
      {/* Client component for interactivity */}
      <TransactionFilters />

      {/* Server-rendered list */}
      <TransactionList transactions={transactions} />
    </div>
  )
}

This Client Component handles the filter state and updates the URL, which triggers a server re-render with the new filter parameters.

// components/TransactionFilters.tsx - Client Component
"use client"

import { useState } from 'react'

export default function TransactionFilters() {
  const [filter, setFilter] = useState('all')

  return (
    <select value={filter} onChange={(e) => setFilter(e.target.value)}>
      <option value="all">All</option>
      <option value="airtime">Airtime</option>
      <option value="data">Data</option>
    </select>
  )
}

6. Data Fetching

Next.js provides multiple ways to fetch data depending on your needs. Server Components can fetch data directly, while the framework handles caching and revalidation automatically.

In Server Components

Server Components can fetch data directly using async/await. This code runs on the server, so you can access databases and APIs without worrying about CORS or exposing API keys.

// app/transactions/page.tsx
async function getTransactions() {
  const res = await fetch('https://api.example.com/transactions', {
    cache: 'no-store', // Opt out of caching
  })
  return res.json()
}

export default async function TransactionsPage() {
  const transactions = await getTransactions()

  return (
    <ul>
      {transactions.map((tx) => (
        <li key={tx.id}>{tx.type}: ₦{tx.amount}</li>
      ))}
    </ul>
  )
}

Caching Options

These fetch options control how Next.js caches the response. Choose based on how frequently your data changes and whether it needs to be fresh on every request.

// No caching (dynamic)
fetch(url, { cache: 'no-store' })

// Cache and revalidate after 60 seconds
fetch(url, { next: { revalidate: 60 } })

// Cache forever (static)
fetch(url, { cache: 'force-cache' })

Parallel Data Fetching

Using Promise.all executes multiple fetch requests simultaneously rather than sequentially. This significantly reduces the total loading time when you need data from multiple sources.

export default async function Page() {
  // Fetch in parallel for better performance
  const [user, transactions, wallet] = await Promise.all([
    getUser(),
    getTransactions(),
    getWallet(),
  ])

  return (
    <div>
      <UserProfile user={user} />
      <TransactionList transactions={transactions} />
      <WalletBalance wallet={wallet} />
    </div>
  )
}

7. Metadata

Metadata is essential for SEO and social sharing. Next.js provides a type-safe API for defining page titles, descriptions, and other meta tags that search engines and social platforms use.

Static Metadata

Export a metadata object to define static meta tags for a page. These values are known at build time and don't change based on user requests.

// app/page.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'Home | RizPay Clone',
  description: 'Pay bills easily with RizPay Clone',
  keywords: ['bill payment', 'airtime', 'data', 'Nigeria'],
}

export default function Page() {
  return <div>Home Page</div>
}

Dynamic Metadata

The generateMetadata function creates metadata based on route parameters or fetched data. This is useful for pages like product details or user profiles where the title depends on the content.

// app/transactions/[id]/page.tsx
import type { Metadata } from 'next'

type Props = {
  params: Promise<{ id: string }>
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { id } = await params
  const transaction = await getTransaction(id)

  return {
    title: `Transaction ${transaction.id} | RizPay Clone`,
    description: `${transaction.type} - ₦${transaction.amount}`,
  }
}

export default async function TransactionPage({ params }: Props) {
  const { id } = await params
  const transaction = await getTransaction(id)
  return <div>Transaction: {id}</div>
}

8. Create Our Base Pages

Let's create the initial pages for our bill payment application. These pages will serve as the foundation that we'll build upon throughout the course.

Home Page

The home page is the first thing users see. It includes a hero section with calls to action and a services section highlighting the available bill payment options.

// app/page.tsx
import Link from 'next/link'

export default function HomePage() {
  return (
    <div className="min-h-screen">
      {/* Hero Section */}
      <section className="py-20 text-center">
        <h1 className="text-5xl font-bold mb-4">
          Pay Bills Easily
        </h1>
        <p className="text-xl text-gray-600 mb-8">
          Airtime, Data, Electricity, Cable TV - All in one place
        </p>
        <div className="flex gap-4 justify-center">
          <Link
            href="/register"
            className="px-6 py-3 bg-primary text-white rounded-lg"
          >
            Get Started
          </Link>
          <Link
            href="/login"
            className="px-6 py-3 border border-primary text-primary rounded-lg"
          >
            Login
          </Link>
        </div>
      </section>

      {/* Services Section */}
      <section className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-center mb-12">
            Our Services
          </h2>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            {['Airtime', 'Data', 'Electricity', 'Cable TV'].map((service) => (
              <div
                key={service}
                className="p-6 bg-white rounded-lg shadow text-center"
              >
                <h3 className="font-semibold">{service}</h3>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  )
}

Create Auth Pages

These placeholder auth pages will be enhanced with actual authentication functionality in later lessons. The centered layout provides a clean, focused user experience.

// app/(auth)/login/page.tsx
export default function LoginPage() {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="w-full max-w-md p-8 bg-white rounded-lg shadow">
        <h1 className="text-2xl font-bold mb-6">Login</h1>
        {/* Form will be added later */}
        <p>Login form coming soon...</p>
      </div>
    </div>
  )
}

// app/(auth)/register/page.tsx
export default function RegisterPage() {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="w-full max-w-md p-8 bg-white rounded-lg shadow">
        <h1 className="text-2xl font-bold mb-6">Create Account</h1>
        {/* Form will be added later */}
        <p>Registration form coming soon...</p>
      </div>
    </div>
  )
}

Create Dashboard Page

The dashboard provides users with an overview of their account. It displays wallet balance, transaction statistics, and quick action buttons for common tasks.

// app/(dashboard)/dashboard/page.tsx
export default function DashboardPage() {
  return (
    <div className="p-6">
      <h1 className="text-2xl font-bold mb-6">Dashboard</h1>

      {/* Quick Stats */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <div className="p-6 bg-white rounded-lg shadow">
          <p className="text-gray-600">Wallet Balance</p>
          <p className="text-3xl font-bold">₦0.00</p>
        </div>
        <div className="p-6 bg-white rounded-lg shadow">
          <p className="text-gray-600">Total Transactions</p>
          <p className="text-3xl font-bold">0</p>
        </div>
        <div className="p-6 bg-white rounded-lg shadow">
          <p className="text-gray-600">This Month</p>
          <p className="text-3xl font-bold">₦0.00</p>
        </div>
      </div>

      {/* Quick Actions */}
      <div className="bg-white rounded-lg shadow p-6">
        <h2 className="text-xl font-semibold mb-4">Quick Actions</h2>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          {['Buy Airtime', 'Buy Data', 'Pay Electricity', 'Pay Cable'].map(
            (action) => (
              <button
                key={action}
                className="p-4 border rounded-lg hover:bg-gray-50"
              >
                {action}
              </button>
            )
          )}
        </div>
      </div>
    </div>
  )
}

Assignment

Task: Create the App Structure

Create the route structure:

app/
├── (auth)/
│   ├── login/page.tsx
│   ├── register/page.tsx
│   └── forgot-password/page.tsx
├── (dashboard)/
│   ├── layout.tsx
│   ├── dashboard/page.tsx
│   ├── wallet/page.tsx
│   ├── transactions/page.tsx
│   └── settings/page.tsx
└── services/
    ├── page.tsx
    ├── airtime/page.tsx
    ├── data/page.tsx
    ├── electricity/page.tsx
    └── cable/page.tsx

Create basic content for each page with:
- Appropriate heading
- Brief description
- Placeholder for future content
Create a dashboard layout with:
- Sidebar navigation
- Main content area
- Responsive design (mobile-friendly)
Update the root layout with:
- Navigation header
- Footer
- Proper metadata
Test all routes work correctly

Verification

Navigate to these URLs and verify they work:

http://localhost:3000/
http://localhost:3000/login
http://localhost:3000/register
http://localhost:3000/dashboard
http://localhost:3000/services/airtime

Additional Resources

Next Lesson: Routing & Navigation