#17 NextJS Extras

김마드 2024. 8. 10. 18:58

1. Fonts

아래 랭크 참조

2. Private Folders

Private 폴더는 폴더 앞에 밑줄(_folderName)을 붙여 생성할 수 있습니다.
https://nextjs.org/docs/app/building-your-application/routing/colocation#private-folders

3.Catch All Segments

대괄호 [...folderName] 안에 줄임표를 추가하면 동적 세그먼트를 모든 후속 세그먼트로 확장할 수 있습니다.

4. Logging

외부 api를 호출 할 때 데이터가 cache가 hit되었는지 skip 되었는지 로그를 볼 수 있다. (외부 api 사용 시 사용해보자)

5. Security

데이터 fetch 시, 클라이언트에 내가 보여주고 싶지 않은 민감한 정보가 있을 때 내가 설정해서 error를 띄우게 할 수 있음

experimental_taintObjectReference
특정 객체 인스턴스가 사용자 객체와 같은 클라이언트 컴포넌트에 전달되는 것을 방지할 수 있습니다.
https://react.dev/reference/react/experimental_taintObjectReference

6.Images

이미지 사진이 크거나, 로딩시간이 길 때 이를 위한 nextjs에서 제공하는 Image 태그에서 blur 처리가 가능하다. 그리고 placeholder에 다른 이미지도 넣었다가, 교체해줄 수 도있다.