Next.js 14에 Notion-Api 를 연결하여 만든 포트폴리오 페이지입니다. Notion DB를 일종의 CMS로 사용해 SSR로 페칭된 데이터를 React-notion-x를 커스텀하여 렌더링 했습니다. 블로그 Post 별로 category, tag, slug 를 지정하고, Dynamic Routing과 getStaticPath, getStaticProps를 적용했으며, next-sitemap을 사용하는 등 SEO에 신경을 써서 구현하였습니다. 백그라운드에 노출된 3D 오브젝트는 react-three/fiber 을 사용해 구현하였고, Y 스크롤에 따라 자연스러운 변화가 있도록 했습니다. react-scroll과 aos를 사용하여 자연스러운 스크롤 및 애니메이션을 구현했습니다.
FEATURE
- Next.js Dynamic Routing 과 next-sitemap 을 적용한 SEO
- Next.js ISR 사용하여 블로그 데이터 갱신
- react-three/fiber 을 사용하여 백그라운드 오브젝트 구현
- react-scroll, aos 사용해 자연스러운 인터렉션 구현
STACKS
- Next.js 14
- React Notion X
- React-three/fiber
- React-three/drei
- Zustand
- MUI
- React-scroll
- Aos