[NextJs] 라우팅, 동적 라우팅과 함수 전달

NextJs는 라우팅을 관리하는 방식이 리액트랑 다르다. 

리액트를 예로 들어보자면 

다른 프로젝트 리액트 라우팅 관리

이런식으로 해줬었는데 Next는 폴더단위로 구성하는 방식부터 다르다.

 

하나의 컴포넌트를 생성하고 상위 컴포넌트에서 라우트 경로 설정을 해주고 나서

pages라는 폴더에 경로와 맞는 이름의 파일을 생성하면 끝이다. 

사진으로 설명을 대체하자면 

 

컴포넌트 내 경로 설정

pages 내 경로와 맞는 파일 생성

NFT Explore를 클릭하게 되면 경로를 폴더와 파일로 추적하여 UserAuctionPage를 화면단에 구성해준다

 

동적 라우팅과 함수 전달

이 부분에서 상당히 애를 먹었었는데 해결방법을 찾았고 풀어보겠다

동적라우팅과 url 까지 같이 보여주자면 

일단 맵 함수 안을 까보자면

<Link href={{pathname: '/NftDetail/[id]', 
                      query: 
                      { 
                        nftImg: token.IMGURI,
                        nftname: token.NFTname,
                        nftDes: token.NFTDes
                      }, }} as = {`/NftDetail/${token.tokenId}`}>
                <button onClick={() => Auction(token)} >Auction</button>
              </Link>

 

<Link href={{pathname: '/NftDetail/[id]' }} as = {`/NftDetail/${token.tokenId}`}>

href로 경로를 설정해주고 [id]는 동적라우팅 부분이다 이부분은 맵함수에서 받은 값으로 처리를 해주었고 

pages의 구성은 다음과 같다

 

동적 라우팅은 일반 라우팅과 다른점이 있는데 

[id].js

NftDetailPage

withRouter 설정을 해주어야 되는 점이다.

 

Link로 함수 전달

<Link href={{pathname: '/NftDetail/[id]', 
                      query: 
                      { 
                        nftImg: token.IMGURI,
                        nftname: token.NFTname,
                        nftDes: token.NFTDes
                      }, }} as = {`/NftDetail/${token.tokenId}`}>
                <button onClick={() => Auction(token)} >Auction</button>
              </Link>

여기서 다시 보게 되면 query로 함수를 전달해주었다

NftDetailPage

함수를 받는 컴포넌트는 다음과 같이 구성해서 받을 수 있다.

 

이 부분을 어떻게 하는지 몰라 혼자 공부하느라 꽤 많은 시간을 보냈다.

하지만 좋은 기술을 익혀가니 아주 나이스한 부분이라 할 수 있겠다