Next.js 튜토리얼 Assets, Metadata and CSS 간단 정리

Next.js 튜토리얼 Assets, Metadata and CSS 간단 정리

• Static Assets

  public 디렉토리 에서 관리

• MetaData

  Head 컴포넌트에서 관리

• CSS 스타일링

  styled-jsx 기본 제공

  CSS, Sass, CSS-in-JS 지원

• CSS 관리

  CSS 네이밍은 module.css 로 끝나야 import 가능

  name.classname 으로 classname import 가능

  자동으로 고유한 classname 생성

• 글로벌 스타일

  pages 에 _app.js 생성

  글로벌 CSS 는 상위 디렉토리인’styles’ 에서 import

• 레이아웃

  priority 속성 : 이미지를 우선 로드할 수 있음

• 스타일링 팁들

  • clsassnames

    클래스 이름 쉽게 토글할 수 있게 해주는 라이브러리

  • PostCSS 설정 커스터마이징

    루트폴더에 postcss.config.js 파일 생성 및 설정

  • Sass

    별도 설정 없이 사용 가능