Next.js 공식 문서를 읽고, 필자가 생각하기에 Next.js에 대해 알고 있어야 하는 핵심 개념을 정리한 포스팅입니다. 실제로 Next.js 공식 문서를 살펴보면 생각보다 많은 내용이 있는데, 필자의 목적은 "Next.js가 무엇이냐"라는 질문에 대해 답을 할 수 있는 수준의 핵심 개념을 간추리는 것입니다. 더 자세한 내용은 개발하면서 그때그때 살펴보면 된다고 생각합니다.
Next.js에서는 JavaScript에서 CSS/Sass 파일을
import
할 수 있다. 이는 Next.js가 JavaScript에서의 import
문법을 확장했기 때문에 가능한 일이다. (아마도 Next.js가 Webpack의 동작 방식을 커스터마이징 한 것이 아닐까 추측한다.)1. CSS
전역적으로 영향을 미치는 CSS 파일은
pages/_app.js
파일에서만 import
할 수 있다. 빌드 타임에 이러한 CSS 파일들은 자동으로 하나의 축약된 CSS 파일로 번들링 된다.예외적으로,
node_modules
로부터의 CSS 파일은 어디에서든 import
할 수 있다.2. Sass
Next.js에서는 CSS 파일과 마찬가지로 Sass 파일(
.scss
, .sass
)도 사용할 수 있다. 이는 CSS 파일과 확장자만 다를 뿐 나머진 동일하다. Sass 파일을 import
하려면 먼저 sass
패키지를 설치해야 한다.Sass 컴파일러 옵션을 커스터마이징 하고 싶다면
next.config.js
파일의 sassOptions
를 수정하면 된다.3. CSS/Sass Module
CSS/Sass 모듈 파일(
.module.css
, .module.scss
, .module.sass
)은 어디에서든 import
할 수 있다. 이는 파일명, 클래스명, 해시값을 이용하여 고유한 클래스명을 자동으로 만들어내기 때문에 다른 파일에 존재하는 클래스명과의 충돌을 걱정할 필요가 없다.빌드 타임에 이러한 CSS/Sass 모듈 파일들은 자동으로 여러 개의 축약된 CSS 파일들로 번들링 된다. 여러 개인 이유는 Next.js(정확히는 Webpack)의 코드 분할에 의해 각 페이지에서 필요한 CSS 파일들이 분리되기 때문이다.
참고로 Sass 모듈 파일의 경우, 다음과 같이 Sass 변수를 JavaScript 파일에서 불러와 사용할 수 있도록 지원한다.