[ Dev Log] 박지훈 / 2021-07-08

# Next.js + Styled-components
### styled-components 사용시 문제점??

문제: 처음에 css가 적용하지 않은 채로 잠시 나왔다가 css가 적용된다. 뭔가 보기가 안 좋다.
해결 : styled-components에 ssr을 적용하면 처음부터 css가 적용 된 상태로 나오게 된다.
### Next.js에서 styled-components ssr 적용 방법

### /pages/_document.js

```jsx
import React from "react";
import Document, { Main, NextScript, Head } from "next/document"; //next의 html과 나머지 기타 기능들을 넣어주는 Main과 NextScript
import Helmet from "react-helmet"; // head태그에 넣을 정보를 jsx로 작성할 수 있게 도와준다.
import { ServerStyleSheet, createGlobalStyle } from "styled-components";
// _document.js는 index.html을 꾸며주는거다라고 생각하면 된다.
// class형으로 밖에 못 하는게 조금 아쉽다.
// ServerStyleSheet을 사용하여 서버사이드렌더링을 하게 할 수 있다.
// 전체적으로 css를 주고 싶은 부분은 createGlobalStyle을 사용하여 가능하다.
const GlobalStyles = createGlobalStyle`
html, body {
height: 100%;
overflow: auto;
}
#__next {
height: 100%;
}
`;
class MyDocument extends Document {
static getInitialProps(context) {
const sheet = new ServerStyleSheet(); // 서버사이드 렌더링 할 수 있게함.
const page = context.renderPage(App => props =>
sheet.collectStyles(
<>



)
); // 아래의 스타일들을 모아서 페이지를 그려준다. 원래는 없이 하는데 글로벌 스타일을 지정해주기 위해 저렇게 적었다.
const styleTags = sheet.getStyleElement();
return { ...page, helmet: Helmet.renderStatic(), styleTags };
}
render() {
const { htmlAttributes, bodyAttributes, ...helmet } = this.props.helmet; // helmet으로 부터 받아온다.
const htmlAttrs = htmlAttributes.toComponent();
const bodyAttrs = bodyAttributes.toComponent();
return (
//html이랑 head, body 부분에 각각 props들을 넣어준다


{this.props.styleTags}
{Object.values(helmet).map(el => el.toComponent())}






);
}
}

export default MyDocument;
```
### 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?

- [x] 루틴, 운동페이지 에러핸들링