Nextjs13 사용하기

오랫동안 미뤄뒀던 프로젝트를 시작하려고한다.

사용할 기술 스택을 정리하는데 Next.js 13 이 beta에서 stable 이 되어 해당 버전을 사용하기로 했다!

Nextjs12 버전과는 차이가 있기 때문에 이부분을 한번 정리하고 넘어가려고 한다.

💡 Next.js 는 리액트 문법을 사용하는 프론트 + 백엔드 프레임 워크이다.

1. /pages 폴더 삭제 /app 폴더 신규 생성

예약된 폴더명을 통해 주로 사용되는 기능 추가 가능

[이전]

기존 /pages 폴더 내부에 원하는 경로명으로 폴더를 생성해 페이지를 생성

(각각의 파일이 개별적인 경로가 되었었음)

[현재]

page.tsx 파일이 url을 나타내도록 변경되었음

/app 하위에 page.tsx 로 지어진 파일만 경로로 인식되어 접근 가능함

이전에는 컴포넌트 폴더에 따로 컴포넌트를 관리했다면 이제는 관련 컴포넌트를 해당 파일 내부에서 관리가 가능함

 

2. 새롭게 지원되는 예약 파일

1. page.tsx : 상단에서 설명한것 처럼 경로를 담당하는 예약 파일이다.
2. layout.tsx : 해당 파일에서 작업한 내용은 하위컴포넌트에서 그대로 재사용이 가능하다.
   • 네비게이션이나 사이드 바, 푸터 등을 정의하면 될 듯 하다!
   • metadata 또한 이곳에서 설정해줄 수 있다
3. loading.tsx : 로딩과 관련한 UI 를 띄우고 싶을때 정의하는 파일이다.
   • 서버와의 통신에서 로딩중 일때 자동으로 띄워진다.
4. error.tsx : 
5. template.tsx : 
6. head.tsx : 

 

3. Server Component

React 18 버전 부터 도입된 개념으로 기존 컴포넌트 생성시 우리가 사용하는 컴포넌트들은 Client Component 였다.
- useState
- useEffect
- onClick
- onChange
- useRouter
- useParams
를 사용할 수 있는 컴포넌트! (= 사용자와 상호작용을 할 수 있는 컴포넌트)

Next.js 의 app 폴더 안에 들어가는 컴포넌트들이 기본적으로 React Server Component 로 설정됨.

Server Component 란 서버에서 렌더링 되는 컴포넌트이고,

Client Component 란 클라이언트단에서 렌더링 되는 컴포넌트이다.

 

Server Component 에서는 필요한 javascript 파일을 다 렌더링 시켜보내주기 때문에 클라이언드가 받게되는 js 파일 사이즈가 줄어들게 된다. 단순히 사용자에게 보여주기만 하는 역할을 한다면 Server Component 로 구현하는게 더 유리하다!

 

추가적으로 html Streaming 기능을 지원하게 되어 데이터를 기다릴 필요가 없는 부분은 먼저 전송하여 사용자들에게 보내주고, 나머지 기다려야하는 부분은 로딩 상태로 보여줌. (사용자들에게 더 빠른 피드백을 줄 수 있음)

 

4. Turbo pack

Nextjs13 에서는 번들링 툴로 Turbo pack 을 추가됨.

webpack 보다 700배 빠르고, vite 보다 10배 빠르다!

 

Next.js13 버전을 사용하기 위해서는 최소 React 18.2 버전이 필요하고, 14.6 버전의 node.js 가 필요하다.

internet explore 지원도 안함!

 

5. <Image /> 개선

기본 html 태그인 <img /> 가 아닌 <Image /> 태그를 사용하게 되면 자동적으로 이미지가 최적화 된다.

이미지의 로딩이 느린경우에 웹페이지에 Layout Shift 라는 현상이 생기게 되는데,

이를 방지하고자 이미지 로딩중일 경우 기본 높이와 너비를 제공함으로써 해당 현상을 해결할 수 있다.

Layout Shift ?
이미지 로드가 느리게 되어 하위에 존재하는 레이아웃이 밀려나는 현상
 = 페이지 로딩 성능 하락 ↓

 

6. Link 컴포넌트 사용 방식 변경

// 기존 Next.js 12 버전 : a 태그로 중첩시켜야 한다
<Link href="/home">
  <a>Home</a>
</Link>

// 변경된 Next.js 13 버전 : Link 태그가 항상 a 태그를 랜더 시킨다
<Link href="home">
  Home
</Link>

 

7. use() / fetch()

export default function Page () {
  const value = use(getData());
  return <div> 가져온 데이터 {value} </div>
}

export async function getData() {
  const res = await fetch('요청 url');
  const data = await res.json();
  return data;
}

기본적으로 이 형태로 사용하게 된다.

 

이때 Nextjs 의 이전 문법인 getServerSideProps() 를 사용하고 싶다면

( = Server Side Rendering 사용을 원하면)

export default function Page () {
  const value = use(getData());
  return <div> 가져온 데이터 {value} </div>
}

export async function getData() {
  const res = await fetch('요청 url', {
    cache: 'no-store'  // <- 이부분
  });
  const data = await res.json();
  return data;
}

이렇게 옵션을 추가하면 된다.

이것들을 사용할 수 있는 이유는 기본적으로 컴포넌트가 React Server Component 이기 때문이다.

Nextjs13 에서 fetch() 를 이용해 구현하면 자동으로 중복 요청을 제거해주고, 캐시된 값을 재사용하는 기능을 제공해준다.

 

데이터를 가져올때는 Server Component로 만 구현해야하는것은 아니다.

필요에 의해 Client Component 에서 데이터를 가져와야한다면,

React Query 나 SWR 과 같은 라이브러리를 사용해 구현할 수 있다.