Estoy probando un enfoque puramente estático en un nuevo proyecto Next v12, construyendo 5-6 archivos de datos para alimentar getStaticProps . Esta es una de las formas del archivo de datos (pero todas son similares):

 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

Así es como se ve cuando inyecto este archivo en mi /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, }; }

Funciona bien, pero las imágenes se rompen cuando lo implemento. Esto me hace pensar que necesito hacer la codificación base64 para las imágenes, pero ¿dónde hago esto para no romper la búsqueda de imágenes de Next? Es curioso si alguien ha probado este enfoque y sabe cómo equilibrar Next y Node correctamente.