회사에 next js로 구현된 프로젝트들은 전부 next 12로 구현되어 있었다.
next js 13이 나왔을때 안전성 이유로 12를 계속 사용하였으나 13으로 버전을 올린 후 13버전의 코드에 맞게 설계를 다시 진행 하였다.
12에선 SSR이나 SSG를 사용 했을 때 getserversideprops, getstaticprops를 사용해서 사용 했었는데 13 부터 page.tsx로 페이지를 만든어서 use client를 사용해서 client 와 서버를 분리 해서 사용이 가능해졌다. 약간 12때는 getserversideprops, getstaticprops 이런것 들이 같이 들어 있어서 좀 난잡한 코드였는데 나뉘어서 사용하는게 더 보기 좋았다.
- use client를 클라이언트 사이드에서만 렌더링되어야 함을 명시하는 용도로 사용한다
13버전 사용했을때 폴더 구조를 어떻게 해야 하나 고민이 많았다. 12에서는 container > 페이지명 , components > assets, component , pages 이런식으로 구조를 짜고 사용 했는데 13으로 올릴때
assets
container
components
page[name]
- container
- components
- page.tsx
page.tsx
layout.tsx 이런식으로 사용을 하였고 페이지별로 container, components, 그리고 공통적으로 사용 할 수 있는 assets 로 나누어서 진행 하였다. (이렇게 하는게 맞는진 모르겠다..)
