How do I export data from a web scraper api into a page with Next.js?

Question

I'm working a project to scrape movie titles/images/summaries from websites, and I've gotten the pages/api/scraper.js file to console.log() the correct data. I'm having trouble fetching that data in a normal page (i.e. page/movies/list) through getServerSideProps(). Can I get an explanation on how to properly structure the file for exporting and how to properly fetch the API for a Next.js app? Files below

pages/api/scraper.js

const request = require('request')
const cheerio = require('cheerio')

    request('imdb.com/movies/', (error, response, html) => {
      let movies = []
      if (!error && response.statusCode == 200) {
        const $ = cheerio.load(html)
        const siteHeading = $('.entry-header')
        siteHeading.each((index, element) => {
          const title = $(element).children('.entry-title').text()
          const summary = $(element).parent().children('.entry-content').text()
          const thumbnail = $(element)
            .parent()
            .children('.entry-content')
            .children()
            .first()
            .find('img')[0].attribs.src
          movies.push({
            title: title,
            summary: summary,
            thumbnail: thumbnail,
          })
        })
      }
      return movies

/pages/movies/list

import React from 'react'

export default function NewsPage({ movies }) {
  return (
      <section>
       {movies.map((movie, ind) => {
          return (
             <img src={movie.thumbnail} />
             <h1>{movie.title}</h1>
             <h2>{movie.summary}</h2>
         )}
      }
      </section>
  )
}

export async function getServerSideProps() {
  const { movies } = fetch('api/scraper.js')
  return { props: movies}
}