Production
-
캐싱/DB-BE 동일 region
-
JS code는 최소화. js bundle 로드 타이밍 최적화
-
로깅/오류 처리/404, 500 페이지 커스텀
-
Lighthouse로 성능 측정/지원 브라우저 및 기능 검토
-
기타 성능 향상
-
JS bundle Size 고려
Deployment
Vercel
-
Github
github의 저장소 public/private 모두 가능 -
vercel
프로젝트를 import 하고 deploy 한다.
PR을 올리면 vercel이 preview를 만들어주어서 배포하지 않은 상태여도 반영되어 보인다.
merge하면 재배포 가능하다.
Authentication
인증 패턴
-
클라이언트 사이드에서
로딩 상태 O -
서버 사이드에서
인증될 때까지 block
iron/next-auth/passport.js
Testing
testing 라이브러리 Cypress (e2e test)
Preview Mode
Headless CMS(Contents management system) 컨텐츠는 만들 때 SSG임에도 build time이 아닌 request time에 초안의 상태를 미리 볼 수 있는 기능
/api/preview
res.setPreviewData({});
token으로 보안 강화한다.
매개변수를 통해 원하는 데이터를 가져와서 getStaticProps에 전달이 가능하다.
Dynamic Import
js file을 동적으로 import 가능하다.
react components도 가능하다.
loadin/ssr/suspense
Automatic Static Optimization
https://nextjs.org/docs/advanced-features/automatic-static-optimization
자동으로 최적화해준다.
npm run build시 static optimized된 페이지는 html, getServerSideProps가 있으면 js로 만들어진다.
Static HTML Export
https://nextjs.org/docs/advanced-features/static-html-export
next export
standalone without Node.js server
서포트 안하는 기능들 제거 혹은 대체 해야한다.
(img의 경우 custom or solution)
Absolute Imports and Module path aliases
https://nextjs.org/docs/advanced-features/module-path-aliases
AMP 지원
https://nextjs.org/docs/advanced-features/amp-support/introduction
nexjs는 react 페이지를 AMP 페이지로 변환할 수 있게 지원한다.
AMP?
Accelerated Mobile Page
Google에서 공개한 오픈 소스
어떻게 빠른 렌더링?
모든 스크립트는 비동기로 동작/리소스의 사이즈 지정/외부 리소스 렌더링 차단/메인 페이지에서 외부 자바스크립트 차단/CSS는 inline으로만 사이즈 제약/스타일 재계산 최소화/GPU 활용하는 애니메이션만 사용 허용
이런 규약들을 줘서 최대한 빠른 렌더링이 가능하게 한다.
Customizing Babel Config
https://nextjs.org/docs/advanced-features/customizing-babel-config
next.js에 적용된 babel 설정을 커스텀할 수 있다.
Babel?
JS Compiler
언어를 low한 언어로 바꿔주는 compiler와 달리 babel은 transpiler라고 부르기도 한다.
최신 브라우저가 아닌 경우의 사용자에게도 동일한 경험을 제공하기 위함이다.
