시연

https://fe-next-netflix-17th-jpsg.vercel.app/

Nextjs 13 특징들

1. 기본 구조 (’app/’ 디렉토리의 생성)

• Next.js 12의 _app.tsx

  • 기본 _app.tsx 파일에 Layout 별도 적용.
  • pages 폴더 안에서 폴더명(+index 파일) 또는 파일명으로 페이지 라우팅

• Next.js 13의 App 디렉토리

  

  • 기본적으로 설정돼있는 layout.tsx를 통해 공통 layout 생성
  • App 디렉토리 내 폴더명(+page 파일)을 통해 페이지 라우팅. *Home 폴더 내 [id].tsx 파일로 라우팅 불가

1. 기본적으로 모든 페이지 ssr 지원.

• 이전 버전까지는 getServerSideProps를 이용해 렌더링한 페이지를 가져오는 방식으로 SSR을 사용

  ⇒ getServerSideProp 없이도 기본적으로 SSR을 지원하기 때문에, 오히려 CSR을 쓰는 경우 상단에 “use client” 선언.

⇒ 컴포넌트 폴더 따로 생성하지 않고, 각 페이지의 하단에 컴포넌트를 만들어도 작동함

1. Next/router 사용 불가

• Pathname과 query를 통해 정보를 넘겨주던 next/router 모듈을 지원하지 않음

  router.push({
    pathname,
    query : {
      ...query,
      key : value
    }
  });
  

  ⇒ 대신 `next/navigation` 및 `useSearchParams`로 url 파라미터 이용 (Server에서 가져올 때는 `searchParams`)