2022년에 멋쟁이사자처럼 명지대 랜딩 페이지와 2023년 1월 피크랩 서비스를 제작하면서 Next.js를 사용했다.
그 이후엔 주로 리액트를 공부하면서 프로젝트 세팅도 리액트로 많이 하다보니 Next를 거의 다루지 않았다.
Next.js도 공부하고 다시 익숙해질 겸 프로젝트를 하나 생성하고 나니 폴더 구조가 이전과는 달라져 있었다.
작년 하반기에 만든 포트폴리오 사이트도 Next를 이용해 만들었지만, 이전에 사용했던 버전으로 프로젝트를 생성했다보니 그때는 달라진 점을 몰랐다😅
왜 달라져있는지 바로 찾아보았고, 공식문서를 발견하게 되었다!
Next가 벌써 14버전까지 나와있지만 오늘은 Next.js 13버전과 폴더 구조에 대해 포스팅 해보려고 한다.
참고: Next.js 13 업데이트사항, Next.js 13.4
Next.js 폴더 구조가 변경된 것에 대해 이해하기 위해선 Next13.4 버전에 대해서부터 알아야 한다.
Next.js 13.4에서 업데이트 되었던 내용
App Router 안정화
2023년 5월 4일 Next.js 13.4 버전이 릴리즈되면서, App Router 기능이 안정화 되었다는 것을 공식문서를 통해 알 수 있다.
App Router VS Pages Router
Pages Router
기존 13 이전 버전에서의 Next.js는 원래 /pages 폴더 아래에 원하는 페이지 폴더 목록을 만들어 라우팅을 관리했다.
이는 내가 작년 1월쯔음 진행했던 프로젝트의 폴더다.
사진을 보면 알 수 있듯이 pages 폴더 안에 여러 폴더들이 속해있는데, 이 폴더들이 자체 라우팅이 되어 관리가 되는 식이었다.
이게 바로 Pages Router를 의미한다.
도메인/analysis
도메인/auth
도메인/magazine
도메인/scrap
도메인/search
이런식으로 라우팅 ...App Router
App Router는 /app 폴더를 이용하여 라우팅을 설정할 수 있다. 즉, app 폴더가 pages 폴더를 대체한다고 봐도 된다.
위 사진과 같이 Next13 버전 이상의 프로젝트를 생성하게 되면, 왼쪽처럼 폴더가 형성된다.
app 내부의 layout.tsx는 기존 _app.tsx와 _document.tsx의 역할을 다 한다고 보면 된다.
또한, pages.tsx를 통해 고유한 UI를 만들고 페이지를 내보내게 된다!
이제 라우팅 규칙이 변경되어 app 폴더 내부에 평범하게 폴더를 만들게 되면 그 폴더명이 라우터가 되어버린다.
그래서 components나 styles, types 등 개발을 위한 폴더를 만들어야 한다면 앞에 _를 불이면 된다. 그럼 그 폴더는 route 기능을 갖지 않게 된다!
그리고 페이지 라우터가 많아지면 그만큼 폴더도 많아지는 것이기 때문에 복잡해보일 수 있다.
그럴 때, (route) 폴더를 만들어 그 안에 관리해준다면 폴더 구조를 깔끔하고 예쁘게 관리할 수 있다.
--
App Router는 라우팅 뿐만 아니라 레이아웃, 서버 컴포넌트, 스트리밍, 데이터 패칭 기능까지 제공한다.
4가지 기능들에 대해서는 Next 13 공식문서를 확인하면 되며 간단하게 정리하면 아래와 같다!
[Layout]
상태를 유지하고 많은 리렌더링을 방지하며, app 내부 폴더 들의 컴포넌트와 UI를 쉽게 공유할 수 있는 기능
쉽게 말해 필요한 폴더에 layout 파일을 만들어 여러 페이지 간 UI를 공유하며 관리할 수 있다.
그리고 위에 작성한 설명대로, 상태를 유지한채로 해당 폴더 내 페이지를 다시 탐색하게 될 때 재렌더링을 하지 않는다는 장점을 가지고 있다!
[Server Component]
/app 폴더 내에서는 모든 컴포넌트가 기본적으로 서버 컴포넌트로 동작한다.
서버 컴포넌트는 React18에서 도입된 개념인데, 서버에서 동작하는 컴포넌트를 의미한다.
서버에서 동작하는 컴포넌트인만큼 서버에서 먼저 해석을 끝낸 후 클라이언트쪽으로 전달된다.
서버 컴포넌트를 통해 클라이언트로 전송되는 JS 코드의 양을 줄일 수 있기 때문에 초기 페이지 로드 속도를 빠르게 해준다.
추가로 클라이언트 컴포넌트로 사용하고 싶다면 파일 최상단에 "use client"라고 작성해주면 된다!
[Streaming]
클라이언트에 보여지는 UI를 렌더링된 단위에 따라 점진적으로 보여주고, 로딩 상태를 나타내는 기능이다.
Vercel로 배포하게 될 시, Next13 애플리케이션은 성능 향상을 위해 기본적으로 응답을 스트리밍한다.
[Support for Data Fetching]
데이터를 가져오는 요청이 중복된다면 자동으로 제거되며, 데이터를 가져오거나 캐싱하거나 유효성 검증을 할 때 유연한 방법을 제공하는 기능이다.
SSG, SSR, ISR의 모든 이점을 하나의 API를 통해 할 수 있다!
Next에 대해서는 아직 공부할 게 산더미 같이 많이 남은 것 같다 .. ㅎㅎ
라이브러리를 적용하는 데 있어서도 리액트보다 까다로운 것도 있고, 버전 공부도 해야하고😂
얼른 적응해서 잘 사용할 수 있도록 해야겠다!
