네비게이팅

a 링크는 서버에게 새로운 페이지를 매번 요구 -> link 컴포넌트 사용

Pre-Fetching

사전에 불러온다는 뜻으로 웹 서버에서 미리 페이지를 사전에 미리 불러오는 기능이다

사용하는 이유

Next.js에서 js bundle 과정을 거칠때 현제 페이지 경로에 있는 jscode 를 렌더링 한다.
그래서 현재 사용자가 보고있는 페이지 내에서 이동 가능성이 있는 모든 페이지들을 사전에 미리 불러오기 위해 사용한다

Pre-Fetching을 통한 Next.js 전체 동작 방식

주의점

Pre-fetching은 Link 컴포넌트를 주로 pre-fetching한다.
router.prefetch를 통해 pre-fetching을 할 수 있다.

자주 사용하지 않는 링크의 경우 pre-fetching을 해제해서 성능 향상을 시킬 수 있다.

API-Routers

Next.js에서 API를 구축할 수 있게 하는 기능이다
(백엔드 API 서버가 하는 일과 동일한 간단한 API 구축 가능)

/pages/api/[파일이름].ts
pages/api 디렉토리 아래 선언함으로서 API 라우트로서 API 응답을 정의하는 파일로 자동으로 설정해준다

추가 지식

next.js에서 스타일을 import하려면 각각의 컴포넌트가 아닌 _APP.tsx 에서 import 해야한다

다른 페이지에서 작성된 css 코드와 충돌 위험이 있기 때문

CSS modules

기존의 css 파일을 마치 모듈처럼 사용할 수 있도록 한다.
css 파일의 클래스 네임들이 다른 css 파일과 중복되지 않도록 클래스 네임을 자동으로 파일마다 변환시킨다

즉, 페이지별 클래스 네임 겹치는걸 해결하기 위해서 사용한다.