next.js에서 히스토리 탭 기능 구현

Question

next.js를 사용해서 브라우저에 탭 기능을 사이트 내에서 구현해야 하는 상황입니다. 탭 기능에 추가로 페이지 내부에서 다른 페이지로 가는 링크를 클릭하면 탭 목록에 추가되어야 하고 기존에 있던 탭에 보이던 페이지는 상태가 유지되어야 합니다. 지금 구현한 방법은 미리 모든 페이지의 페이지 컴포넌트를 하나의 파일에 넣어두고 링크를 클릭하면 store에 해당 페이지의 데이터를 넣어주고 Layout 컴포넌트에서 router.path를 비교해서 show/hide을 결정해주고 있는데 뭔가 다른 방식이 없을까요?

포크코딩 · Answer

1. 제일 쉬운 방법

- shadcn ui를 사용하세요. 아마 ‘빵줄기(한국말로 뭐라 따로 부르는 말이 있나요..?)’ 기능을 원하시는거 같습니다.

https://ui.shadcn.com/docs/components/breadcrumb

2. 직접구현 - React Context API 또는 zustand + next/navigator

- redo, undo 구현하듯이 리액트 콘텍스트 api를 사용하여 히스토리를 저장하세요. 별도 특별한 동작이 필요한 경우 useReducer 훅과 같이 구현하세요. 방문 url을 얻고 사용하는데는 router.path보다 usePathname 훅 사용을 권해드립니다. 더 쉬울거에요.