Next.js 파일 구조와 data fetching

React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 프레임워크
리액트로 개발할 때 SPA(Single Page Application)를 이용하여 CSR(Client Side Rendering)을 하기 때문에 좋은 점도 있지만 SEO에 취약한 단점이 있다.

CSR을 하면 첫 페이지에 빈 HTML을 가져와서 JS 파일을 해석하여 화면을 구성하기 때문에 포털 검색에 거의 노출될 일이 없음

그러나 Next.js에서는 Pre-Rendering을 통해서 페이지를 미리 렌더링 하며 완성된 HTML을 가져오기 때문에 사용자와 검색 엔진 크롤러에게 바로 렌더링 된 페이지를 전달할 수 있음

리액트에서도 SSR을 지원하지만 구현하기 굉장히 복잡하여 Next.js를 이용해 문제를 해결함

• 설치 명령어

npx create-next-app ./ --typescript 

폴더구조

pages

이 폴더 안에 페이지들을 생성
index.tsx가 "/" 페이지
_app.tsx는 공통되는 레이아웃 작성
about 페이지를 만들려면 pages 안에 about.tsx 생성

public

이미지와 같은 정적 에셋 보관

styles

스타일링을 처리해주는 폴더
모듈 css는 컴포넌트를 종속적으로 스타일링하기 위한 것이며 확장자 앞에 module을 붙여줘야 함

next.config.js

next.js는 웹팩을 기본 번들러로 사용함
웹팩에 관한 설정을 이 파일에서 함

Data Fetching

1. getStaticProps
   static generation으로 빌드할 때 데이터를 불러옴 (미리 만들어줌)
2. getStaticPaths
   static generation으로 데이터에 기반하여 pre-render 시 특정한 동적 라우팅 구현
3. getServerSideProps
   Server Side Rendering으로 요청이 있을 때 데이터를 불러 옴