Next.js에서 meta viewport 위치

문제

_app.js에 viewport를 별도로 지정하면 app initialize 과정에서 일시적으로 viewport 값이 초기화된다.

왜 생기나?

Next.js의 기본 viewport meta와 사용자 지정한 viewport meta를 합치는 도중에 생기는 듯?

문제는 이게 SSR을 사용한다면 컨텐츠가 DOM에 그려진 채로 viewport를 변경되는 것 같다. 그래서 Lighthouse Audit이 모바일에서 버튼이 너무 작다고 경고를 보낸다...

해결법

현재로썬 좀 곤란한 과정이다.

원래 _document.js에 넣어서 사용하면 되겠지~ 싶었는데 Next.js에서 나오는 viewport 때문에 viewport가 두 개가 된다.

공식 도큐멘트에서 _app.js 에서 next/head를 사용하라고 해서 사용했더니, 이런 app initialize 과정에서 문제가 발생한다.

1export function defaultHead(inAmpMode = false): JSX.Element[] {
2  const head = [<meta charSet="utf-8" />]
3  if (!inAmpMode) {
4    head.push(<meta name="viewport" content="width=device-width" />)
5  }
6  return head
7}

애초에 프레임워크에서 viewport가 나오는게 맞나 싶긴 하지만... 우선 난 굳이 user-scaleable을 넣을 필요는 없어서 그냥 포기하고 쓰기로 했다

추후 viewport를 끌 수 있는 옵션이 나왔으면. inAmpMode는 일반 앱에선 건들지 못하는 옵션같고...