RemixRescriptPurescriptnpmCloudflareReactNext.jsGOHyper-VTiberoGitAlgorithms, 2020년

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 사용
  • 깃 저장소 연동 가능