NextJs : 네비게이팅/프리 페칭/API Routes/스타일링

네비게이팅

1. Link 태그 이용하기

next 에서는 기존의 a 태그를 이용한 페이지 이동보다는 더 빠르게 이동하기 위해서 next에서 자체적으로 제공하는 Link 컴포넌트를 사용해야 합니다.

 

Link 태그의 href 속성으로 페이지 경로를 설정할 수 있습니다.

 

2. Programmatic Navigation(프로그래매틱한 페이지 이동)

 

사용자가 링크를 직접 클릭하는 방식이 아닌, 특정 버튼이 클릭되거나 조건이 달성하거나 할 때 특정 함수 내에서 페이지를 이동시키는 방법으로 사용자가 클릭하지 않고도 조건이 충족되면 자동으로 페이지가 이동하게 할 수 있습니다.

 

useRouter 의 method 사용

• push: 해당 경로 페이지로 이동
• replace: 뒤로가기 방지 및 페이지 이동
• back: 뒤로가기 실행

프리 페칭(Pre-Fetching)

프리 페칭이란?

현재 사용자가 보고 있는 페이지에서 이동할 가능성이 있는 모든 페이지들을 사전에 불러놓는 기능.

 

그런데 이는 SSR 방식에서는 서버에서 페이지 렌더링을 마친 뒤 유저에게 보낸 다음에 서버에서 JS 번들을 보내고. 그 뒤에는 서버로 요청이 가지 않아야 합니다. 그렇다면 추가적인 데이터를 요청하는 프리패칭은 왜 필요할까요?

 

그 이유는 Next.js에서는 애플리케이션에 존재하는 모든 페이지 컴포넌트들을 페이지별로 분리(스플리팅)해서 저장을 미리 마쳐두기 때문에 JS 번들이 서버에서 클라이언트로 전달될 때에는 모든 페이지에 필요한 코드들이 전달되는게 아니라, 필요한 부분만 전달하게 됩니다.

 

하지만 이렇게 되면 페이지를 이동할 때마다 필요한 JS 번들을 계속 요청해주어야 합니다.  프리패칭은 이런 문제를 방지해주는 것입니다.

 

즉, Next.js는 필요한 JS Bundle만 전달함으로써 용량 경량화로 인해 Hydration 시간이 단축될 수 있는데 이러한 기능을 제공할 때 필요한 것이 프리패칭입니다.

 

• 프리페칭은 Link 컴포넌트로 구현한 페이지만 프리 페칭이 가능 합니다.
• 개발자 도구(network)를 확인해보면 search와 book등 미리 프리패칭된 것을 확인할 수 있는데. Test 컴포넌트를 확인해보면 프리패칭이 되어 있지 않습니다.

• 그래서 이를 해결하기 위해서는 코드를 다음과 같이 추가해주면 특정 페이지를 명시적으로 프리패칭할 수 있습니다.
• callback 함수에서 라우터의 prefetch 함수를 실행하고, 프리페칭할 페이지를 넣어줍니다.
• mount되었을 때 한 번만 실행시킬 것이므로, useEffect 훅의 의존성 배열을 빈 배열로 전달합니다.

Link 컴포넌트지만 prefetching을 막고싶다면?

• Link 컴포넌트의 prefetch 속성을 false로 설정해줍니다.

API Routers

Next.js 앱에서 API를 구축할 수 있도록 만들어 주는 기능을 말합니다.

 

Next.js 프로젝트를 생성하면 기본적으로 src/pages/api 폴더가 있는데, 이 폴더에서 생성된 파일들은 기본적으로 API 응답을 정의하는 파일들로 설정됩니다. (경로 또한 api/hello와 같이 갖게 됩니다.)

 

현재 시간을 나타내주는 API를 구현해보면. 사진과 같이 api 파일 밑에 time.ts를 생성해주고 기본 매개변수를 설정해주면 됩니다. /api/tiem 경로로 들어가면 잘 실행되었는지 확인할 수 있습니다.

스타일링

CSS 스타일링은 Next.js에서 기본적으로 제공하는 CSS 모듈을 사용하면 된다.

• 기존 css 파일을 module처럼 사용할 수 있게 하는 기능.
• css 파일에 작성해둔 클래스명들이 다른 css 파일과 중복되지 않도록, 클래스명들을 유니크한 이름으로 변환시켜준다.
• css 파일은 [파일명].module.css으로 설정한다.
  ▶ css 파일의 모듈화

 

출처 : [한 입 크기로 잘라먹는 Next.js(15+) 강의]