1️⃣ 문제 상황
모바일 뷰에서 확대가 되지 않게 만들기 위해 viewport metadata 옵션을 추가해야되는데, 구글링을 해서 시도를 해봐도 되지 않거나, 나의 프로젝트 구성이랑 다른 파일을 말해서 혼동이 왔다.
2️⃣ 문제 해결 시도
실패 1.
<Head>태그를 사용해서 안에 <meta>태그를 사용해서 viewport를 수정하라고 나와있는 정보를 찾아서 시도해봤지만 실패했다. 또한 이 방법을 말하면서 _document, _app파일을 언급하였지만 이런 파일은 내 프로젝트에 존재하지 않는 파일들이라서 혼동이 왔지만 더 알아본 결과 이 파일들은 next.js 12 이하 버전들의 파일 구조라고 한다.
실패 2.
버전 13 이후에는 따로 import해서 쓸 필요 없이, 그냥 <head>태그를 쓰면 된다고 해서 시도 해봤지만 실패 (추가가 되긴 했지만 기본 viewport태그가 사라지지 않아 적용되지 않았다.)
실패 3.
export const metadata: Metadata = {
title: "광합성 많은 새싹, FE 최윤석",
description:
"This is a website for FrontEnd Developer Yunseok Choi's Portfolio",
};여기에 viewport를 추가시켜서 추가시키라는 말도 있었지만 이건 추가 자체도 안됐다.
3️⃣ 문제 해결
next.js 공식문서를 찾아보니 답이 나왔다... 난 뭘 한 것인가.. 다음부터는 공식문서에서 열심히 열심히 찾아보자...
export const viewport: Viewport = {
width: "device-width",
initialScale: 1,
maximumScale: 1,
userScalable: false,
};layout.tsx 파일에서 metadata와 같이 이런 방식으로 타입 Viewport를 import해서 객체를 만들자. 그럼 기본 viewport meta태그 대신 위 처럼 지정해준 옵션이 적용된다.
끝!
이용자와 서비스를 하나로 만드는 개발자, Hermann입니다.