반응형
import React from 'react';
import Head from 'next/head';
import Nav from './Nav';
import Footer from './Footer';
type Props = {
children: any;
}
function Layouts({children}: Props) {
return (
<div>
<Head>
<Nav />
</Head>
<main>{children}</main>
<Footer />
</div>
)
}
export default Layouts;
// 위처럼 구성했었다.위 처럼 내용을 구성했더니...
클릭 Nav 컴포넌트의 클릭이벤트가 아무것도 작동이 안되는 버그가 있었다.
흠....
무엇이 문제일까? 하고 Nav바만 엄청 보고 고민하고 그랬는데, 원인은 Head였다.
import React from 'react';
import Nav from './Nav';
import Footer from './Footer';
type Props = {
children: any;
}
function Layouts({children}: Props) {
return (
<div>
<Nav />
<main>{children}</main>
<Footer />
</div>
)
}
export default Layouts;Head가 Nav를 중첩으로 감싸면서 마치 가상의 Overlay로 어떠한 태그가 덮어씌워진 것으로 영향을 끼쳤다.
그로인해 해당 컴포넌트에 클릭이벤트가 먹통이 되면서 아예 작동되지 않는 문제가 발생...
이거 해결하는데 4시간+1시간(이걸로 해결이 안되서 스트레스 풀러 게임하느라) 걸렸다.
nextjs+typescript로 개발중인데, Image 태그가 불러와지지 않는 문제가 있어 이것도 해결하느라 고생중...
s3버킷부터 열고 임시로 테스트 할까 하는데, 해당 클라우드 쓰면 돈나가니...;;;
728x90
'코딩 > Next.js' 카테고리의 다른 글
| [next.js] 심심풀이 진행 중... (0) | 2022.09.14 |
|---|---|
| [next.js] getServerSideProps, getStaticProps, getStaticPaths (0) | 2022.01.16 |
| [Next]동적 라우팅 방식 (0) | 2021.12.19 |
| [Next] 서버사이드의 폴더 경로 사이트 페이지 방식 (0) | 2021.12.19 |