nextjs

Routing

처음에 폴더 구조를 잘 설계하여야한다. 폴더 구조의 기준은 레이아웃이 되는 경우가 많다. nextjs에서는 해당 디렉토리에 따라서 그에 맞는 레이아웃을 설정해줄 수 있다.

페이지 넘어갈때마다 레이아웃을 리렌더링해줄 수도 있다. template이라는 이름으로 tsx파일을 설정해주는 방법이다. layout.tsx의 경우는 리렌더링이 안되는 레이아웃을 설정해주는 것이다. 예를 들면 구글애널리틱스 등을 사용할 때 template을 사용할 수 있다.

Route Groups

Parallel Routes

패러랠 라우팅이란, 두 가지의 페이지들을 동시에 보여주도록 하는 것을 뜻한다. 독스의 문장을 빌리자면 동일한 레이아웃에서 하나 이상의 페이지를 동시, 또는 조건부로 렌더링할 수 있도록 하는 것을 말한다. 예를 들어서 소셜 사이트의 대시보드 및 피드와 같이 앱에서 매우 동적인 섹션의 경우 패러랠 라우딩을 사용하여 복잡한 라우팅 패턴을 구현할 수 있다.

패러랠 라우팅을 사용하면 각 경로가 독립적으로 스트리밍될 때 각 경로에 대해 독립적인 오류, 로딩 상태를 정의할 수 있다.

패러랠 라우팅을 사용하면 인증 상태 등과 같은 특정 조건에 따라 조건부로 슬롯을 렌더링할 수도 있다. 이를 통해 동일한 url에서 완전히 분리된 코드를 사용할 수 있다.

패러랠 라우팅을 만드는 방법은 우선 디렉토리를 만들때 앞에 @를 붙여서 이름은 만든다.

default.tsx

패러랠 라우팅이 필요없을 때, 즉 layout에서 패러랠라우팅을 해주지 않을때 default.tsx를 통해서 화면을 보여준다. 그래서 패러랠 라우팅을 해줄 때 default.tsx가 있어야 같이 동작을 할 수 있다.

Intercepting Routes

인터셉팅 라우트는 현재 레이아웃 내에서 애플리케이션의 다른 부분의 라우트를 로드할 수 있도록 하는 것이다. 이 라우팅 패러다임은 사용자가 다른 컨텍스트로 전환하지 않고도 라우트의 컨텐츠를 표시하는 경우에 유용하다.

예를 들면, 피드에서 사진을 클릭하면 사진을 모달로 표시하여 피드 위에 오버레이할 수 있다. 이 경우 nextjs는 /photo/123 경로를 가로채서 url을 마스킹한 다음, /feed 위에 오버레이한다. 즉, 같은 url path로 모달 등의 이유로 인해 다른 ui를 보여주고 싶을때 인터셉팅 라우트를 사용하여 같은 url위에 오버레이해서 경우에 따라 다른 ui를 보여줄 수 있도록 한다.

그러나 공유 가능한 url을 클릭하거나 페이지를 새로고침하여 사진으로 이동하는 경우, 모달 대신 전체 사진 페이지가 렌더링되어야 한다. 인터셉팅 라우트가 발생하지 않아야한다.

convention

인터셉팅 라우트는 세그먼트의 경우 (..) 컨벤션으로 정의할 수 있다. 이는 상대경로 컨벤션인 ../와 비슷하다:

예를 들면, (..)photo 디렉토리를 만들어서 photo 세그먼트를 feed 세그먼트에서 인터셉트할 수 있다.

(..) 컨벤션은 파일 시스템이 아닌 라우트 세그먼트를 기준으로 한다.

private folders

project organizations features 개념으로, private folders라는 nextjs에서 지원해주는 기능이 있다. 이는 공통된 컴포넌트, 즉 중복된 코드를 private folder를 생성해서 한 곳에서 관리할 수 있도록 해주는 기능이다. 컨벤션은 폴더 네이밍 앞에 언더바(_)를 붙여주면 이는 폴더 이름으로 라우팅이 되지 않고 컴포넌트들을 관리할 수 있는 폴더의 기능만을 수행한다.

Server Component & Client Component

React 18 버전에서 새로 추가된 개념이 nextjs에서 녹여졌다. 서버컴포넌트에서는 비동기로 컴포넌트를 만들 수 있지만, React의 기본적인 훅스들을 사용하지 못한다. 서버컴포넌트의 경우 데이터를 다룰때 많이 쓰인다.

React의 훅스들을 사용하려면 클라이언트컴포넌트에서만 사용하여야한다. use client를 맨 위에 선언해주면 클라이언트컴포넌트가 된다. 원칙적으로는 서버 컴포넌트에서 클라이언트 컴포넌트를 임포트하는 순서여야한다. 반대도 가능하지만 그럴경우 서버 컴포넌트는 클라이언트 컴포넌트가 된다.