이거 할때마다 왜 자꾸 안되는건지?
지금 걍 정리하면서 시작해보려고 한다
1 . typeScript와 next설치
npx create-next-app --typescript2. project이름은 위 명령어 입력 후 입력한다
✔ What is your project named? test3. npm run dev 입력 후 실행한다.
4. styled-components설치하기
npm install styled-components5. styled-components type설치하기
npm install -D @types/styled-components babel-plugin-styled-components6. styled-components babel preset설치
npm i --save-dev babel-plugin-styled-components
npm i babel-preset-next7. 프로젝트 최상위경로에 .babelrc파일 생성
{
"presets": ["next/babel"],
"plugins": [
[
"styled-components",
{
"ssr": true,
"displayName": true,
"preprocess": false
}
]
]
}8. pages폴더 안에 _document.tsx생성
잠깐 _document.tsx가 뭐지 (정리완)
2023.01.27 - [Frontend/Next.js] - _app.tsx , _document.tsx 차이를 알아보자
9.Next 초기렌더링시 styled-components가 렌더링되지 않는 현상이 생길 수 있다.
_document.tsx는 SSR시 실행되는 파일이므로 방지 할 수 있다.
공식문서를 보고 해결해보자
https://github.com/vercel/next.js/tree/deprecated-main/examples/with-styled-components
import { ServerStyleSheet } from "styled-components";
import Document, { Html, Head, Main, NextScript } from "next/document";
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>
);
}
}이 정도면 된건가..?...
모르겠다..
지적 대 환영;;
추가 :
SSR , CSR때문에 className이 동일하지 않아 생기는 에러 해결
babel-styled-components...검색해서 추가완
2023.01.27 - [TIL/개발지식] - Warning: Prop `className` did not match. Server: "zzz" Client: "xxx"
'Frontend > Next.js' 카테고리의 다른 글
| 1. Next.js 시작하기 (0) | 2023.02.15 |
|---|---|
| Next.js에서 페이지이동이 필요할때 | (0) | 2023.02.04 |
| _app.tsx , _document.tsx 차이를 알아보자 (0) | 2023.01.27 |
| Error was not caught TypeError: Cannot read properties of null (reading 'textContent') (0) | 2023.01.27 |
| 1. Next.js 는? (0) | 2022.03.08 |