📍/public
- root의 /public는 /pages 처럼 앱 내에서 참조 가능
- /public 폴더에는 이미지같은 static assets을 보관
📍기존 이미지 로드 방식의 한계
<img /> 엘리먼트는 아래 사항을 직접 조절해야 함
- 사이즈 크기에 따라 이미지 크기를 직접 조절 (반응형 대응)
- 이미지 최적화를 위해 타사 라이브러리를 사용
- viewport에 들어올 때만 이미지 로딩 가능
📍Image 컴포넌트
- 예시
import Image from 'next/image';
const YourComponent = () => (
<Image
src="/images/profile.jpg" // Route of the image file
height={144} // 원본 비율을 유지해야 함
width={144} // 원본 비율을 유지해야 함
alt="Your Name"
/>
);
디폴트 옵션
- 리사이징, 최적화 및 다양한 포맷 지원
- 빌드 타임에 최적화하지 않고 요청받을 때 최적화 실행
(따라서 일반적 ssg에 비해 빌드 타임이 증가하지 않음 - Gatsby에 비해 빌드타임 확실히 빠름)
- lazy loading으로 페이지 로딩 속도를 가속
- SEO에 도움을 줌
- 참고
Cumulative Layout Shift(누적 레이아웃 이동, CLS)
이 게시물에서는 누적 레이아웃 이동(CLS) 메트릭을 소개하고 이를 측정하는 방법을 설명합니다.
web.dev
📍Metadata - Head 컴포넌트
/pages/index.js 내의 Head 컴포넌트에 title 태그
일반 페이지에 title 추가하기
- import
import Head from 'next/head';
📍script 추가하기 - Script 컴포넌트
- 이렇게 직접 추가하는 것도 가능하지만, 렌더링을 blocking하여 속도 저하 유발
<Head>
<title>First Post</title>
<script src="https://connect.facebook.net/en_US/sdk.js" />
</Head>
- Script 컴포넌트를 사용하면 된다
- 파일명을 소문자로 사용
// pages/posts/first-post.js
import Script from '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>
</>
);
}
Script 컴포넌트의 어트리뷰트
1️⃣strategy
- lazyOnload : idle time에 스크립트 로드
2️⃣onLoad
- 스크립트 로딩이 완료되면 즉시 실행할 자바스크립트 코드
📍CSS 사용하기 - Layout 컴포넌트
1️⃣페이지 전체에 적용될 layout을 만들기 위해 Layout 컴포넌트를 만든다
2️⃣FirstPost 컴포넌트를 Layout 컴포넌트로 감싸준다
3️⃣CSS module 방식을 사용하기 위해 layout.module.css 파일을 만들고 css를 작성한다
4️⃣Layout 컴포넌트에서 CSS module 을 import하고 class name을 추가한다
- components/layout.js 예시
import styles from "./layout.module.css";
export default function Layout({ children }) {
return <div className={styles.container}>{children}</div>;
}
📍Global Styles
Next.js 앱에서 전역 스타일링을 적용하려면 pages/_app.js 파일을 생성한다
// pages/_app.js
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />;
}- App 컴포넌트 : 앱의 모든 페이지를 감싸는 top-level 컴포넌트
- 이 컴포넌트로 페이지 네비게이션 중에 state를 유지하거나 전역 스타일링을 적용할 수 있다
⭐_app.js 파일을 작성하고 나서는 개발 서버를 재시작해야한다
global css 적용하기
1️⃣root 디렉토리에 styles 폴더를 추가하고 내부에 global.css 파일을 생성한다
2️⃣pages/_app.js 에서 global.css를 import해준다
- pages/_app.js
import "../styles/globals.css";
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />;
}
⭐_app.js 파일을 작성하고 나서는 개발 서버를 재시작해야한다
📍styles/utils.module.css
- common css class를 만들기 위해 css module 파일을 생성한다
- utils.module.css 예시
.heading2Xl {
font-size: 2.5rem;
line-height: 1.2;
font-weight: 800;
letter-spacing: -0.05rem;
margin: 1rem 0;
}
.headingXl {
font-size: 2rem;
line-height: 1.3;
font-weight: 800;
letter-spacing: -0.05rem;
margin: 1rem 0;
}
.headingLg {
font-size: 1.5rem;
line-height: 1.4;
margin: 1rem 0;
}
/* ... */
- 이제 해당 클래스를 다른 컴포넌트에서 재사용할 수 있다
🤔원래 module.css 파일은 함께 폴더내에 위치한 컴포넌트에서만 쓸 수 있는것 아닌가?
- 그래서 이 폴더 내의 css 들은 module 형식을 썼지만, 실제로는 common, global style에 가깝다
- 실제 module 파일은 components//latout.module.css 같은 것들이다