next.js 13의 기본 폴더구조
Next.js 12까지는 pages 폴더에 파일을 만들면 자동으로 라우팅을 지원해 줬는데
Next.js 13부터는 Nested Layout을 위해 app 폴더 구조로 되었습니다.
app 폴더를 사용하기 위해서는 우선 pages 폴더가 아니라 page.tsx 파일을 작성해야 됩니다.
Next.js 13 버전은 기존 12 버전에서 사용한 파일 이름 라우팅 방식이 아니라 온전히 폴더 방식 라우팅을 사용
12 버전은 /pages/test.tsx 파일이 /test 라우팅이 되었다면 이번에 나온 13 버전부터는 /app/test/page.tsx로 해야 됩니다.
기존 웹 표준인 index.tsx를 사용하지 않고 page.tsx로 해야 됩니다.
todolist를 만들어볼거라서 폴더를 만들고 page.tsx파일 추가해줌.
/app/todolist/page.tsx이라 주소 경로 = /todolist
app 폴더 밑에 있는 layout.tsx 파일은 기존의 pages 폴더 밑에 있는 _app.tsx 파일과 _document.tsx 파일의 역할
Next.js 13 버전부터는 기본적으로 컴포넌트는 서버사이드 컴포넌트입니다.
예전에는 getServerSideProps 함수를 통해서 서버에 요청 했다면 지금은 컴포넌트 내에서 바로 할 수 있습니다.Server Components를 사용하면, 클라이언트로 보내는 자바스크립트 양을 줄일 수 있어 빠르게 페이지 로딩이 가능하고런타임이 로드될 때, 캐시가 가능하고 사이즈를 예측할 수 있어서, 애플리케이션이 점차 커져도 런타임이 증가하지 않는다고 한다. 추가로 런타임이 async 하게 로딩되고, 서버로부터 Hydration 된 HTML이 클라이언트 쪽으로 점진적으로 향상되도록 제공될예정
React 관련 기능을 쓰려면 클라이언트 컴포넌트로 작성해야 된다
Next.js에서는 컴포넌트가 클라이언트에서 작동하라고 지정하는 디렉티브를 쓰는데
파일 첫 줄에 'use client'라고 입력하면 그 파일은 클라이언트 컴포넌트로 취급되고 컴파일됩
