Today 요약

1. Next 강의 (레이아웃, 링크, SEO, 클라이언트 컴포넌트)

1. What I did?

1.1 Next 강의

• 레이아웃
  • 원하는 컴포넌트 부터 하위 컴포넌트까지 공통적인 UI를 레이아웃에 정의한다.
• Link 컴포넌트
  • 리액트의 Link 컴포넌트에서 to로 이동이 가능했지만 Next에서는 href로 이동하는 것 같다.
• SEO 최적화
  • 13 버전은 layout 파일에 metadata 객체를 선언하는 것으로 SEO를 페이지 단위로 관리할 수 있다.
• 클라이언트 컴포넌트
  • 클라이언트 컴포넌트는 무조건 CSR이 되는 것이 아니다. Next.js는 일단 클라이언트 컴포넌트 중에 정적으로 먼저 렌더링 시킬 부분은 먼저 프리렌더링해서 렌더링 시켜놓고 그 다음에 하이드레이션 과정을 통해서 이벤트를 처리한다.
  • Next 13버전은 클라이언트 컴포넌트와 서버 컴포넌트로 나뉘어져 기존에 페이지 단위로 렌더링 방식이 정해졌던 부분을 세분화하였다.
• NotFound 페이지 만들기
  • not-found.tsx로 파일 만들고 그곳에 원하는 UI만들고 원하는 페이지 컴포넌트에서 notFound 함수 호출하면 된다. import { notFound } from 'next/navigation 은 필수
  • 12버전은 원하는 경로에서 404.tsx로 정의하면 된다.