Как на Next Js на серверных компонентах получать данные?

Все равно таже ошибка

GNG999, а какая у вас версия next? попробуйте другое решение:

import classNames from "classnames/bind";
import style from './style.module.scss';
import Image from "next/image";
import ProductItem from "@/components/product-item";
import Link from "next/link";
import { use } from 'react';

const cn = classNames.bind(style);

const getData = async () => {
    const response = await fetch("http://localhost:9000/api/cart/qty");
    if (!response.ok) {
        throw new Error("Failed to fetch data");
    }
    return await response.json();
};

export default function MainPage() {
    const data = use(getData());

    return (
        <div className={cn('main-page')}>
            <div className={cn('title-section')}>
                <div className={cn('title')}>
                    <p>
                        Уникальные изделия кубачинских мастеров
                    </p>
                    {/* Используем полученные данные */}
                    <p>{data.qty}</p>
                </div>
            </div>
            <div className={cn('features')}>
                <div className={cn('item')}>
                    <Image src={'/heart.png'} alt={'индивидуальный подход'} width={50} height={50} />
                    <span>Индивидуальный подход</span>
                </div>
                <div className={cn('item')}>
                    <Image src={'/hot-air-balloon.png'} alt={'индивидуальный подход'} width={50} height={50} />
                    <span>Доставка по всей России</span>
                </div>
                <div className={cn('item')}>
                    <Image src={'/diamond-ring.png'} alt={'индивидуальный подход'} width={50} height={50} />
                    <span>300+ изделий</span>
                </div>
                <div className={cn('item')}>
                    <Image src={'/shopping-store.png'} alt={'индивидуальный подход'} width={50} height={50} />
                    <span>Наш магазин открыт с 2003 года</span>
                </div>
            </div>
            <div className={cn('products-catalog')}>
                {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((el) => (
                    <Link className={cn('product-item-link')} href={`/jewellery-catalog/${el}`} key={el}>
                        <ProductItem />
                    </Link>
                ))}
            </div>
        </div>
    );
}

Данила, версия 14.1
пока также
я закомментил const data = use(getData()); внутри MainPage и саму getData
те просто компонент MainPage - таже ошибка , че то сам async нексту не нравится

GNG999, https://nextjs.org/docs/app/building-your-applicat...

Нельзя использовать асинхронные компоненты для клиентской стороны - они работают исключительно как Server Components. Об этом написано в документации.

Если компонент должен быть серверным и асинхронным, не указывайте 'use client' в начале файла, и просто оставляйте его как серверный:

export default async function MainPage() {
  const data = await getData();
  return (
    <div className={cn('main-page')}>
      <div className={cn('title-section')}>
        <div className={cn('title')}>
          <p>Уникальные изделия кубачинских мастеров</p>
        </div>
      </div>
      {/* другие части страницы */}
    </div>
  );
}

Если компонент требует клиентской интерактивности, нужно загружать данные на серверной стороне, а на клиенте использовать хуки для обработки состояния:

'use client';

import { useState, useEffect } from 'react';

export default function MainPage() {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const result = await getData();
      setData(result);
    }
    fetchData();
  }, []);

  if (!data) {
    return <div>Loading...</div>;
  }

  return (
    <div className={cn('main-page')}>
      <div className={cn('title-section')}>
        <div className={cn('title')}>
          <p>Уникальные изделия кубачинских мастеров</p>
        </div>
      </div>
      {/* другие части страницы */}
    </div>
  );
}