Internal server error when calling Laravel API from Next.js page

I have a working API in Laravel. Tested using Postman.

The Laravel project folder and the Next.js project folder are inside the same parent laravel-next folder. (Laravel is served at localhost:8000 and Nextjs is served at localhost:3000, so it could be some CORS issue on the Laravel side?)

To get list of all items I use this API endpoint: http://localhost:8000/api/products/. I already inserted a few rows to the products table and this is how my api/products GET method looks like:

public function index()
{
    return ProductResource::collection(Product::all());
}

It works because when I manually type in the browser localhost:8000/api/products the JSON object with the products is displayed.

But when I try to call the API from the Next code, I get 500 (Internal Server Error).

This is the product.jsx code:

function Product({ data }) {        
  }      
  
  export async function getServerSideProps() {
    // Fetch data from external API
    const res = await fetch(`http://localhost:8000/api/products/`, {
      method: 'GET',
      mode:'cors',
    })
    const data = await res.json()        
  
    // Pass data to the page via props
    return { props: { data } }
  }
  
  export default Product