Next.js Discord

Discord Forum

problem with react-gallery

Unanswered
Tomistoma posted this in #help-forum
Open in Discord
TomistomaOP
could anyone help me with this?

10 Replies

TomistomaOP
import ImageGallery from "react-image-gallery";

export default async function Page({
  params: { auctionId },
}: {
  params: { auctionId: string };
}) {
  const { data, error } = await getAuctionById(auctionId);

  if (error) {
    return error?.message;
  }

  const images = [
    {
      original: "https://picsum.photos/id/1018/1000/600/",
      thumbnail: "https://picsum.photos/id/1018/250/150/",
    },
    {
      original: "https://picsum.photos/id/1015/1000/600/",
      thumbnail: "https://picsum.photos/id/1015/250/150/",
    },
    {
      original: "https://picsum.photos/id/1019/1000/600/",
      thumbnail: "https://picsum.photos/id/1019/250/150/",
    },
  ];

  const {
    // price,
    mileage,
    engine_capacity,
    production_year,
    localization,
    rating,
    contact_name,
    contact_phone,
    contact_whatsapp,
    brands,
    models,
    // fuel_types,
    imageUrl,
    gearboxes,
    body_types,
    steering_wheels,
    colors,
    auctions_has_equipments,
  } = data;

  return (
    <>
      <Header />
      <main>
        <section className="mb-8">
          <div className="container grid grid-cols-12 gap-x-6">
            <div className="section-title col-span-full">
              <a href="#" className="flex font-semibold text-primary-500">
                <img src="/images/icon-arrow_left.svg" className="me-2" />{" "}
                Powrót do listy ogłoszeń
              </a>
            </div>
            <div className="col-span-full md:col-span-6">
              <ImageGallery items={images} />
              {/* <img src={imageUrl} className="w-full" /> */}
            </div>
TomistomaOP
I added "use client", but still error
app-index.js:33 Warning: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding `'use client'` to a module that was originally written for the server.
    at Page
export default async function Page({
delete async
if you use client-side components
TomistomaOP
but page should be server component
return by server
and how send request in client component?
TomistomaOP
??