-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
css 서버사이드 랜더링이 적용되지 않아서 문의 드립니다.
24.05.08 08:41 작성 조회수 54
0
안녕하세요 제로초님!
위의 질문 답변을 보고 css 서버사이드 랜더링을 하기위해서 이것저것 해보았는데 적용이 안되서 문의 드립니다.
.babelrc 작성
next.config.js에서도 옵션으로 가능하다고해서 수정
_document.js 수정
빌드 하고 npm start하고 테스트
위 링크의 답변 참고해서
@ant-design/cssinjs 적용해봄
그럼에도 적용안되더라구요 ㅠ
pages/_docuemnts.js
(이 전에는 제로초님깃헙의 것을 썼었습니다. 안돼서 @ant-design/cssinjs 적용한 버전입니다.
import React from "react";
import Document, { Html, Head, Main, NextScript } from "next/document";
import { createCache, extractStyle, StyleProvider } from "@ant-design/cssinjs";
import { ServerStyleSheet } from "styled-components";
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const cache = createCache();
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) =>
(
<StyleProvider cache={cache}>
<App {...props} />
</StyleProvider>
),
});
const initialProps = await Document.getInitialProps(ctx);
const style = extractStyle(cache, true);
return {
...initialProps,
styles: (
<>
{initialProps.styles}
<style dangerouslySetInnerHTML={{ __html: style }} />
</>
),
};
} catch (error) {
console.error(error);
} finally {
sheet.seal();
}
}
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
next.config.js
const withBundleAnalyzer = require("@next/bundle-analyzer")({
enabled: process.env.ANALYZE === "true",
});
module.exports = withBundleAnalyzer({
images: {
domains: ["react-nodebird.s3.ap-northeast-2.amazonaws.com", "react-nodebird-s3.s3.amazonaws.com"],
},
compress: true,
compiler: {
styledComponents: {
ssr: true,
displayName: true,
},
},
webpack(config, { webpack }) {
const prod = process.env.NODE_ENV === "production";
return {
...config,
mode: prod ? "production" : "development",
devtool: prod ? "hidden-source-map" : "inline-source-map",
plugins: [...config.plugins],
};
},
});
.eslintrc
{
"parser": "@babel/eslint-parser",
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
},
"requireConfigFile": false,
"babelOptions": {
"presets": ["next/babel"]
}
},
"env": {
"browser": true,
"node": true,
"es6": true
},
"extends": [
"airbnb",
"next/babel"
],
"plugins": ["import", "react-hooks", "jsx-a11y"],
"rules": {
"react/react-in-jsx-scope": "off",
"jsx-a11y/label-has-associated-control": "off",
"jsx-a11y/anchor-is-valid": "off",
"no-console": "off",
"no-underscore-dangle": "off",
"react/forbid-prop-types": "off",
"react/jsx-filename-extension": "off",
"react/jsx-one-expression-per-line": "off",
"react/jsx-props-no-spreading": "off",
"object-curly-newline": "off",
"linebreak-style": "off",
"no-param-reassign": "off",
"max-len": "off"
}
}
/.babelrc
{
"presets": ["next/babel"],
"plugins": [
[
"styled-components",
{
"ssr": true,
"displayName": true
}
]
]
}
https://github.com/dydcodydco/react-nodebird
혹시나해서 깃헙 주소도 남깁니다.
마지막으로 하나 더 궁금한게 있습니다.
이 강의를 내껄로 만들고, 다음강의 슬랙까지 강의보고 하면
중고신입으로 개발자 이직할 수 있을지도 궁금합니다.
좋은 강의 정말 감사합니다.
답변을 작성해보세요.
답변 1