Next 로 배포를 하던 중 아주 치명적인 에러가 발생했다.
사용자의 프로필 페이지로 들어갈 때 404 에러가 뜨던 것이 원인이었다.
특별한 원인을 찾을 수 없던 발을 동동주처럼 구르던 중 해결책을 찾게 되었다.

여러 다방면으로 시도를 하던 중 vs코드의 터미널 콘솔에서 힌트를 얻을 수 있었다.

The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type".

:first-child 속성으로 인해서 서버사이드 렌더링 시에 문제가 발생한다는 문구였다.
부족한 영어실력으로 해석하자면 ":first-child" 속성은 SSR 시에 잠재적으로 안전하지 않으니 ":first-of-type" 으로 바꾸라는 문구였다.

여기서 힌트를 얻었다.

first-child vs first-of-type

div > p:first-child { color: blue; }

위의 코드는 div 의 자식 p 요소 중 첫번째 요소의 글자 색상을 파란색으로 스타일링해주는 코드다.
가장 일반적으로 쓰이는 방식이고 나도 이 방식을 사용했다.

div > p:first-of-type { color: blue; }

위의 코드 또한 div 의 자식 p 요소 중 첫번째 요소의 글자 색상을 파란색으로 스타일을 입혀준다.
그럼 :first-child 와의 차이가 무엇일까?

<div>
  <div>div element 1</div>
  <p>p element 1</p>
  <p>p element 2</p>
</div>

HTML 구조가 이렇게 있다고 됐을 때 위의 :first-child 의 경우 스타일이 입혀지지 않는다.
왜냐하면 first-child 는 "div element1"의 <div> 요소인데 앞에는 p 를 가리키면서 불일치하기 때문이다.

반면 :first-of-type 을 쓸 경우 p 요소만을 기준으로 div 의 자식 p 요소 중에서 첫번째 자식요소를 선택하게 된다.
즉 가상클래스 중에서도 '타입만을 체크'하는 것이기 때문에 비교적 '안전'하다고 볼 수 있다.

const Section = styled.section`
  // ...
  & > div:first-of-type {
    cursor: auto;
  }
  & > div:last-of-type {
    border-right: none;
  }
`

때문에 코드 상에서 :first-child 와 :last-child 가 쓰이는 부분을 :first-of-type 과 :last-of-type 으로 수정해주었고 문제를 해결할 수 있었다.