Learning Objectives

Performance optimization techniques
Security best practices
Error monitoring setup
Pre-deployment checklist

1. Performance Optimization

Image Optimization

Next.js provides an Image component that automatically optimizes images by serving them in modern formats, resizing them for different devices, and lazy loading them by default. Using this component instead of standard img tags significantly improves page load times and Core Web Vitals scores.

The priority prop should be used for above-the-fold images (like logos in the header) to preload them immediately. For dynamic images that might not exist, provide a fallback UI.

// Use Next.js Image component
import Image from "next/image";

export function Logo() {
  return (
    <Image
      src="/logo.png"
      alt="RizPay"
      width={120}
      height={40}
      priority // Load immediately for above-fold images
    />
  );
}

// For dynamic images
export function Avatar({ src, name }: { src?: string; name: string }) {
  return src ? (
    <Image
      src={src}
      alt={name}
      width={40}
      height={40}
      className="rounded-full"
    />
  ) : (
    <div className="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center">
      {name[0]}
    </div>
  );
}

Code Splitting

Dynamic imports allow you to load components only when they're needed, reducing the initial JavaScript bundle size. This is especially useful for heavy components like charts, rich text editors, or complex forms that aren't immediately visible on page load.

Setting ssr: false prevents the component from rendering on the server, which is necessary for components that rely on browser-only APIs like canvas or window.

// Dynamic imports for heavy components
import dynamic from "next/dynamic";

const Chart = dynamic(() => import("@/components/Chart"), {
  loading: () => <div className="h-64 bg-gray-100 animate-pulse rounded" />,
  ssr: false, // Disable SSR for client-only components
});

// Use in component
export function DashboardStats() {
  return (
    <div>
      <Chart data={chartData} />
    </div>
  );
}

Data Caching

Next.js provides flexible caching options for fetch requests. Understanding when to use each caching strategy is crucial for balancing performance and data freshness.

Use revalidate for data that changes periodically, force-cache for truly static data, and no-store for real-time data like wallet balances that must always be current.

// Cache API responses
async function getProducts() {
  const response = await fetch("/api/products", {
    next: { revalidate: 3600 }, // Cache for 1 hour
  });
  return response.json();
}

// For static data
async function getNetworks() {
  const response = await fetch("/api/networks", {
    cache: "force-cache", // Cache indefinitely
  });
  return response.json();
}

// For real-time data
async function getWalletBalance() {
  const response = await fetch("/api/wallet", {
    cache: "no-store", // Always fresh
  });
  return response.json();
}

2. Bundle Analysis

Bundle analysis helps you identify which dependencies are contributing most to your JavaScript bundle size. This is essential for finding optimization opportunities like replacing heavy libraries with lighter alternatives or improving code splitting.

The @next/bundle-analyzer package generates visual reports showing exactly which modules are included in your bundles and how much space they take.

# Install bundle analyzer
pnpm add @next/bundle-analyzer

# Update next.config.ts
import bundleAnalyzer from '@next/bundle-analyzer'

const withBundleAnalyzer = bundleAnalyzer({
  enabled: process.env.ANALYZE === 'true',
})

export default withBundleAnalyzer({
  // your config
})

# Run analysis
ANALYZE=true pnpm build

3. Security Best Practices

Environment Variables

Environment variables containing secrets should never be committed to version control. Create a .env.example file that documents required variables without their actual values, making it easy for other developers to set up the project.

Server-side environment variables (without the NEXTPUBLIC prefix) are never exposed to the browser, keeping your API keys secure.

# .env.local (never commit this)
DATABASE_URL=postgresql://...
SUPABASE_SERVICE_KEY=secret_key
RIZPAY_SECRET_KEY=secret_key

# .env.example (commit this)
DATABASE_URL=
SUPABASE_SERVICE_KEY=
RIZPAY_SECRET_KEY=

Input Validation

Always validate user input on the server, even if you also validate on the client. Client-side validation can be bypassed, so server-side validation using a library like Zod ensures malicious data never reaches your database or external APIs.

The parse method throws an error if validation fails, while safeParse returns a result object that lets you handle errors gracefully.

