2023. 3. 5. 15:34ㆍLibrary,Framework
해당 적용해 보기 시리즈는 12 버전을 기준으로 변경/추가된 부분에 대해 설명하고 있기 때문에 이전 버전을 사용하지 않으셨던 분들은 모르는 기능이 나왔다고 해서 당황하지 마시고 최신 버전에서는 이렇게 쓰면 되는구나 하고 넘어가시거나 필자가 이전에 작성했던 글들을 12 기준으로 작성되었기 때문에 해당 글들을 한번 보시기를 권장드립니다.
[NEXT.js] 넥스트 JS를 배워보자 1편 - Pre Rendering
예전부터 꼭 배워보고 싶은 Next JS 프레임워크에 드디어 입문했다. 여태까지 관리자 페이지나 랜딩페이지를 만들다 보니 CSR(Client Side Rendering)로도 충분했지만 현재 SEO과 원할하게 이루어져야 하
mingeesuh.tistory.com
우선 Next JS 13 버전의 주요 업데이트중 하나인 라우팅에 대해서 살펴보도록 하겠습니다.
Page Routing VS App Routing
Next JS의 가장 큰 장점중 하나는 페이지 기반 라우팅 시스템을 제공한다는 점입니다. 기존 CSR의 방식으로 애플리케이션을 구현할 시에 별도의 패지키를 설치해 직접 라우트를 설정해줘야 하는 번거로움이 있지만 Next JS에서는 특정 디렉토리안에 파일만 만들어주기만 하면 알아서 세팅이 완료됩니다.
이전 버전에서 해당 디렉토리는 pages로 모든 포스트를 보여주는 페이지를 만들 때 pages 디렉토리 안에 posts 파일 또는 posts 디렉토리안에 index 파일을 만들어서 사용할 수 있었습니다.
Next 버전 13에서는 해당 방법도 물론 유효하지만 app 디렉토리가 새롭게 추가되어 pages 디렉토리 대신 사용가능 해졌습니다. 필자는 기존의 방식을 쓰면서도 크게 불편함을 느끼진 못했지만 특정 개발 커뮤니티 제안을 받아들여서 변경되었다고 합니다. Next 공식문서에 따르면 해당 글 작성일 기준으로 아직 베타버전이기 때문에 production에는 사용하지 않도록 권고하고 있습니다.
App 디렉토리도 마찬가지로 폴더로 라우트를 설정하고 폴더 안에 파일을 사용해 UI를 정의해 줄 수 있습니다. pages 디렉토리와 다른 점은 파일명을 index 대신 page라고 씁니다. 위 예제와 마찬가지로 전체 포스트를 불러오는 라우트를 지정해 준다고 했을 때는 아래와 같이 세팅할 수 있습니다.
* 앞서 말했듯이 Next JS는 이전 버전에서의 기능들을 계속 사용할 수 있도록 incremental adoption을 지원하기 때문에 pages 디렉토리와 app 디렉토리 전부 적용되는 13 버전의 프로젝트에서는 같은 이름의 라우트가 없도록 해야 합니다.
이 외의 변화로는 해당 디렉토리에는 추가적으로 아래 파일들을 만들어 사용할 수가 있다는 점입니다. 기존 버전에서 구현하기 조금 복잡했던 기능들이 이제는 보다 쉽게 구현가능하도록 변경되었습니다.
layout.js
여러 페이지에 걸쳐 랜더링이 되어야 하는 레이아웃이 있을 경우 해당 페이지에 정의. (대표적으로 내비게이션 바, 사이드 바 등).
상태가 유지되며 리랜더링이 일어나지 않습니다.
template.js
마찬가지로 여러 페이지에 걸쳐 적용되어야 하지만 상태가 유지되지 않기 때문에 매번 새롭게 실행되어야 할 코드가 있을 경우 사용합니다.
페이지 이동시 애니메이션을 추가할 경우 유용하게 사용할 수 있습니다.
loading.js
이동하고자 하는 라우트의 콘텐츠가 불러와지는 동안 보일 로딩창으로 스피너나 스켈레톤 UI 등을 정의하시면 됩니다.
error.js
애플리케이션에 에러를 사용자 친화적인 방법으로 대응하기 위해서 사용됩니다
not-found.js
라우트 설정이 되어 있지 않는 페이지로 이동할 시 (404 에러) 보일 커스텀 에러 메시지를 랜더링 하기 위해서 사용합니다.
head.js
페이지마다 다른 title 태그를 지정하고 싶다면 해당 디렉터리에 head 파일을 추가한 뒤 설정을 할 수 있습니다.
이상으로 13 버전에 새롭게 추가된 app 디렉토리의 가장 기본을 알아보았습니다. 위에 소개한 파일의 사용법에 대해서는 다음편에 예제와 함께 좀 더 자세히 다루어 보겠습니다.
참고자료: https://nextjs.org/blog/next-13
'Library,Framework' 카테고리의 다른 글
| Next JS 13 적용해보기 - 데이터 불러오기 Data Fetching 편 (3) | 2023.08.15 |
|---|---|
| [react-notion-x] 노션 컨텐츠 홈페이지에서 불러오기 (feat.NEXT.JS) (7) | 2023.06.06 |
| [Storybook / 스토리북] UI 컴포넌트 테스트 도구 배워보기 (feat. React) - 1편 (0) | 2022.10.21 |
| React Hook Form과 외부 라이브러리 연동하기 (react-select, react-datePicker, antd, mui 등) (3) | 2022.07.22 |
| Next JS 코드 스플리팅 적용해보기 (Dynamic Import) (0) | 2022.07.03 |