• pages폴더 안에 있는 파일이름들이 url과 매칭된다.
• npm run dev 모드에서는 fast refresh : 코드 변경시 바로바로 업데이트되어 화면에 나타난다.
• npm run build → npm run start 모드에서는 코드 변경시 바로 변경되지 않는다. (실제 배포 환경)
• slug : products/[slug]에서 slug에는 다양한 url이 들어 올 수 있었다.
• Data-fetching은 페이지를 그리는 방식과 연관되어 있다. ← 데이터를 가져와서 그린다.
• Next.js에서 제공하는 페이지 그리는 방식 : SSR, CSR, SSG, ISR
• SSG : 빌드타임에 필요한 데이터를 가져오고, 화면을 그려놓았다.
• SSG는 npm run dev 환경에서는 SSR처럼 동작했다. 꼭 npm run build → npm run start 로 동작확인을 해야한다. 새로고침을 하더라도, 시간이 안바뀌었다.
• ISR : SSG에서 revalidate가 추가된개념, build환경에서 데이터를 가져온다.
• Pre-render : SEO와 초기 로딩 속도(빨라짐)을 가져오기 위해 사용함.
• SSG의 pre-render방식 : 빌드 타임에
• SSR의 pre-render방식 : 요청시
• 공통 되는 코드들을 Layout이라는 컴포넌트에 몰아 넣고 (모듈화) _app.js 에서 사용하였다.
• SubLayout 컴포넌트를 만들고 getLayout 함수를 페이지마다 선언해서 페이지별 공통 요소들을 묶었다.
• 이미지 최적화 솔루션을 제공한다.