I'm trying a purely static approach on a new project Next v12 project, building up 5-6 data files to feed into getStaticProps. Here's one of the shapes of the data file (but they're all similar):

import SqAshland1 from '../../public/best-places-imagery/square-ashland.jpg'

const bestPlacesList = [
   {
    "cityName": "Ashland",
    "state": "WI",
    "country": "US",
    "imageSquare": SqAshland1,
    "slug": "ashland-wi"
   }, 
   ...
]

const encodeBestPlacesList = JSON.stringify(bestPlacesList)
export default bestPlacesList

This is what it looks like when I inject this file in my /pages/best-places/[slug].js:

export async function getStaticProps({ params, preview = false, previewData }) {
  
  const parsedBestPlacesList = JSON.parse(bestPlacesList)
  const cityData = parsedBestPlacesList.find( city => city.slug === params.slug )

  return {
    props: {
      preview,
      cityData: cityData,
    },
    revalidate: 60,
  };
}

export async function getStaticPaths() {
  const cities = JSON.parse(bestPlacesList);

  return {
    paths: cities?.map( (city) => ({
      params: { slug: city.slug }
    })),
    fallback: false,
  };
}

It's working well, but the images keep breaking when I deploy. This makes me think I need to do base64 encoding for the images but where do I do this so I don't break Next's image fetching? Curious if anyone has tried this approach and knows how to balance Next and Node just right.