Вообще есть такая проблемка в Next, что нет оптимального способа зафетчить что-то один раз, например глобальные настройки, и потом использовать это в приложении. Наиболее близким вариантом решения было-бы использовать getStaticProps в _app, но по некоторым причинам это на данный момент не возможно.

Один из разработчиков Next предлагает следующие решения:

• I want to fetch data once, and only once, until the next build, globally for my entire application. Solution
  
• I want to share a layout between pages, while persisting React state to allow nested layouts. Solution
  
• Finally, of course, you can create a shared function fetching your data and use it inside getStaticProps for every page
  

Как по мне, именно для вашей задачи стоило-бы использовать этот вариант

Скрипту нужно дождаться загрузки DOM дерева.
2 решения:

1. Весь js код обвернуть в

window.addEventListener("DOMContentLoaded",function(){

})

или

window.addEventListener('DOMContentLoaded',()=>{

});

2. При подключении скрипта <script src="" defer></script>

Статья

Со стороны бека тебе нужно преобразовать buffer в base64, благо делается это очень просто
Buffer.from('your img buffer').toString('base64')
и дальше все должно работать корректно на стороне фронтента.

P.S. Я думаю, что преобразовать buffer прямо со стороны фронтенда не возможно, потому что сам по себе buffer это прикол от nodejs, js в браузере про него ничего не знает.