API Integration

An API integration is the connection between two or more applications, via their APIs, that lets those systems exchange data. API integrations power processes throughout many high-performing businesses that keep data in sync and enhance productivity.

api-demo.js

export async function getServerSideProps() {
    // Fetch data from external API
    const response = await fetch('https://dummyjson.com/products/1');
    const data = await response.json();
    // Pass data to the page via props
    return { props: { data } }
}


const APIIntegrationDemo = ({ data }) => {
    return (
        <pre>{JSON.stringify(data, null, 2)}</pre>
    )
}


export default APIIntegrationDemo;

Final result @ http://localhost:3000/api-demo url.

{
  "id": 1,
  "title": "Essence Mascara Lash Princess",
  "description": "The Essence Mascara Lash Princess is a popular mascara known for its volumizing and lengthening effects. Achieve dramatic lashes with this long-lasting and cruelty-free formula.",
  "category": "beauty",
  "price": 9.99,
  "discountPercentage": 10.48,
  "rating": 2.56,
  "stock": 99,
  "tags": [
    "beauty",
    "mascara"
  ],
  "brand": "Essence",
  "sku": "BEA-ESS-ESS-001",
  "weight": 4,
  "dimensions": {
    "width": 15.14,
    "height": 13.08,
    "depth": 22.99
  },
  "warrantyInformation": "1 week warranty",
  "shippingInformation": "Ships in 3-5 business days",
  "availabilityStatus": "In Stock",
  "reviews": [
    {
      "rating": 3,
      "comment": "Would not recommend!",
      "date": "2025-04-30T09:41:02.053Z",
      "reviewerName": "Eleanor Collins",
      "reviewerEmail": "eleanor.collins@x.dummyjson.com"
    },
    {
      "rating": 4,
      "comment": "Very satisfied!",
      "date": "2025-04-30T09:41:02.053Z",
      "reviewerName": "Lucas Gordon",
      "reviewerEmail": "lucas.gordon@x.dummyjson.com"
    },
    {
      "rating": 5,
      "comment": "Highly impressed!",
      "date": "2025-04-30T09:41:02.053Z",
      "reviewerName": "Eleanor Collins",
      "reviewerEmail": "eleanor.collins@x.dummyjson.com"
    }
  ],
  "returnPolicy": "No return policy",
  "minimumOrderQuantity": 48,
  "meta": {
    "createdAt": "2025-04-30T09:41:02.053Z",
    "updatedAt": "2025-04-30T09:41:02.053Z",
    "barcode": "5784719087687",
    "qrCode": "https://cdn.dummyjson.com/public/qr-code.png"
  },
  "images": [
    "https://cdn.dummyjson.com/product-images/beauty/essence-mascara-lash-princess/1.webp"
  ],
  "thumbnail": "https://cdn.dummyjson.com/product-images/beauty/essence-mascara-lash-princess/thumbnail.webp"
}
Contents
Buy Now