css 서버사이드 랜더링이 적용되지 않아서 문의 드립니다.

https://www.inflearn.com/course/lecture?courseSlug=%EB%85%B8%EB%93%9C%EB%B2%84%EB%93%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%A6%AC%EB%89%B4%EC%96%BC&unitId=49018&category=questionDetail&tab=community&q=1075492

안녕하세요 제로초님!

위의 질문 답변을 보고 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
혹시나해서 깃헙 주소도 남깁니다.

마지막으로 하나 더 궁금한게 있습니다.
이 강의를 내껄로 만들고, 다음강의 슬랙까지 강의보고 하면

중고신입으로 개발자 이직할 수 있을지도 궁금합니다.
좋은 강의 정말 감사합니다.

인프런 커뮤니티 질문&답변