Next.js 프로젝트 - 프로젝트 세팅

Next.js 프로젝트 생성

일단 Next.js 프로젝트를 만들면서 시작한다.

npx create-next-app@latest

 

아직 많은 회사들이 12버전을 사용하기도 하고, 13버전 Reference도 많이 없어서 12버전형태인 pages router로 프로젝트를 만들기로 했다.

 

설정은 따로 건들이지 않고, 필요없는 파일 삭제 후 프로젝트를 초기화했다.

 

 

MUI 및 emotion사용 준비

CSS 라이브러리를 처음 써보는 것이어서 따로 세팅이 필요한지 찾아봤는데, 그냥 일반 모듈처럼 import 해와서 사용하면 돼서 편했다.

공식문서에 api 정리가 잘 되어 있어서 필요한 컴포넌트의 api문서를 확인하면서 사용하면 될 것 같다.

출처 : MUI 공식문서

커스터마이징이 필요하면 sx 속성으로 style을 위와 같이 적용하면 된다.

 

 

emotion은 모듈을 설치하고 사용하면 되는데, emotion의 css props를 사용하려면 원래는 Babel 설정이나 jsx pragma가 필요하다.

출처 : emotion 공식문서

설정을 해주면 위와 같이 컴파일 과정에서 React.createElement 대신 emotion의 jsx 함수로 컴파일된다.

 

Next.js 12버전 이후에서는 babel 설정 대신 next.config.js 파일에 아래와 같이 설정을 추가해주면 매 파일마다 jsx pragma를 사용하지 않고 바로 css props를 사용할 수 있다.

 

 

React Query 세팅

Next.js + React Query로 prefetching 기능을 사용해보기로 했다. 공식문서에 따르면 2가지 방법이 있는데, 

첫번째 방법은 초기 데이터를 지정해 주는 것,

두번재 방법은 서버에서 캐시 데이터를 dehydrate한 후, 클라이언트에서 hydrate하는 방식이다.

 

https://tanstack.com/query/v4/docs/react/guides/ssr

SSR | TanStack Query Docs

 

첫번째 방법의 경우 세팅은 간단하지만, prefetch된 데이터를 여러 컴포넌트에서 사용하는 경우 props로 넘겨야 하기 때문에 비효율적일 수도 있다고 한다. 그래서 두 번째 방법을 사용하여 prefetching을 해 보기로 했다.

 

_app.js 파일에서 queryClient를 만들고 QueryClientProvider로 전체 app을 감싼다.

Hydrate 컴포넌트의 state 속성에 pageProps의 dehydratedState 키를 적용한다. 

* queryClient를 useState를 사용하여 생성하는 이유는 데이터를 각각의 유저나 요청이 공유하는 것을 방지하기 위해서 라고 한다.

 

데이터를 실제로 사용할  컴포넌트에서 getStaticProps로(getServerSideProps를 사용해도 된다.) queryClient 만들고, prefetchQuery로 데이터 요청을 한다. (prefetchQuery는 데이터를 받아와서 캐싱하는 역할을 한다.)

그리고 props로 dehydratedState 키에 dehydrate 값을 넘겨주면 된다.

 

이렇게 세팅을 하면 클라이언트에서 페이지를 받아올 때 데이터가 캐싱이 되어있는상태로 받아져 데이터 요청시 캐시에서 바로 데이터를 꺼내 쓸 수 있게 된다.

 

 

기본적인 프로젝트 세팅을 해봤고 이제부터 기능을 하나씩 만들어나가면 될 것 같다!

 

Reference

- https://blog.kmong.com/react-query%EB%A5%BC-next-js%EC%99%80-%ED%95%A8%EA%BB%98-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EC%9E%90-part-1-4923f7e30541

- https://velog.io/@limelimejiwon/Next.JS%EC%97%90%EC%84%9C-React-Query-v4-SSR-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

- https://nuhends.tistory.com/124