cra(create-react-app)에서는 컴포넌트에 css파일을 import해 style을 적용할수가 있었습니다. 하지만 next.js에서는 바로 적용시키기가 어려웠습니다.
그래서 오늘은 component에 style 파일을 적용시키는 방식을 소개할까 합니다.
1. @zeit/next-css
// next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS()@zeit/next-css을 install하고, 위 코드가 작성된 next.config.js파일을 상위 디렉토리에 위치시키면 component에 js나 css파일을 import할수가 있습니다.
* 개인적인 경험으로 이 방식은 build과정에서 에러를 발생시킨적이 있었습니다.
2. styled-component
1). npm install styled-components, npm install babel-plugin-styled-components
2). 상위 위치에 .babelrc파일 생성하고 아래 코드 기입
{
"presets": ["next/babel"],
"plugins": [
[
"styled-components",
{
"ssr": true,
"displayName": true,
"preprocess": false
}
]
]
}
3). /pages/_document.js에 아래 코드 기입
import Document, { Head, Main, NextScript } from 'next/document';
// Import styled components ServerStyleSheet
import { ServerStyleSheet } from 'styled-components';
export default class MyDocument extends Document {
static getInitialProps({ renderPage }) {
// Step 1: Create an instance of ServerStyleSheet
const sheet = new ServerStyleSheet();
// Step 2: Retrieve styles from components in the page
const page = renderPage(App => props => sheet.collectStyles(<App {...props} />));
// Step 3: Extract the styles as <style> tags
const styleTags = sheet.getStyleElement();
// Step 4: Pass styleTags as a prop
return { ...page, styleTags };
}
render() {
return (
<html>
<Head>
{/* Step 5: Output the styles in the head */}
<meta charSet='utf-8' />
<meta name='viewport' content='initial-scale=1.0, width=device-width' />
{this.props.styleTags}
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
);
}
}
3. _app.js에 import하기
1) css파일을 /pages/_app.js파일에 import하면 모든 페이지에 대해서 css파일이 적용됩니다.
*추가 설명은 docs 참고: https://nextjs.org/docs/basic-features/built-in-css-support
Basic Features: Built-in CSS Support | Next.js
Next.js supports including CSS files as Global CSS or CSS Modules, using `styled-jsx` for CSS-in-JS, or any other CSS-in-JS solution! Learn more here.
nextjs.org
4. 파일명.module.css으로 css파일 생성
1) css파일명과 .css확장자사이에 module을 붙여줍니다.(ex: style.module.css)
2) import시에도 파일명.module.css 형식으로 import 시켜줍니다.
import css from "../css/home.module.css";
class Test Component {
render(){
return(
<div className={css.class명}>test</div>
);
}
}*단 파일명.module.css으로 진행시, class명이 next가 임의로 변경시킨다는 점을 유의하세요!\
ex: css.test로 className을 할당할경우, class가 test여도 rendering될때 class="test_123_asdfx"로 next가 임의로 바꿉니다. 그래서 javascript로 일정하게 class에 접근하기가 어렵습니다.
글이 보시기 어려우시면 이 링크를 참조해주세요: https://medium.com/%EB%8F%84%EA%B9%A8%EB%B9%84-%EC%9D%B4%EC%95%BC%EA%B8%B0/styled-component-in-next-js-bed58b014f29
'개발 > react 생태계' 카테고리의 다른 글
| c와 node.js tcp통신 -(2) (0) | 2020.07.23 |
|---|---|
| c와 node.js tcp통신 (0) | 2020.07.20 |
| Unhandled Runtime ErrorError: React.Children.only expected to receive a single React element child (0) | 2020.07.13 |
| getStaticProps와 getServerSideProps in next.js (0) | 2020.07.09 |
| next.js란? (next.js 서버 커스터마이징) (0) | 2020.07.06 |