React Bootstrap in Next.js - Navbar 링크, 정렬,클래스명

현재 진행하고 있는 메인페이지

위 페이지에서 사용하고 있는 Navbar는 ReactBootstrap에서 가져온걸 사용중이다.

 

다만 여기서 문제가 발생했다.

 

1. Nav.Link를 그대로 사용하면 페이지는 이동하지만 새로고침 하게된다. Next.js에서는 SPA방식으로

동작하려면 Link를 사용해 줘야한다. 그래서 이와같이 해결해 주었다.

import Link from "next/link";
<Nav.Link >
      <Link href="/">
          <div><a className='navmenu'>키워드검색</a></div>
        </Link>
    </Nav.Link>

이와같이 Nav.Link속성은

 <Nav.Link href="/"><h4>라면검색</h4></Nav.Link>

이와같이 링크가 들어있는데 아래 방식으로 사용하면 SPA방식을 사용할 수 없다. 그래서 href속성을 지워주고

 

Nav안에서 반응형에도 동작하기위해 남겨두고 안에서 Link를 사용해 주었다.

 

그리고 Next.js에서 사용하는 방법인 a태그내에서 className을줘 스타일을 지정해 주었다.

 

<style jsx>{`
        .navmenu {
          color:grey;
          text-decoration-line: none;
          font-size:20px;
        }
        
      `}</style>

a태그이기때문에 밑줄이 보기싫게 생겨서 text-decoration-line으로 없애주고

 

기타 속성도 적당히 주었다. 그리고 하나 tip이 Nav메뉴안에서 정렬이 제대로 맞지 않는다면

 

겉에를 div로 한번 감싸주는걸로 해결할 수 있었다.

 

tip. .navmenu로하면 classname을 말하는거고

 

그냥 a {} 하면 속성을 말하는건데 잠시 착각했었다. 그리고 또하나... 중간에 ; 하나를 빼줘도 오류가난다!

 

꼭 확인하기

 

{/* div감싸주는것만으로도 잘목는다 띄어쓰기나 블럭 속성 */}
<div>
    
        <Link href="/index2">
          <a className='navmenu'>카테고리검색</a>
        </Link>
        <Link href="/index2">
          <a className='navmenu'>카테고리검색2</a>
        </Link><Link href="/index2">
          <a className='navmenu'>카테고리검색3</a>
        </Link>
    </div>

 

이와같이 글씨가 홀짝홀짝 위아래로 들쭉날쭉 했는데 div하나를 줘서 평평하게 정렬을 할 수 있었다.

 

다만 이렇게하면 Bootstrap의 NavBar을 작은 화면에서(반응형) 정상적으로 활용하지 못한다.

 

<> </>는 소용이 없다!

 

이와같이 작은화면에서 햄버거 버튼을 클릭 했을 때 세로로 길게 메뉴가 나오게 하려면

 

기본 Nav.Link를 사용해주면되고 저런 화면에서도 가로로 보여주고싶으면 과감하게 Link만 사용해줘도

 

된다. 이건 선택이다! 생각해보니 둘다 유용하게 쓸 수 있을거같다.