우선 페이지와 컴포넌트를 정하고
먼저 헤더 네비게이션 부분을 만들기로 했다.
css를 적용하는데 한 파일 안에서 적용하기보다는 css 파일을 따로 빼서 관리하기 용이하도록 하고싶었다.
🔅 next js는 서버사이드와 클라이언트 사이드 렌더링이 이루어지기 때문에, react처럼 css를 import하는 방법으로는
css를 적용 시킬 수가 없다. 따라서 styled-component와 bootstrap을 이용해 css를 적용시켜보고자 한다. 🔅
참고: https://jcon.tistory.com/118
1. babel , _document.js 설정 필요
npm install styled-components
npm install babel-plugin-styled-components- .babelrc 설정
{
"presets": ["next/babel"],
"plugins": [
[
"styled-components",
//그냥 원래 하던 파일에는 "babel-plugin-styled-components" 이라고 되어있는데.. 이거랑 뭔차인지
{
"ssr": true,
"displayName": true,
"preprocess": false
}
]
]
}
💢💢💢 아니 근데 이 방법으로 했는데 안됨
-> 왜냐? 내가 가진 파일은 redux 버전인것 같음.. 지환님이 수업시간때 하던걸 뼈대로 한거라 redux나 ctx, reducer등 다른 라이브러리가 많이 추가되어있는 상태인것같음.. 그래서 그냥 유튜브에 나와있는대로 다시 해보려고 함. 💢💢💢
보면 이거는 next 개발사 웹사이트에서 코드를 그대로 가져온 기본 세팅 상태인데
Learn | Next.js
Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more.
nextjs.org
파일트리를 보면 styles 폴더가 따로 있음.
그 안에
[컴포넌트].module.css
파일이 따로있고, 해당 컴포넌트를 보니까 <div className={styles.container}> 이렇게 이름으로 연결되어있는듯함..
react-native 할때도 이런식으로 css 했었는데 바보같이 왜 여태 헤맸지...
1. [styles] 폴더생성
- globals.css 파일 생성(전체 파일에 적용되는 css)
- Navigation.module.css 파일 생성 (Navigation 컴포넌트에 import 해와서 적용할 수 있는 css)
❕❕ css 깨짐 방지를 위한 ssr 세팅하기 (with. getInitialProps)
[pages]폴더> _document.js 기본 코드
import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components';
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;
try {
ctx.renderPage = () => originalRenderPage({
enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
),
};
} finally {
sheet.seal();
}
}
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
_document.jsx 기본 코드
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>
);
}
}
'React.js' 카테고리의 다른 글
| [1128] react CopyToClipboard - 클릭시 텍스트 복사하기 (0) | 2021.11.29 |
|---|---|
| [1116] react 마감시간 정하는 기능 - datepicker 사용하기 (0) | 2021.11.16 |
| [react]인스턴스 설정 / postman / restful API (0) | 2021.07.19 |
| [react] react-13/ AWS 콘솔 설정/ AWS를 이용한 배포/ 리눅스 설치 명령어/ vi 에디터 (0) | 2021.07.16 |
| 6.28 리액트 시작 (2) | 2021.06.28 |