【Next.js】background-imageが表示されない

引き続きサイトのtracingをしているのですが、
三本線をhoverした時に表示したい背景画像が見えなくて、おや〜？となって調べてみました。

.header {
...(略)...
&__mark {
    width: 8rem;
    background-image: url('/../../../public/images/header_mark02.svg');
    background-size: cover;
  }
  &__mark > a:hover {
    opacity: 0;
  }

対応

Next.jsのdocumentation「Static File Servering」には、

Next.js can serve static files, like images, under a folder called public in the root directory. Files inside public can then be referenced by your code starting from the base URL (/).

とありました。
つまり、正しいCSSは、

background-url: url('/images/header_mark02.svg');

でした！
無事hoverした時に背景画像が表示できました〜めでたいめでたい。