Creating a Card
Component in app/components/Card.js
Here’s a simple Card
component that displays product information:
// app/components/Card.js
import Image from 'next/image';
import React from 'react';
const Card = ({ title, price, category, thumbnail }) => {
return (
<div className="card" style={{ width: '18rem' }}>
<Image src={thumbnail} className="card-img-top" alt="..." width={286} height={180} />
<div className="card-body">
<h5 className="card-title">{title}</h5>
<p className="card-text">{price}</p>
<p className="card-text">{category}</p>
<a href="#" className="btn btn-primary">Go somewhere</a>
</div>
</div>
);
};
export default Card;
JavaScriptFetching Data with SSR in app/blog/page.tsx
Here’s how you can create an SSR page to fetch and display products:
// app/blog/page.tsx
import { getServerData } from 'next';
import Card from '../../components/Card';
export async function getServerData() {
const res = await fetch('https://dummyjson.com/products');
const data = await res.json();
return {
props: {
products: data.products,
},
};
}
export default function Blog({ products }) {
return (
<div className="container">
<h2>Blog</h2>
<div className="row">
{products.map((product) => (
<div key={product.id} className="col-lg-3">
<Card
title={product.title}
price={product.price}
category={product.category}
thumbnail={product.thumbnail}
/>
</div>
))}
</div>
</div>
);
}
JavaScript