Next js를 배워보자 #4 - Assets, Metadata와 CSS
이번엔 CSS 스타일을 입혀보도록 하자.
Next.js has built-in support for CSS and Sass.
For the purposes of this course we will use CSS.
Next.js는 CSS와 Sass가 내장되어 있다.
이번엔 CSS를 사용해볼 예정이다.
어떻게 Next.js가 이미지나 메타데이터와 같은 정적 assets을 다루는지 알아본다.
목표
이번 장에선 아래와 같은 내용을 배울 것이다.
- 어떻게 정적 파일을 Next.js에 추가하는지
- 어떻게 각 페이지별 안에 내용을 커스텀 하는지
- 어떻게 CSS 모듈을 사용하여 React Component를 재사용 하는지
- 어떻게 global CSS를 적용하는지
- 몇 가지 Next.js에서의 스타일링 팁
좀 더 자세한 내용을 보고 싶다면 Next.js CSS 문서를 살펴보자.
Assets
먼저, 어떻게 Next.js가 이미지와 같은 정적 에셋들을 다루는지 살펴보자.
- Next.js는
public디렉토리 아래 있는 정적 파일을 제공할 수 있다. public폴더 내에 들어있는 파일들은pages와 같은 애플리케이션 파일에서 참조될 수 있다.
예를 들어, pages/index.js를 보면 footer에서 이미지를 참조하고 있을 것이다.
<img src="/vercel.svg" alt="Vercel Logo" className="logo" />
로고 이미지 파일은 public/ 디렉토리에 있을 것이다.
또한 robots.txt 같은 파일도 여기에 위치시켜 사용할 수 있다.
Metadata
각 페이지별 메타데이터 설정 방법은 다음 강의에서 계속 이어진다.
// TODO: Metadata 및 CSS 모듈 사용 예시 추가 예정