it'll be easier to understand if you show code

This is my fetch for the products:

async function getProductData() {

const response = await fetch('http://127.0.0.1:8000/api/produtos/',
{
headers: {
'Authorization': 'Basic ' + btoa(user + ':' + pwd ),
'Content-Type': 'application/json; charset=utf8',
},
method: 'GET',
mode: 'no-cors'
}
);

if (!response.ok) {
throw new Error('Failde to fetch data')
}

return response.json()

}

Then i'm getting the response here:

const productData = await getProductData()

And passing it to the product component:

<Products data={productData} detail={getProductDetail} />


In the products components i got the id that i need:

export default function Products({ data }: ProdutosProps) {

const [getId, setGetId] = useState(0)

const [open, setOpen] = useState(false)

return (

<div className="mx-auto max-w-2xl px-4 py-16 sm:px-6 lg:max-w-7xl lg:px-8">

<div className="grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:gap-x-8">
{data.map((product: any) => (
<button key={product.cod_product} onClick={() => { setGetId(product.cod_product), setOpen(true) }} className="group">
</button>
))}
</div>

I used the useState to getId when i click on the button, and i need to pass this id to the fetch of products_detail, to you get it?

where's the detail fetch

also, format the code with three backticks at the beginning and end of the block

Sorry, it's my first time here.

async function getProductData() {

    const response = await fetch('http://127.0.0.1:8000/api/produtos/',
      {
        headers: {
          'Authorization': 'Basic ' + btoa(user + ':' + pwd ),
          'Content-Type': 'application/json; charset=utf8',
        },
        method: 'GET',
        mode: 'no-cors'
      }
    );

    if (!response.ok) {
      throw new Error('Failde to fetch data')
    }

    return response.json()

}

Then i'm getting the response here:

const productData = await getProductData()

And passing it to the product component:

<Products data={productData} detail={getProductDetail} />


In the products components i got the id that i need:

export default function Products({ data }: ProdutosProps) {

    const [getId, setGetId] = useState(0)

    const [open, setOpen] = useState(false)

    return (

        <div className="mx-auto max-w-2xl px-4 py-16 sm:px-6 lg:max-w-7xl lg:px-8">

            <div className="grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:gap-x-8">
                {data.map((product: any) => (
                    <button key={product.cod_product} onClick={() => { setGetId(product.cod_product), setOpen(true) }} className="group">
                    </button>
                ))}
            </div>

Here is the detail fetch:

async function getProductDetail(id: number) {

  const response = await fetch(`http://127.0.0.1:8000/api/produtos/produto/${id}/`,
    {
      headers: {
        'Authorization': 'Basic ' + btoa(user + ':' + pwd ),
        'Content-Type': 'application/json; charset=utf8',
      },
      method: 'GET',
      mode: 'no-cors'
    }
  );

  if (!response.ok) {
    throw new Error('Failde to fetch data')
  }

  return response.json()

}

How can i pass this to the products compenent getting the products components id?

and getProductDetail is defined/imported in the client component? It would help if you showed the full code of the server component and the full code of the client component not just the snippets of the fetches

Sure, this is my page:

import Products from '@components/produtos/rodas_e_rodizios/Products'


const user = process.env.USER
  
const pwd = process.env.PWD

async function getProductData() {

    const response = await fetch('http://127.0.0.1:8000/api/produtos/',
      {
        headers: {
          'Authorization': 'Basic ' + btoa(user + ':' + pwd ),
          'Content-Type': 'application/json; charset=utf8',
        },
        method: 'GET',
        mode: 'no-cors'
      }
    );
  
    if (!response.ok) {
      throw new Error('Failde to fetch data')
    }
  
    return response.json()

}

async function getProductDetail(id: number) {

  const response = await fetch(`http://127.0.0.1:8000/api/produtos/produto/${id}/`,
    {
      headers: {
        'Authorization': 'Basic ' + btoa(user + ':' + pwd ),
        'Content-Type': 'application/json; charset=utf8',
      },
      method: 'GET',
      mode: 'no-cors'
    }
  );

  if (!response.ok) {
    throw new Error('Failde to fetch data')
  }

  return response.json()

}


export default async function page() {

    const productData = await getProductData()

    return (
        <section className="rodas-e-rodizios">
            
            <main className="mx-auto px-4">


                <div className="grid grid-cols-1 gap-x-8 gap-y-10 lg:grid-cols-4">
                    
                    <div className="lg:col-span-3 bg-gray-100">
                        <Products data={productData} detail={getProductDetail} />
                    </div>
                </div>
            </main>
        </section>
    )
}

And the products component:

i don't think you need to have getProductDetail defined in your server component. just define inside the client component and use it there

using a server function like that would require it be setup and passed as a server action https://nextjs.org/docs/app/api-reference/functions/server-actions

but i'd just try the first thing i said

also, in your server component, is that API request to http://127.0.0.1:8000/api/produtos/ a nextjs route handler? if so, don't consume route handler end points in server components

just call the function directly

No, my Api is coming from Django Rest Framework. Well, in that case i will try to define in the client components as you said. Thank you soo much for the help. I'm a begginer here and i don't now much of nextjs yet

ah ok if it's coming from external then all good. just thought i'd mention since it can be a common mistake