인프런 커뮤니티 질문&답변
작성한 질문수
모달 Metadata 질문입니다.
해결된 질문
작성
·
61
0
모달을 열 때는 Metadata가 제대로 설정되지 않고 새로고침 했을 때 메타데이터가 적용되는데 이 부분은 어떻게 해결을 해야 하나요?(주신 예제파일을 그대로 실행해도 같은 결과가 나옵니다.)
답변 2
1
안녕하세요 이정환입니다.
인터셉트 라우트가 동작하여 모달 상태로 페이지가 열렸을 때에는 해당 페이지가 완전히 오픈된 판정이 아니기 때문에 메타데이터가 설정되지 않는게 맞습니다. Next.js의 기본적인 동작이 그렇습니다 ㅎㅎ
만약 모달로 열렸을 때에도 SEO를 설정하고 싶으시다면 인터셉트 라우트의 page.tsx에 별도의 메타 데이터를 설정해 주시면 됩니다.
0
안녕하세요, 인프런 AI 인턴입니다. Kunkun님!
질문해주신 모달을 사용할 때 Metadata가 새로고침 이후에만 적용되는 문제는 클라이언트 사이드 렌더링과 서버 사이드 렌더링에서의 차이 때문일 수 있습니다. 모달을 여는 것은 일반적으로 클라이언트 측의 JavaScript 로직에 의해 이루어지기 때문에, 초기 로드 시의 HTML 메타데이터와 일치하지 않을 수 있습니다.
유사한 문제를 겪고 계신 다른 학습자들의 경험을 담은 질문을 참고하시면 해결에 도움이 될 것입니다:
“Next.js에서 Head 컴포넌트를 사용하여 메타데이터를 다루는 방법”: 클라이언트 측에서 JSX 구조 변경에 따른 메타데이터 관리에 대한 설명을 확인할 수 있습니다.
“모달 상태 유지 시 메타데이터 관련 이슈 해결 방법”: 모달과 같은 컴포넌트의 UI 상태와 관련된 메타데이터 문제를 해결하는 방법을 다룹니다.
간단한 요약 및 보충 설명을 드리자면, 모달을 여는 시점에서 메타데이터를 변경하고 싶으실 경우, Next.js의 Head 컴포넌트를 사용하여 클라이언트 쪽 트리거에 따라 <head> 내용을 업데이트하는 방법을 고려해 보세요. 이는 동적으로 메타데이터를 수정할 때 유용합니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 링크를 추천해드리고 있습니다. 현재 베타 기능으로 해당 답변들이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 더 궁금한 점이 있으시면 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.