Question
Hi. Can you please help me to solve the problem? I have this file and locally everything works fine.
1// /app/(public)/catalog/page.tsx2'use client'34import { useEffect, useState } from 'react'5import Link from 'next/link'67type Product = {8 id: number9 name: string10 slug: string11 imageUrl: string12 description: string13 price: number14 benefit: number15}1617const CatalogPage = () => {18 const [products, setProducts] = useState<Product[]>([])19 const [loading, setLoading] = useState(true)2021 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 }, [])3031 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 <div38 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 }5051 if (products.length === 0) {52 return <div className="p-4">No products available yet.</div>53 }5455 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 <div61 key={product.id}62 className="border p-4 rounded-lg shadow-md">63 <Link64 className="text-xl font-semibold"65 href={`/catalog/${product.slug}`}>66 {product.name}67 </Link>68 <img69 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}8283export default CatalogPage
But when I upload it to Vercel I get an error. I have specified all keys, I feel that I need to add domain before api, but I tried different variants, but the server domain transfer does not work in the client.
1// /app/(public)/catalog/page.tsx2'use client';34import { useEffect, useState } from 'react';5import Link from 'next/link';67type Product = {8 id: number;9 name: string;10 slug: string;11 imageUrl: string;12 description: string;13 price: number;14 benefit: number;15};1617const CatalogPage = ({ apiUrl }) => {18 const [products, setProducts] = useState<Product[]>([]);19 const [loading, setLoading] = useState(true);2021 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]);3031 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 <div38 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 }5051 if (products.length === 0) {52 return <div className="p-4">No products available yet.</div>;53 }5455 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 <div61 key={product.id}62 className="border p-4 rounded-lg shadow-md">63 <Link64 className="text-xl font-semibold"65 href={`/catalog/${product.slug}`}>66 {product.name}67 </Link>68 <img69 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};8283export async function getServerSideProps() {84 return {85 props: {86 apiUrl: process.env.NEXTAUTH_URL,87 },88 };89}9091export default CatalogPage;```9293I use prisma + postgresql from vergel9495
