본문 바로가기
Dev/Next JS

[공식문서] NextJS - Assets, Metadata, and CSS #1

by ZEROGOON 2023. 8. 15.

추가한 두 번째 페이지에 현재 스타일이 적용되어 있지 않습니다. 페이지에 스타일을 위한 CSS를 추가해 보겠습니다.

 

Next.js는 CSSSass에 대한 내장 지원을 제공합니다. 이 강좌에서는 CSS를 사용할 것입니다.

 

이번 강좌에서는 이미지와 같은 정적 자산(asstes), 그리고 <title> 태그와 같은 페이지 메타데이터를 Next.js가 어떻게 처리하는지도 배우게 될 것입니다.

 

이번 강좌에서 배우게 될 내용

 

이번 강좌에서는 다음과 같은 내용을 배울 것입니다:

  • Next.js에 정적 파일 (이미지 등)을 추가하는 방법.
  • 각 페이지의 <head> 안에 들어가는 내용을 사용자 정의하는 방법.
  • CSS Modules을 사용하여  스타일이 적용된 재사용 가능한 React 컴포넌트를 생성하는 방법.
  • pages/_app.js에서 전역 CSS를 추가하는 방법.
  • Next.js에서 스타일링하는 데 유용한 팁.

전제조건

  • 기본적인 CSS 지식. 이 강좌에서는 Next.js 앱에 CSS를 추가하는 방법을 다룰 것이지만, 기본적인 CSS 기초에 대해서는 다루지 않습니다.
Next.js 스타일링에 대한 자세한 문서는 CSS 문서를 참조하세요.