reivunxx

Практически любой элемент, который содержит в себе логику, завязанную на действиях пользователя, в нексте реализуется в клиентских компонентах
если что-то из него можно вынести как статичную часть, то можно сделать серверный компонент со статичной частью и в него уже засунуть клиентский.
В целом на такой композиции 14 некст и построен

Из описания не совсем понятно чем обусловлена необходимость использовать grid
Например, можно сделать так

.reference-container {
  $toolHeight: 100px;
  $searchPanelHeight: 50px;

  height: 100%;
  display: flex;
  flex-direction: column;


  .tools {
    height: $toolHeight;
  }

  .searchPanel {
    height: $searchPanelHeight;
  }

  .mainContent {
    flex-grow: 1;
  }
}

Все решилось путем отключения Helmet

Оба бордера произвольной формы, и желтый и черный, присмотритесь
Самый простой вариант - отрисовать в svg и кидать как фон