두 번째로 추가한 페이지에는 현재 스타일이 없습니다. 페이지에 CSS를 추가해보겠습니다.
Next.js는 CSS와 Sass에 대한 내장 지원 기능을 갖고 있습니다. 이 강의에서는 CSS를 사용할 것입니다.
또한 이 수업에서는 Next.js가 이미지와 페이지 메타데이터(예: <title> 태그)와 같은 정적 자산을 처리하는 방법에 대해서도 다룰 것입니다.
이번 레슨에서 배울 것
이 수업에서는 다음과 같은 내용을 배우게 됩니다:
- Next.js에 정적 파일(이미지 등)을 추가하는 방법
- 각 페이지의
<head>에 들어갈 내용을 사용자 정의하는 방법 - CSS 모듈을 사용하여 스타일이 적용된 재사용 가능한 React 컴포넌트를 생성하는 방법
pages/_app.js에서 전역 CSS를 추가하는 방법- Next.js에서 스타일링하는 데 유용한 팁들
사전 요구 사항:
- 기본적인 CSS 지식. 이 강의에서는 Next.js 앱에 CSS를 추가하는 방법을 다룰 것이지만, CSS 기본 원리에 대해서는 다루지 않을 것입니다.
지치지 않는 백엔드 개발자 김성주입니다 :)