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 파일로 번들링 된다.
import '../styles.css';
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
예외적으로, node_modules
로부터의 CSS 파일은 어디에서든 import 할 수 있다.
2. Sass
Next.js에서는 CSS 파일과 마찬가지로 Sass 파일(.scss
, .sass
)도 사용할 수 있다. 이는 CSS 파일과 확장자만 다를 뿐 나머진 동일하다. Sass 파일을 import 하려면 먼저 sass
패키지를 설치해야 한다.
npm install sass
Sass 컴파일러 옵션을 커스터마이징 하고 싶다면 next.config.js
파일의 sassOptions
를 수정하면 된다.
const path = require('path');
module.exports = {
sassOptions: {
includePaths: [path.join(__dirname, 'styles')]
}
};
3. CSS/Sass Module
CSS/Sass 모듈 파일(.module.css
, .module.scss
, .module.sass
)은 어디에서든 import 할 수 있다. 이는 파일명, 클래스명, 해시값을 이용하여 고유한 클래스명을 자동으로 만들어내기 때문에 다른 파일에 존재하는 클래스명과의 충돌을 걱정할 필요가 없다.
빌드 타임에 이러한 CSS/Sass 모듈 파일들은 자동으로 여러 개의 축약된 CSS 파일들로 번들링 된다. 여러 개인 이유는 Next.js(정확히는 Webpack)의 코드 분할에 의해 각 페이지에서 필요한 CSS 파일들이 분리되기 때문이다.
import styles from './Button.module.css';
export function Button() {
return (
<button type="button" className={styles.green}>
Destroy
</button>
);
}
참고로 Sass 모듈 파일의 경우, 다음과 같이 Sass 변수를 JavaScript 파일에서 불러와 사용할 수 있도록 지원한다.
// variables.module.scss
$primary-color: #64FF00;
:export {
primaryColor: $primary-color;
}
// pages/_app.js
import variables from '../styles/variables.module.scss';
export default function MyApp({ Component, pageProps }) {
return (
<Layout color={variables.primaryColor}>
<Component {...pageProps} />
</Layout>
);
}
'리액트 (React)' 카테고리의 다른 글
[Next.js] 핵심 개념 익히기 - ⑤ 환경 변수 사용하기 (2) | 2022.01.17 |
---|---|
[Next.js] 핵심 개념 익히기 - ④ Static 파일 사용하기 (0) | 2022.01.17 |
[Next.js] 핵심 개념 익히기 - ② 페이지 및 사전 렌더링 (2) | 2022.01.17 |
[Next.js] 핵심 개념 익히기 - ① 프로젝트 설치하기 (0) | 2022.01.17 |
[React] Hook 동작(구현) 원리 간단히 알아보기 (6) | 2021.06.07 |