• Next.js에서 제공하는 Link 태그 (서비스 안에서의 이동) VS a 태그( 외부
• Link 컴포넌트는 url로 직접 치고 접근하는 것이 아니라, JS 상에서의 변경이 일어남 ( background-color 예시) → HTML이 reload 되지 않았다.
• prefetching : 컴포넌트가 viewport에 노출될때 JS 파일을 미리 불러온다. ( 최적화 )
• /public 밑의 정적 리소스 ( 이미지 파일, robots.txt )
• Image 컴포넌트 VS Img 태그
  • jpeg를 import 했는데 webp(압축, 퀄리티 좋은)로 자기가 알아서 바꿔줌 (포맷 최적화)
  • resizing
  • lazy-load기능 ( viewport에 노출되었을때 그때 보여줌 )
• meta / head 컴포넌트
• styled-jsx, CSS module
• pre-rendering
  • SSG : 빌드 타임에 pre-render
    • 사용자가 요청하기 전에 페이지를 그려놔도 되는가???
    • marketing page
    • blog
    • 우리는 File system으로 SSG 구현함 ( md 파일들… )
  • SSR : 요청 시 마다
• API Routes : FS는 노드에서만 동작함, 브라우저에서는 노노
• Dynamic Routes
  • [slug].js
  • SSG시 생성할 목록을 배열로 뱉어줌 : getStaticPaths ( paths 배열 반환 )
    • fallback option : build시 생성되지 않았던 페이지 처리
    • fallback option : false : build시 생성되지 않았던 페이지는 404
    • fallback option : true : loading 페이지를 보여주다가 getStaticProps으로 파일을 읽어보고 있으면 페이지 보여주기
    • fallback option : blocking : loading 그리지 않고 etStaticProps으로 파일을 읽어보고 있으면 페이지 보여주기
• API Routes 는 클라이언트에서 요청하는 용도….
• API Routes로 Post 요청을 보내 보았다.
• 깃헙에 올리고 vercel을 연동해서 바로 배포 했다.
• 연동후에는 main 브랜치로 push 하면 바로 배포 됬다.