💡Aha!

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 과정에서 문제가 발생한다.

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

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

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

2024 Dohyun Jung.
Made with ☕️.