라우팅
Next.js는 “파일 시스템 기반 페이지와 라우팅” 을 사용한다.
pages/디렉터리를 가지고 있음.
- 디렉터리 안에 .js, jsx, .ts, .tsx 파일에서 익스포트한 리액트 컴포넌트 이다.
- 동적 라우팅 규칙을 생성해서 [idx].js 파일을 만들면
~~/test/1이런식으로 가져 갈 수 있음
페이지에서 매개변수 사용하려면 “getServerSideProps” 함수를 이용한다.
컴포넌트에서 경로 매개변수 사용하려면 “useRouter”을 사용한다.
클라이언트에서 내비게이션
- Link컴포넌트를 이용한다.
- useRouter훅을 사용해 이동. router.push
정적 자원 제공
정적자원은 /public 디렉터리 안에 저장하는 방식으로 클라이언트에서 제공한다.
이미지를 불러온 후에 이미지 주변의 레이아웃이 변경되는 현상 “누적 레이아웃 이동(CLS)” 이 나타난다. Next.js에서는 내장 Image 컴포넌트를 사용해서 CLS문제를 해결한다.
자동 이미지 최적화(next.js 내부)
Next.js에서 자동 이미지 최적화를 진행한다. WebP같은 최신 이미지 포멧으로 클라이언트가 요청할때 이미지를 제공한다.
next.config파일에 설정을 추가하고 image컴포넌트를 사용하는 방식!
module.exports = {
images : {
domains: ['images.unsplash.com'] //외부 이미지 서비스로 이미지 제공, 이미지를 제공할 도메인 이름 추가한다.
}
}[images.unsplash.com](http://images.unsplash.com) 도메인의 이미지를 불러올때마다 Next.js가 자동으로 이미지를 최적화 한다.
img 태그의 layout 속성을 이용해서 다양하게 자를 수 있음 (fixed, responsive, intrinsic, fill)
외부 서비스를 통한 자동 이미지 최적화
컴퓨팅 자원이 충분하지 않은 작은 서버에서 실행된다면 이미지 최적화로 인해 성능에 영향을 미칠 수 있다. loader 속성을 이용해 외부서비스로 최적화 작업을 처리한다.
module.exports = {
images : {
loader: 'akamai',
}
}웹앱을 vercel로 배포하는 경우에는 loader속성을 지정할 필요가 없다. 알아서 이미지 최적화를 해주기 때문 그외에도 Akamai, imgix, Cloudinary같은 외부 서비스를 사용 할 수 있음.
웹 스크래퍼, 봇, 웹스파이더와 같은 웹 문서 수집기를 생각해야한다.
메타데이터
페이스북이나 트위터 링크 공유할때 각자 프로토콜을 사용해서 어떤 데이터를 카드에 표시할 지 파악한다. 그래서 이런 정보를 주기 위해 몇가지 메타 데이터를 추가해야한다.
Next.js는 내장 head 컴포넌트를 제공하여 이런 데이터를 쉽게 다룰 수 있게 도와준다. 동적으로
를 변경할 수 있도록 도와줌.<head>
<title>test</title>
</head>컴포넌트에 위 내용을 추가할 수 있음
그러나 컴포넌트마다 모든 메타데이터와 관리코드를 일일이 만들기에는 작업의 양이 너무 많고 불편하다. 그룹화하여 HTML태그를 다루는 컴포넌트를 만들고 사용하는게 좋다.
공통 메타태그 그룹
SEO를 위해 메타태그 추가하는 법
<meta property="og:title" content={} />
<meta property="og:description" content={} />
<meta property="og:image" content={} />
..
<meta property="og:card" content={} />
...특정 컴포넌트에 추가한다.
동일한 메타태그나 데이터 처리하고싶다면?
_app.js파일을 커스터마이징해서 구현 할 수 있음
_app.js , document.js 페이지 커스터마이징
_app.js
파일의 주된 사용 목적은 페이지 이동시 서로 다른 페이지간 상태유지, 전역 스타일추가, 페이지 레이아웃 관리, 페이지 속성에 데이터를 추가하는 것 등이다.
getInitialProps 함수를 사용하면 렌더링 할때마다 서버에서 특정 데이터를 불러 올 수 있다. 그러나 동적인 페이지에 대한 최적화를 하지 않는다.
_app.js파일을 커스터마이징 해서 컴포넌트 렌더링을 수정할 수 있지만
같은 HTML태그는 커스터마이징 불가하다. _document.js 페이지를 대신 사용한다.내장 클래스 Document를 사용해 Html, Head, Main(컴포넌트 렌더링 하는곳), NextScript(클라이언트에 전송할 페이지를 렌더링하고 클라이언트에서 실행할 코드나 리엑트 하이드레이션 같은 작업을 처리할 커스텀 스크립트를 끼울 수 있다.) 을 사용할수 있음
이 네가지를 모두 불러와야한다.
'BOOKS' 카테고리의 다른 글
| [함수형 코딩] 13. 함수형 도구 체이닝 , 14. 중첩된 데이터에 함수형 도구 사용하기 (1) | 2024.01.01 |
|---|---|
| HTTP 캐시 (0) | 2023.09.27 |
| [실전에서 바로쓰는 Next.js] 렌더링 전략 (0) | 2023.05.05 |
| [웹 성능 최적화 기법]웹에서 가속을 끌어내는 방법 (0) | 2023.04.10 |
| [웹 성능 최적화 기법]웹 사이트 개선 방법 (0) | 2023.03.01 |