// Always validate on server
import { z } from "zod";

const TransactionSchema = z.object({
  amount: z.number().positive().max(1000000),
  phone: z.string().regex(/^0[789][01]\d{8}$/),
  type: z.enum(["airtime", "data", "electricity", "cable"]),
});

export async function createTransaction(input: unknown) {
  const validated = TransactionSchema.parse(input);
  // Safe to use validated data
}

Rate Limiting

Rate limiting protects your API from abuse and ensures fair resource usage among users. This implementation uses Upstash Redis for distributed rate limiting that works across serverless function instances.

The sliding window algorithm provides smooth rate limiting that prevents burst attacks while allowing legitimate traffic patterns.

// middleware.ts
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
import { Ratelimit } from "@upstash/ratelimit";
import { Redis } from "@upstash/redis";

const ratelimit = new Ratelimit({
  redis: Redis.fromEnv(),
  limiter: Ratelimit.slidingWindow(10, "10 s"), // 10 requests per 10 seconds
});

export async function middleware(request: NextRequest) {
  if (request.nextUrl.pathname.startsWith("/api/")) {
    const ip = request.ip ?? "127.0.0.1";
    const { success, limit, reset, remaining } = await ratelimit.limit(ip);

    if (!success) {
      return NextResponse.json(
        { error: "Too many requests" },
        {
          status: 429,
          headers: {
            "X-RateLimit-Limit": limit.toString(),
            "X-RateLimit-Remaining": remaining.toString(),
            "X-RateLimit-Reset": reset.toString(),
          },
        }
      );
    }
  }

  return NextResponse.next();
}

CSRF Protection

Cross-Site Request Forgery (CSRF) attacks trick users into making unwanted requests. Server Actions in Next.js are automatically protected against CSRF attacks. For traditional API routes, verify the request origin to ensure it comes from your application.

// Server actions are automatically protected
// For API routes, verify origin
export async function POST(request: NextRequest) {
  const origin = request.headers.get("origin");

  if (origin !== process.env.NEXT_PUBLIC_APP_URL) {
    return Response.json({ error: "Forbidden" }, { status: 403 });
  }

  // Process request
}

4. Error Monitoring

Error Boundary

Error boundaries catch JavaScript errors in component trees and display fallback UIs instead of crashing the entire application. The global-error.tsx file catches errors at the app level and integrates with error monitoring services like Sentry.

The reset function allows users to retry the failed operation, which is helpful for transient errors like network issues.

// app/global-error.tsx
"use client";

import * as Sentry from "@sentry/nextjs";
import { useEffect } from "react";

export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    Sentry.captureException(error);
  }, [error]);

  return (
    <html>
      <body>
        <div className="min-h-screen flex items-center justify-center">
          <div className="text-center">
            <h1 className="text-2xl font-bold">Something went wrong</h1>
            <button
              onClick={reset}
              className="mt-4 px-4 py-2 bg-primary text-white rounded"
            >
              Try again
            </button>
          </div>
        </div>
      </body>
    </html>
  );
}

Logging

A structured logging system helps you track application behavior and debug issues in production. This logger implementation provides consistent formatting and can send logs to external services in production while keeping console output in development.

Including timestamps and log levels makes it easy to filter and analyze logs when troubleshooting.

// lib/logger.ts
type LogLevel = "info" | "warn" | "error";

interface LogEntry {
  level: LogLevel;
  message: string;
  data?: unknown;
  timestamp: string;
}

export function log(level: LogLevel, message: string, data?: unknown) {
  const entry: LogEntry = {
    level,
    message,
    data,
    timestamp: new Date().toISOString(),
  };

  if (process.env.NODE_ENV === "production") {
    // Send to logging service
    fetch("/api/logs", {
      method: "POST",
      body: JSON.stringify(entry),
    }).catch(() => {});
  } else {
    console[level](entry);
  }
}

// Usage
log("info", "Transaction created", { id: tx.id, amount: tx.amount });
log("error", "Payment failed", { error: error.message });

5. Pre-Deployment Checklist

Environment Variables

