[Next.js App Router] Next.js 13 주요 변경사항 알아보기

오늘은 Next.js 13버전이 Stable이 되고 시간이 흘러 안정되었다고 하여 이를 프로젝트에 적용해보고자 하였고,

Page Router였던 12버전 대신 App Router을 사용할 예정이므로 큰 변환점을 중심으로 하여 리뷰해보려고 합니다.

---

다들 Next.js가 React를 기반으로 한 프레임워크라는 것을 알고계신다는 전제 하에 진행하도록 하겠습니다!

---

간단하게 알아볼 5가지 특징들(App Router 기준)

여기서 알아볼 5가지는 다음과 같습니다.

1. App Router로 넘어오면서 새로 등장한 app directory
2. App Router로 넘어오면서 변경된 Rendering 설정방법
3. 개선된 Navigation tag, <Link>
4. API Routes를 통한 백엔드 접근
5. 보다 개선된 이미지 렌더링을 위해 사용된 <Image>

---

1. Using App Directory

기존 12버전까지 Page Router를 사용하면서 `/page` directory 내부에 페이지를 이루는 파일들을 생성해서 관리했다면,

13버전 이후에는 App Router로 변경되면서 `/app` directory 내부에 `/page`와는 다른 프레임워크 기능들을 이용할 수 있게 됩니다.

이에 대한 내용 일부는 아래에서 계속 다루겠습니다.

 

2. How to set rendering method in App Router

가장 많이 변경되었다고 볼 수 있는 점 중 하나가 바로 이 컴포넌트 별 렌더링을 설정하는 방법입니다.

기존에는 SSR(Server Side Rendering), CSR(Client Side Rendering), SSG(Static Side Generation)라는 용어를 통해 문서화 되어있었고, 이에 따른 렌더링을 했었습니다.

하지만 App Router로 넘어오변서 Client Component와 Server Component로 이름이 변경되면서 그 적용방식도 바뀌었습니다.

 

Client Component

CSR을 적용하기 위한 방법이 정말 간단해졌습니다. 바로 코드파일 위해 'use client'를 입력하기만 하면 되는 것이죠.

그렇기에 컴포넌트별로 많이 동적인 부분에 대해서는 이 점을 활용하여 클라이언트 사이드 렌더링을 활용하면 될 것입니다.

아래와 같이 즉시 많은 렌더링이 되어야 하는 페이지라면 이 'use client'를 활용해 보는 것이 좋겠죠.

 

Server Component

SSR은 Server Component로 여기서 그 의미가 변경되었습니다. Next.js의 기본적인 특징이 서버 사이드 렌더링이므로,

'use server' 이런 코드를 입력해두지 않고, 그냥 컴포넌트를 만들어 두면 서버 사이드 렌더링으로 적용됩니다.

주로 상호작용이 없는 텍스트와 같이 정적인 요소에 이를 적용하기에 적절합니다.

 

3. 개선된 Navigation(Routing method), <Link>

Next.js 에서 개선되고 발전 된 라우팅 방식과 네비게이션 방식입니다.

간단하게 <Link> 태그를 통해 라우트를 진행하며 위에서 볼 수 있다시피 query를 통해 params를 지정해서 넘길 수 있습니다.

이전에는 태그 내부에 <a>태그가 들어있었지만 업데이트가 되면서 이 부분이 생략되었습니다.

기본적으로 폴더 라우트가 적용되어있어서 위에서 볼 수 있듯 /app 하위의 경로를 입력하면 해당 디렉터리로 라우팅되는 모습을 볼 수 있습니다.

4. API Routes

많은 분들이 프론트엔드 프레임워크라고 말하고 있는 이 Next.js는 엄밀히 따져보자면 풀스택 프레임워크입니다.

바로 이 API Routes를 통해 DB에 접근할 수 있다는 점이 그 이유이죠.

 

기존에 많은 분들이 React를 통해 프로젝트를 만들어 볼 때 (MSW)Mock Service Worker를 통해 API를 Mocking하고 백엔드와 병렬적으로 개발을 해왔었는데요, Next.js 프로젝트에서는 백엔드와 따로 작업을 하므로 이 API Routes를 활용하여 Mocking해서 개발하기도 합니다.

 

API Routes를 활용하기 위해서는 간단하게 아래와 같이 apis 라는 디렉터리를 만든 후 그 안에 일정 형식을 맞추어 사용하시면 됩니다.

실제 프로젝트에서 적용해 보았던 directory

 

5. 보다 개선된 이미지 렌더링을 위해 사용된 <Image>

next/image를 import해서 <Image> 보다 개선된 <img>인 <Image>를 사용하실 수 있습니다.

렌더링 속도가 확실하게 증가했다고 하며, 추후 포스팅을 통해 이를 측정해볼 예정입니다.

 

---

End

 

References

https://nextjs.org/docs