Nextjs 정리 2

mouuaw

코드 깎는 다람쥐

2023.09.19

미분류

Next.js 13 버전에선 새로운 file convention 이 있습니다. 바로 pages, layouts, templates 입니다.

Pages

page 파일은 route에 특화된 파일입니다. page 파일은 route로 접근 가능한 페이지를 생성합니다.

page 파일은 다음의 특징을 가집니다.

page는 app 폴더의 sub tree 에서 사용됩니다. sub tree의 leaf 로 사용할 수 있습니다.

js, jsx, tsx 확장자를 사용할 수 있습니다.

page 파일은 url 로 접근 가능한 라우터를 생성합니다.

page는 일반적으로 react의 Server Component 로 동작합니다. 하지만 설정을 통해 Client Component로 변경할 수 있습니다.

page는 data fetch 작업을 할 수 있습니다.

Layouts

layout 은 여러 페이지에서 공유할 수 있는 UI 입니다. navigation 상태일 때 layout은 state를 준비할 수 있고, UI상태를 유지하기 때문에 페이지 이동시 re-render 하지 않습니다.

layout은 필요에 따라 계층적으로도 만들수 있습니다.

layout은 props로 children을 반드시 사용해야 합니다. 앞서 배웠던 page로 생성한 화면이 layout의 children으로 전달되기 때문에 children을 화면 구성에 사용해야 합니다.

Layout의 특징

최상위 layout을 Root Layout 이라고 부릅니다. Root Layout은 필수적으로 설정해야 하며, Root Layout은 사이트의 모든 화면에 적용됩니다. 반드시 html과 body 태그가 포함되어야 합니다.

하위 라우트 구성 폴더에서도 Layout을 구성할 수 있으며, 해당 Layout은 하위 라우트에 적용됩니다.

Layout은 일반적으로 계층적으로 동작합니다. 부모 Layout이 자식 Layout 을 감싸는 구조로 사용되며 children props 를 이용해 계층 구조를 이어갑니다.

Route Group을 이용하면 폴더 라우터 구조를 벗어나는 Layout을 구성할 수 있습니다.

Layout은 Server Component 로 동작됩니다. 하지만 Client Component 로 동작하도록 설정할 수 있습니다.

Layout에서도 data fetch 작업을 할 수 있습니다.

부모 Layout과 자식은 데이터를 공유할 수 없습니다. 하지만 여러곳에서 같은 데이터를 fetch 하게되면 React에서 성능 최적화를 위해서 중복된 요청을 보내지 않고 기존의 요청 결과를 재사용 (automatically dedupe the requests)합니다.

Layout은 route segments 에 접근하지 않습니다. 만일 route segment에 접근이 필요하다면 useSelectedLayoutSegment 나 useSelectedLayoutSegments 를 Client Component 에서 사용해야 합니다.

하나의 폴더 안에 layout.js, page.js 를 사용할 수 있으며, 이 경우 layout 안에 page를 구성하게 됩니다.

Root Layout(Required)

root layout은 최상위 폴더인 app 폴더에 반드시 정의되어 있어야 합니다.

root layout은 모든 페이지에 적용됩니다.

root layout은 다음의 특징을 가집니다.

app 폴더에는 반드시 root layout이 있어야 합니다.

root layout 에는 반드시 html, body 태그가 정의되있어야 합니다.

root layout 에는 최적화된 seo를 위해서 head 태그를 사용할 수 있습니다.

여러개의 root layout을 사용하고싶은 경우 route groups을 이용해서 구현할 수 있습니다.

root layout은 Server Component로 동작하며 Client Component로 동작하지 않습니다.

Nesting Layouts

중첩된 구조로 layout을 구성할 수 있습니다.

상위 폴더와 하위 폴더에 각각 layout 파일을 구성할 경우, 상위 layout 의 children 영역에 하위 layout이 보여지게 됩니다.

만일 계층적 구조를 벗어나 layout을 사용하고 싶다면 Route Group을 이용하면 됩니다.

Templates

templates는 layout과 비슷한 역할을 합니다. layout과 다른점은 다음과 같습니다.

route에 종속적이지 않습니다

state를 사용할 수 있습니다.

template는 각각의 페이지에 새로운 template instance를 생성하는 방식으로 동작합니다.

이 말은 같은 template를 공유하는 페이지라고 해도 template에서 생성된 state가 공유되지 않고, DOM 역시 재랜더링되며, effect 역시 다시 동작하게 된다는 의미입니다.

template은 다음과 같은 상황에 사용되기 적합합니다.

useEffect나 useState를 페이지마다 사용하는 경우

framework(여기선 next.js를 의미함)의 기본동작을 재정의하고 싶은경우 사용합니다. 예를 들면 layout의 내부 suspense의 경우 fallback 화면이 layout이 로딩된 경우 한번만 동작하고 페이지가 이동되면 동작되지 않는데, template는 각각의 navigation 이동시 fallback 화면을 보여줍니다.

Modifying <head>

app 폴더 안에서 head 태그를 수정할 수 있습니다.

Metadata 는 page나 layout 파일에서 metadata를 export 함으로써 정의할 수 있습니다.

head 태그의 title, meta 태그를 정의하기 위해서 head 태그를 사용하면 안됩니다. 반드시 metadata api를 사용해야 head 태그를 구성할 수 있습니다.

코드 깎는 다람쥐

의 다른 카테고리

👍0

👏0

🤔

댓글 작성