Error with Next 13 async Component Data fetching [duplicate]

Question

I'm using Nextjs 13 and this is my component:

"use client";

import { Carousel } from "react-responsive-carousel";
import Image from "next/image";
import axios from "axios";
import { useState } from "react";
import Product from "./product";

export default function Page() {
  return (
    <div className="container">
      <div className="searchComponent">
        <input type="text" placeholder="Search" />
        <button>
          <i className="icon-search"></i>
        </button>
      </div>
      <Carousel showThumbs={false}>
        <div>
          <Image
            src={"/assets/slide1.png"}
            width="0"
            height="0"
            sizes="100vw"
            style={{ width: "100%", height: "auto" }}
          />
        </div>
        <div>
          <Image
            src={"/assets/slide1.png"}
            width="0"
            height="0"
            sizes="100vw"
            style={{ width: "100%", height: "auto" }}
          />
        </div>
        <div>
          <Image
            src={"/assets/slide1.png"}
            width="0"
            height="0"
            sizes="100vw"
            style={{ width: "100%", height: "auto" }}
          />
        </div>
      </Carousel>
      {/* @ts-expect-error Async Server Component */}
      <Product />
    </div>
  );
}

and this is my Product component:

import React from "react";

async function getData() {
  const res = await axios
    .get(`https://jsonplaceholder.typicode.com/users`)
    .then((res) => {
      return res;
    });
  return res;
}

export default async function Product() {
  const name = await getData();

  return <div>1</div>;
}

but it's not working and I'm getting:

Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead error.

I also tried this code {/* @ts-expect-error Async Server Component */} but this problem is still persistent.

Do you put your Product component in a separate file? Is it located inside the app folder? — nart
– nart, Commented Mar 20, 2023 at 7:12
yes its in another separate file and its alongside of Page.js and I put it to app folder @nart — Arman Bagheri
– Arman Bagheri, Commented Mar 20, 2023 at 7:16
Hi @ArmanBagheri! Since you are using "use client", I assume you are using the app directory (let me know if you are not), in which case check out: stackoverflow.com/questions/74981049/…. — Youssouf Oumar
– Youssouf Oumar, Commented Mar 20, 2023 at 7:56

lpizzinidev · Accepted Answer · 2023-03-20 07:20:55Z

2

You should load data using getServerSideProps and pass them to the component which should be declared in a separate folder (eg. components) and not as an async function:

export default function Page({ productData }) {
  return (
    <div className='container'>
      ...
      <Product productData={productData}/>
    </div>
  );
}

export async function getServerSideProps() {
  const res = await axios
    .get(`https://jsonplaceholder.typicode.com/users`)
    .then((res) => {
      return res;
    });

  return {
    props: {
      productData: res,
    },
  };
}

Product component:

export default function Product({ productData }) {
    return <div>1</div>;
}

answered Mar 20, 2023 at 7:20

lpizzinidev

13.3k2 gold badges15 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Arman Bagheri Over a year ago

Thanks for your help. its worked :)

Collectives™ on Stack Overflow

Error with Next 13 async Component Data fetching [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related