책 정보
- 실전에서 바로 쓰는 Next.js
- 미셸 리바
- yes24
큰 특징 요약
- 정적 사이트, 증분 정적 컨텐츠 생성
- 파일 기반 라우팅
- 이미지 최적화
- 자동폴리필
- 리액트
잡다한 팁
npx create-next-app my-app --example with-docker- 디렉토리
- pages : 가장 중요. 퍼블릭 페이지들
- public : 정적 컨텐츠, 퍼블릭 페이지, 컴파일된 js
- styles : 스타일시트. 필요없음
- 바벨 웹펙 커스터마이징 하려면
next.config.js에 하는데 하지마
렌더링 전략
- 하이드레이션 : 렌더링한 페이지에 스크립트 집어넣어서 나중에 동적으로 처리하는 개념. 맨날 쓰는건데 그럴듯한 용어
- CSR : 그냥 기본
- 쉬운 페이지 전환
- 서버 부하감소
- 지연된 로딩과 성능.
- css js 벌크 받다 느리면, seo 낮은 점수
- SSR :
getServerSideProps예약어임.- SSR 이 더 서버 고비용이다. 대신 SEO 에 좋은 점수
- SSG : 정적 사이트 생성.
getStaticProps- ISR : 증분 정적 재생성 기능. 어느 정도의 주기로 정적 페이지 랜더링 가능함.
getStaticProps안에서 return 에revalidate속성 주면됨.
실무
- jest 테스트 코드
- 통합테스트는 뭐 소개해주는게 그냥 유닛테스트나 잘짜자. utils 위주
- 아토믹 디자인 원칙
- 근데 쓰다보면 이게 분자인지 유기체인지 가끔 햇갈림.
- 비즈니스 로직은 유기체에 두고, 분자와 원자의 재사용성을 높이자.
- 상태관리
- context API 차라리 순정이라 깔끔
- redux 보일러플레이트 코드 너무많아서 짜증
- recoil 낫베드
- 스타일 : scss 쓰자.
- custom 서버가능함. but vercel 배포안됨.
- 필요하면 express 맨 앞단에 리버스프록시처럼 쓸 수 이씀.
- 인증은 필요하면 Auth0 플랫폼 이용하자