React 완벽 가이드 Next.js 파트 강의 노트

December 15, 2021

React 완벽 가이드 with Redux, Next.js, TypeScript

Next.js란?

• 제작을 위한 리액트 프레임워크
• 풀스택 프레임워크

특징

• SSR
• 파일 기반 라우팅

준비

• Node.js 설치
• npx create-next-app

CNA 기본 구조

• pages
  • 파일 베이스 라우팅
  • 루트 : _app.js
• public
  • 공용 자원
  • 리액트랑 다르게 index.html 없다!
  • Pre-rendering을 사용하기 때문
  • html을 만들고 > js를 로드하는 방식
• styles
  • 스타일

라우팅

• 파일 이름이 라우팅 경로
  • /pages/news.js > exxample.com/news
• 중첩 경로는 폴더를 만들어서
  • /pages/news/index.js > exxample.com/news
  • /pages/news/item.js > exxample.com/news/item
• 동적 페이지
  • 파일 또는 폴더 이름에 [] 신택스를 사용
  • useRouter 훅을 이용해 쿼리 가능
• 페이지 이동 시 Link 사용
  • 브라우저 기본 요청 보내는 것을 막고, SPA 에 머무르게 해줌.
  • 즉, 페이지 이동 시 새로고침 X

프리 렌더링 방식 문제 해결

• useEffect와 setState로 데이터를 로딩 후 데이터를 렌더링하면 html에 데이터가 없어서 검색 엔진 최적화 문제
• Static Generation
  • getStaticeProps 사전 렌더링 프로세스동안 이 함수를 실행
  • 빌드할 때 데이터를 가져오기 때문에 데이터가 수정된다면 문제가 있음
  • revalidatae 설정을 해야함, 설정한 초 후에 페이지 다시 생성 정기적 업데이트
  • getStaticePaths 를 사용해 빌드되어야할 동적 라우트들을 명시
  • 미리 명시할 수 없거나 누락된 페이지는 fallback: true 또는 fallbackL'blocking' 으로 제어가능
  • true 는 빈페이지를 렌더링하고 동적으로 생성된 콘텐츠 풀다운
  • blocking 은 페이지가 생성될 때까지 기다렸다가 완성된 페이지
• SSR
  • getserverSideProps 배포 후에 서버에서 실행
  • 모든 요청마다 실행
  • auth등이 필요할 경우 사용하자

헤드 설정

• next/head 사용

배포

• vercel 사용
• 깃 저장소 연동 가능