[Next.js] 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에서의 스타일링 팁

좀더 자세한 내용을 보고싶다면 CSS 문서를 살펴보자

Assets

---

먼저, 어떻게 Next.js가 이미지와 같은 정적 에셋들을 다루는지 살펴보자.

Next.js는 public 디텍토리 아래 있는 정적 파일을 제공할 수 있다. public 폴더 내에 들어있는 파일들은 pages와 같은 애플리케이션 파일에서 참조될 수 있다.

만약 pages/index.js 를 보면 footer에서 이미지를 참조하고 있을것이다.

<img src="/vercel.svg" alt="Vercel Logo" className="logo" />

로고 이미지 파일은 public 디렉토리에 있을것이다.

public 디렉토리는 robots.tst 에서도 사용할 수 있다.

Metadata

---

각 페이지별