Next.js 공식문서를 참고하며 공부한 기본 개념들을 정리했습니다
Code splitting and prefetching
Code splitting
- Next.js는 코드 분할을 자동으로 수행함
- 각 페이지는 해당 페이지에 필요한 부분만 로드함
- 홈페이지가 렌더링될 때 다른 페이지의 코드는 처음에 제공되지 않음
장점
- 수백 개의 페이지가 있어도 홈페이지가 빠르게 로드됨
- 특정 페이지에서 오류가 발생해도 나머지 애플리케이션은 계속 작동함
prefetching (미리 불러오기)
- 링크 컴포넌트가 브라우저의 뷰포트에 표시될 때마다 링크된 페이지의 코드를 백그라운드에서 자동으로 prefetching함
- 링크를 클릭할 때 쯤이면 대상 페이지의 코드가 이미 백그라운드에서 로드되어 페이지 전환이 거의 즉시 이루어짐
next/Image 컨포넌트의 기능
- lazy loading
- 이미지 사이즈 최적화
- placeholder 제공
lazy loading
: 이미지를 로드하는 시점을 필요할 때까지 지연시키는 기술
스크린 밖에 있는 이미지들은 로딩을 지연시키고 스크린 안에 있는 이미지만을 로드해서,
불필요한 대역폭 사용을 줄이고 필요한 이미지만 빠르게 로드할 수 있도록 하는 것
이미지 사이즈 최적화
: 디바이스 크기 별로 srcSet을 미리 지정해두고, 사용자의 디바이스에 맞는 이미지를 다운로드할 수 있게 지원
Next.js는 이미지를 webp와 같은 용량이 작은 포맷으로 이미지를 변환해서 제공함
→ 위의 작업들은 이미지에 대한 최초 요청 시에 Next.js 서버에서 진행됨
placeholder 제공
: *CLS(Cumulative Layout Shift), 즉 레이아웃이 흔들리는 현상을 방지하기 위해 placeholder 제공
이미지가 로드되기 전에도 이미지 높이만큼 영역을 표시해서 이미지가 로드된 후에 레이아웃이 흔들리지 않도록 함
(*CLS = 어떤 웹 사이트에 방문했을 때 이미지가 로드되기 전까지 영역의 높이가 0이었다가 이미지가 로드된 후 이미지만큼 영역이 늘어서 레이아웃이 흔들리는 바람에 다른 링크를 클릭하는 경험과 같은 것)
리모트 이미지 넣기
1. 이미지를 서빙하는 서버가 안전한 서버라는 것을 Next.js에게 알려줘야 함
// next.config.js
module.exports = {
images: {
domains: ['your-cdn-image-domain'],
},
};2. src에 이미지 경로 작성 → width, height 정보 기입 (*blur 이미지가 생성되지 않음)
import Image from 'next/image';
export default function Me() {
return <Image src="/me.png" alt="Picture of me" width={500} height={500} />;
}
next/script 컴포넌트의 기능
export default function FirstPost() {
return (
<>
<Head>
<title>First Post</title>
</Head>
<Script
src="https://connect.facebook.net/en_US/sdk.js"
strategy="lazyOnload"
onLoad={() =>
console.log(`script loaded correctly, window.FB has been populated`)
}
/>
<h1>First Post</h1>
<h2>
<Link href="/">← Back to home</Link>
</h2>
</>
);
}- staregy : third-party script가 로드되는 시기를 제어함. lazyOnload 값은 브라우저 유휴 시간동안 이 특정 스크립트를 느리게 로드하도록 Next.js에 지시함.
- onLoad : 스크립트 로딩이 완료된 후 즉시 자바스크립트 코드를 실행하는데 사용됨
CSS Modules
Next.js는 CSS Modules를 지원함
파일명: [name].module.css
특징
- 고유한 클래스 이름을 자동으로 생성하여 CSS를 로컬로 범위 지정함 → 충돌에 대한 걱정 없이 여러 파일에서 동일한 CSS 클래스 이름 사용 가능
- 모든 CSS Module 파일은 자동으로 여러 개로 축소되고, 코드 분할된 .css 파일로 연결됨 → 애플리케이션을 paint 하는데 필요한 최소한의 CSS만 로드됨
Global CSS
pages/_app.js에서 Global CSS를 가져와서 추가할 수 있음
=> 다른 곳에서는 Global CSS를 가져올 수 없음 (Global CSS가 페이지의 모든 요소에 영향을 주기 때문)
Global CSS 파일은 아무 곳에나 배치하고 아무 이름이나 사용할 수 있음
// `pages/_app.js`
import '../styles/global.css';
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />;
}
다음과 같이 필요한 CSS 파일을 import 해 추가하는 방법도 있다.
/*global.css*/
$enable-negative-margins: true;
@import "../../node_modules/bootstrap/scss/bootstrap";
@import "./layout/avatar";
@import "./layout/footer";
@import "./layout/header";
@import "./layout/progress";
@import "./layout/sidebar";
@import "_custom";
package.json 명령어
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
}- dev : 개발모드에서 Next.js를 시작하는 실행 → source map과 hot code reloading이 제공되어 디버깅시 유용함
- build : 프로덕션 용도로 애플리케이션을 빌드하는 실행
- start : Next.js 프로덕션 서버를 시작하는 실행
(* build, start 명령어는 운영 버전의 사이트를 로컬에서 배포하는데 사용해야 하는 명령어로 최종 사용자들에게 유익하지 않을 source map과 hot code reloading 등의 기능을 가지고 있지 않다.)
출처 :
https://nextjs.org/learn/foundations/about-nextjs
https://fe-developers.kakaoent.com/2022/220714-next-image/
'배움 기록 > Next.js' 카테고리의 다른 글
| [Next.js] Static / Dynamic rendering 과 caching 기능 사용하기 (App Router ver.) (0) | 2023.10.05 |
|---|---|
| [Next.js] App Router에 대해서 (+ Pages Router와 비교) (0) | 2023.09.05 |
| [Next.js] 개념 간단 정리 (0) | 2023.08.31 |
| [Next.js] Pre-rendering과 Data Fetching (0) | 2023.04.16 |
| [Next.js] _app.js와 _document.js에 대해서 (0) | 2022.12.26 |
댓글