1
// /app/(public)/catalog/page.tsx
2
'use client'
3

4
import { useEffect, useState } from 'react'
5
import Link from 'next/link'
6

7
type Product = {
8
  id: number
9
  name: string
10
  slug: string
11
  imageUrl: string
12
  description: string
13
  price: number
14
  benefit: number
15
}
16

17
const CatalogPage = () => {
18
  const [products, setProducts] = useState<Product[]>([])
19
  const [loading, setLoading] = useState(true)
20

21
  useEffect(() => {
22
    const fetchProducts = async () => {
23
      const response = await fetch('/api/products', { cache: 'no-store' })
24
      const data = await response.json()
25
      setProducts(data)
26
      setLoading(false)
27
    }
28
    fetchProducts()
29
  }, [])
30

31
  if (loading) {
32
    return (
33
      <div className="p-4">
34
        <h1 className="text-3xl font-bold mb-4">Catalog</h1>
35
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
36
          {[...Array(6)].map((_, index) => (
37
            <div
38
              key={index}
39
              className="border p-4 rounded-lg shadow-md animate-pulse">
40
              <div className="bg-gray-300 h-6 w-3/4 mb-2"></div>
41
              <div className="bg-gray-300 h-48 w-full mb-2"></div>
42
              <div className="bg-gray-300 h-4 w-full mb-2"></div>
43
              <div className="bg-gray-300 h-4 w-1/2 mb-2"></div>
44
            </div>
45
          ))}
46
        </div>
47
      </div>
48
    )
49
  }
50

51
  if (products.length === 0) {
52
    return <div className="p-4">No products available yet.</div>
53
  }
54

55
  return (
56
    <div className="p-4">
57
      <h1 className="text-3xl font-bold mb-4">Catalog</h1>
58
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
59
        {products.map((product) => (
60
          <div
61
            key={product.id}
62
            className="border p-4 rounded-lg shadow-md">
63
            <Link
64
              className="text-xl font-semibold"
65
              href={`/catalog/${product.slug}`}>
66
              {product.name}
67
            </Link>
68
            <img
69
              src={product.imageUrl}
70
              alt={product.name}
71
              className="mt-2 w-full h-48 object-cover rounded"
72
            />
73
            <p className="mt-2">{product.description}</p>
74
            <p className="mt-2">Price: {product.price}</p>
75
            <p className="mt-2">Benefit: {product.benefit}</p>
76
          </div>
77
        ))}
78
      </div>
79
    </div>
80
  )
81
}
82

83
export default CatalogPage

1
// /app/(public)/catalog/page.tsx
2
'use client';
3

4
import { useEffect, useState } from 'react';
5
import Link from 'next/link';
6

7
type Product = {
8
  id: number;
9
  name: string;
10
  slug: string;
11
  imageUrl: string;
12
  description: string;
13
  price: number;
14
  benefit: number;
15
};
16

17
const CatalogPage = ({ apiUrl }) => {
18
  const [products, setProducts] = useState<Product[]>([]);
19
  const [loading, setLoading] = useState(true);
20

21
  useEffect(() => {
22
    const fetchProducts = async () => {
23
      const response = await fetch(`${apiUrl}/api/products`);
24
      const data = await response.json();
25
      setProducts(data);
26
      setLoading(false);
27
    };
28
    fetchProducts();
29
  }, [apiUrl]);
30

31
  if (loading) {
32
    return (
33
      <div className="p-4">
34
        <h1 className="text-3xl font-bold mb-4">Catalog</h1>
35
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
36
          {[...Array(6)].map((_, index) => (
37
            <div
38
              key={index}
39
              className="border p-4 rounded-lg shadow-md animate-pulse">
40
              <div className="bg-gray-300 h-6 w-3/4 mb-2"></div>
41
              <div className="bg-gray-300 h-48 w-full mb-2"></div>
42
              <div className="bg-gray-300 h-4 w-full mb-2"></div>
43
              <div className="bg-gray-300 h-4 w-1/2 mb-2"></div>
44
            </div>
45
          ))}
46
        </div>
47
      </div>
48
    );
49
  }
50

51
  if (products.length === 0) {
52
    return <div className="p-4">No products available yet.</div>;
53
  }
54

55
  return (
56
    <div className="p-4">
57
      <h1 className="text-3xl font-bold mb-4">Catalog</h1>
58
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
59
        {products.map((product) => (
60
          <div
61
            key={product.id}
62
            className="border p-4 rounded-lg shadow-md">
63
            <Link
64
              className="text-xl font-semibold"
65
              href={`/catalog/${product.slug}`}>
66
              {product.name}
67
            </Link>
68
            <img
69
              src={product.imageUrl}
70
              alt={product.name}
71
              className="mt-2 w-full h-48 object-cover rounded"
72
            />
73
            <p className="mt-2">{product.description}</p>
74
            <p className="mt-2">Price: {product.price}</p>
75
            <p className="mt-2">Benefit: {product.benefit}</p>
76
          </div>
77
        ))}
78
      </div>
79
    </div>
80
  );
81
};
82

83
export async function getServerSideProps() {
84
  return {
85
    props: {
86
      apiUrl: process.env.NEXTAUTH_URL,
87
    },
88
  };
89
}
90

91
export default CatalogPage;```
92

93
I use prisma + postgresql from vergel
94

95
![](https://github.com/user-attachments/assets/8ac0ed8f-598b-46f8-90bc-9b0b6335deee)