https://ant.design/docs/react/use-with-next#using-pages-router
적용하시면 됩니다. @ant-design/cssinjs를 설치한 후에 _document.tsx는 다음과 같이 수정합니다.
import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components';
import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
export default class MyDocument extends Document {
// eslint-disable-next-line consistent-return
static async getInitialProps(ctx) {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;
const cache = createCache();
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) => sheet.collectStyles(
<StyleProvider cache={cache}>
<App {...props} />
</StyleProvider>
),
});
const initialProps = await Document.getInitialProps(ctx);
const style = extractStyle(cache, true);
return {
...initialProps,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
<style dangerouslySetInnerHTML={{ __html: style }} />
</>
),
};
} catch (error) {
console.error(error);
} finally {
sheet.seal();
}
}
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}Next 14 App Router 강좌가 곧 출시됩니다. 이 강좌 수강생분들께는 할인쿠폰이 이메일로 전송될 것이니 조금만 기다려주세요. 이 강좌는 없어지지 않습니다. Page Router라서 신규 강좌와 차별점이 있으므로 없애지 않습니다!
