Next js 13 - app directory(Beta)

 

 

App Directory(beta)

---

next js 13 버전부터 페이지들을 app과 pages에 병행해서 다룰 수 있도록 업데이트되었습니다. 이번시간에는 새로 업데이트된 app 폴더에 대해서 글을 작성해 보려고 하는데요! pages와 이번에 업데이트된 app 폴더를 비교해 보면서 전에 사용하던 방법이 어떻게 업데이트되었는지, 추가적으로 무슨 기능이 생겼는지 정리해 보도록 하겠습니다!

 

그전에 페이지들을 app폴더에서 관리하고 싶을 때는 next.config.js에서 appDir 값을 true로 변경을 해주셔야 합니다.

 

next.config.js

 

Layout

---

pages에서 _app, _document 파일의 역할을 app폴더에서는 layout 파일이 역할을 수행하고 있습니다.

아래와 같이 app 폴더를 사용한다면 반드시 아래에 한 개의 layout 파일이 존재해야 합니다.

app 폴더 바로 하단에 있는 layout파일은 경로 '/'의 layout이 됩니다. 즉 로컬에서 next js를 실행을 하면

localhost:3000/ 주소의 layout이 됩니다.

 

layout.tsx파일만 생성하고 실행하면 404 | This page could not be found 페이지가 열리게 됩니다.

 

 

pages 폴더를 사용할 때는 "/" 경로에 index.tsx 파일을 생성했다면 app폴더에서는 각 경로마다 page.tsx를 생성해야 합니다.

 

page.tsx

페이지 만들기

---

지금까지 '/' 경로에서 layout과 page 파일을 만들어 보았다면 이번에는 '/user' 페이지를 생성해 보겠습니다.

 

user 폴더 안에서도 똑같이 layout 파일을 생성해서 user 페이지에 맞는 layout를 생성할 수 있습니다.

 

layout.tsx(user폴더 안에)

page.tsx(user 폴더안에)

이제 localhost:3000/user에 접속하게 되면 User 폴더 안에 생성한 layout과 상단에 있는 layout이 같이 적용된 것을 보실 수 있습니다.

 

Data fetching

---

 

Server Component

 

Server Components는 동적인 데이터와 비즈니스 로직을 처리하기 위해 사용됩니다. 

지금까지 데이터를 fetch 하기 위해서 getServerSideProps, getStaticProps를 이용해서 데이터를 가져왔지만 13 버전부터는 

use 함수를 사용해서 좀 더 쉽게 바뀌었는데요. 

 

기존에 있었던 getServerSideProps, getStaticProps, getInitialProps를 사용할 수 있도록 fetch에 cahe, revalidate 옵션을 넣어줘서 SSG, SSR, ISR의 모든 장점들을 사용할 수 있습니다.

 

fetch('https://...', { cache: 'force-cache'}); //getStaticProps

fetch('https://...', { cache: 'no-store' }); // getServerSideProps

fetch('https://...', { next: { revalidate: 20 } }); // revalidate를 사용해서 getStaticProps

 

Client Component

 

리액트 기능들을 사용하기 위해서는 컴포넌트 안에 "use client"를 입력하셔야 하는데요!

그렇게 되면 파일이 클라이언트 컴포넌트로 취급하여서 react에서 제공하는 useState, useEffect 같은 hook들을 사용하실 수 있습니다.

 

fetch 받은 데이터를 userList 컴포넌트에 전달해 주고,

 

props로 전달받은 useState를 활용해서 상태관리하는 경우에 "user client"라고 명시하지 않으면 

 

You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.

이런 에러가 발생하는데요. 그러기 위해서는 "use client"를 작성해 주시면 됩니다.

 

Loading

---

loading.tsx를 user폴더 안에 만들 줍니다.

 

이렇게 설정해 놓고 user/page.tsx에 3초 이후에 유저 정보를 받아오는 코드를 입력해 주시면, 3초 동안 user 정보 가져오는 중...

텍스트로 로딩되다가 로드가 완료 시에 유저의 이름들이 UserList component에 뿌려지게 됩니다.