Before deploying, ensure all required environment variables are configured in your deployment platform. The NEXTPUBLIC prefix exposes variables to the browser, so only use it for non-sensitive values like API URLs.

# Required for production
NEXT_PUBLIC_APP_URL=https://yourapp.com
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_KEY=
RIZPAY_API_URL=https://api.rizpay.app/v1
RIZPAY_API_KEY=
RIZPAY_SECRET_KEY=

Security Headers

Security headers protect your application from common web vulnerabilities. HSTS forces HTTPS, X-Frame-Options prevents clickjacking, and X-Content-Type-Options prevents MIME-type sniffing attacks.

Configure these headers in next.config.ts to apply them to all routes automatically.

// next.config.ts
const securityHeaders = [
  {
    key: "X-DNS-Prefetch-Control",
    value: "on",
  },
  {
    key: "Strict-Transport-Security",
    value: "max-age=63072000; includeSubDomains; preload",
  },
  {
    key: "X-Frame-Options",
    value: "SAMEORIGIN",
  },
  {
    key: "X-Content-Type-Options",
    value: "nosniff",
  },
  {
    key: "Referrer-Policy",
    value: "origin-when-cross-origin",
  },
];

export default {
  async headers() {
    return [
      {
        source: "/:path*",
        headers: securityHeaders,
      },
    ];
  },
};

Database Indexes

Proper database indexes are crucial for query performance, especially as your data grows. Create indexes on columns that are frequently used in WHERE clauses, JOIN conditions, or ORDER BY statements.

These indexes optimize common queries like fetching a user's transactions or filtering transactions by status.

-- Ensure proper indexes for performance
CREATE INDEX idx_transactions_user_created ON transactions(user_id, created_at DESC);
CREATE INDEX idx_transactions_status ON transactions(status);
CREATE INDEX idx_wallet_transactions_wallet ON wallet_transactions(wallet_id, created_at DESC);

6. Accessibility

Building accessible forms ensures your application can be used by everyone, including people who use screen readers or keyboard navigation. Proper labeling, ARIA attributes, and semantic HTML make forms understandable and operable by assistive technologies.

The aria-describedby attribute connects form inputs to their hint text, while aria-busy indicates when a button is processing a request.

// Accessible form example
export function AccessibleForm() {
  return (
    <form aria-label="Buy airtime form">
      <div role="group" aria-labelledby="network-label">
        <span id="network-label" className="sr-only">
          Select network
        </span>
        {/* Network buttons */}
      </div>

      <label htmlFor="phone">
        Phone Number
        <span aria-hidden="true" className="text-red-500">
          *
        </span>
      </label>
      <input
        id="phone"
        name="phone"
        type="tel"
        required
        aria-required="true"
        aria-describedby="phone-hint"
      />
      <span id="phone-hint" className="text-sm text-gray-500">
        Enter 11-digit Nigerian phone number
      </span>

      <button type="submit" aria-busy={isPending}>
        {isPending ? "Processing..." : "Buy Airtime"}
      </button>
    </form>
  );
}

7. Final Checklist

Use this comprehensive checklist before deploying your application to production. Each category addresses a critical aspect of application quality.

Functionality

Verify that all core features work correctly in a production-like environment. Test the complete user journey from registration through completing transactions.

All authentication flows work
Wallet funding works
All bill payments work
Transaction history displays correctly
Error handling works properly

Performance

Measure performance using Chrome Lighthouse and ensure your application meets the thresholds for a fast, responsive user experience.

Lighthouse score > 90
Core Web Vitals pass
Images are optimized
Bundle size is reasonable

Security

Confirm that all security measures are in place to protect user data and prevent common attacks.

Environment variables are secure
Input validation on all forms
Rate limiting configured
HTTPS enabled

Accessibility

Test that your application can be used by people with disabilities, including those using screen readers or keyboard-only navigation.

Keyboard navigation works
Screen reader compatible
Color contrast passes
Focus indicators visible

SEO

Ensure search engines can properly index your application and social media shares display correctly.

Meta tags configured
Open Graph images set
Sitemap generated
robots.txt configured

Next Lesson: Deployment to Vercel