REST API Integration in Next.js — Complete Guide with Real Examples

REST APIs in Next.js — The Basics

Modern web apps connect to dozens of external services. Here's how to integrate the most common APIs Pakistani developers need.

Fetching Data — Server Component (Best Practice)

// app/products/page.tsx
async function getProducts() {
  const res = await fetch('https://api.example.com/products', {
    next: { revalidate: 3600 } // cache for 1 hour
  })
  return res.json()
}

WhatsApp API Integration

// Send WhatsApp message on form submit
const sendWhatsApp = (message) => {
  const phone = "923111101898" // Pakistan format
  const url = `https://wa.me/${phone}?text=${encodeURIComponent(message)}`
  window.open(url, '_blank')
}