Next.js v13

https://beta.nextjs.org/docs/getting-started
Next.js 13 version에 대한 공식 문서

1. /app 내부 특수 파일 규칙

• page.js : 페이지 컴포넌트 (기존 /pages 역할 대체)
  

이와 같이 파일을 생성하였을 때 localhost:3000/about 페이지가 생성된다.
중첩 라우팅 생성 시 디렉토리를 다중으로 중첩하여 생성하면 된다.

• layout.js : 여러 페이지 간에 공유되는 공통 UI 컴포넌트 파일 / 불필요한 리렌더링 방지
  root layout의 경우 기존의 _app.js나 _document.js의 기능을 대체할 수 있을 것으로 보인다.
  
  각 디렉토리별 루트 레이아웃이 필요한 경우 /app 최상단 layout.js를 삭제한 후 디렉토리마다 layout.js를 생성하면 된다.
  이러한 다중 루트 레이아웃을 사용할 시 전체 페이지 로드가 자주 발생할 가능성이 있다.

• loading.js : 컨텐츠가 로드되는 동안 표시되는 로딩 UI 상태로, 렌더링이 완료되면 자동으로 컨텐츠가 교체되게끔 한다.

• error.js : 런타임 오류를 처리하고, 생성된 에러 페이지 UI를 표시한다.
• not-found.js : 일치하는 경로가 없는 경우의 페이지 방문 즉 404 Not Found 에러를 처리한다.
  
  

2. 라우팅

• <a> 태그를 사용하지 않고도 <Link> 태그를 이용할 수 있다.
• import { useRouter } from 'next/navigation' import 시 useRouter() Hook을 사용할 수 있다.

3. Data Fetching

• getData()를 이용하여 데이터를 fetch
  getServersideProps, getStaticProps, getInitialProps는 사용되지 않는다.

테스트는 axios로 해 보았다. 빨간 줄은 Typescript lint 관련 오류...

4. RSC

/app 디렉토리 이하의 컴포넌트는 RSC(React Server Component) 라고 한다. 이러한 RSC는 적은 양의 번들을 클라이언트에 전달하므로 클라이언트 측의 부담을 줄일 수 있고, 다양한 백엔드 리소스에 접근이 가능하다.
다만 클라이언트 쪽에서 서버 컴포넌트 번들을 찾을 수 없으며, useEffect 같은 React Hooks을 사용할 수 없다.

Data Fetching 도중 console.log를 찍으려고 하다가 알게 되었다...

5. font / image

• font : Google 웹 폰트를 자동으로 호스팅한다. 즉 기존처럼 구글 웹 폰트를 사용할 때 따로 CDN에서 import할 필요가 없다.
• image : 성능이 최적화되었다고 한다. 개발자가 width나 height를 지정하지 않아도 next가 자동으로 값을 설정한다.