diff --git a/sample/frontend/.babelrc b/sample/frontend/.babelrc
new file mode 100644
index 0000000000000000000000000000000000000000..fa5825489449997be332509d822540f5b07130ee
--- /dev/null
+++ b/sample/frontend/.babelrc
@@ -0,0 +1,15 @@
+{
+ "presets": [
+ "next/babel"
+ ],
+ "plugins": [
+ [
+ "styled-components",
+ {
+ "ssr": true,
+ "displayName": false,
+ "preprocess": false
+ }
+ ]
+ ]
+}
diff --git a/sample/frontend/package.json b/sample/frontend/package.json
index 400546449689df56d62d3a669a1b83839d02216b..a8cb6e8e522397dae435558d8cee02f914c606c5 100644
--- a/sample/frontend/package.json
+++ b/sample/frontend/package.json
@@ -13,9 +13,12 @@
"author": "",
"license": "ISC",
"dependencies": {
+ "@types/styled-components": "^5.1.4",
+ "babel-plugin-styled-components": "^1.11.1",
"next": "^10.0.0",
"react": "^17.0.1",
- "react-dom": "^17.0.1"
+ "react-dom": "^17.0.1",
+ "styled-components": "^5.2.1"
},
"devDependencies": {
"@types/node": "^14.14.5",
diff --git a/sample/frontend/src/pages/_document.tsx b/sample/frontend/src/pages/_document.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..84d9f5346f185d4b40a16160d98916e5090446f0
--- /dev/null
+++ b/sample/frontend/src/pages/_document.tsx
@@ -0,0 +1,35 @@
+import Document, { Html, Head, Main, NextScript } from "next/document";
+import { ServerStyleSheet } from "styled-components";
+
+type Props = {
+ styleTags: any;
+};
+
+export default class MyDocument extends Document<Props> {
+ static getInitialProps({ renderPage }) {
+ const sheet = new ServerStyleSheet();
+
+ const page = renderPage((App) => (props) =>
+ sheet.collectStyles(<App {...props} />)
+ );
+
+ const styleTags = sheet.getStyleElement();
+
+ return { ...page, styleTags };
+ }
+
+ render() {
+ return (
+ <Html lang="ja">
+ <Head>
+ <meta charSet="utf-8" />
+ {this.props.styleTags}
+ </Head>
+ <body>
+ <Main />
+ <NextScript />
+ </body>
+ </Html>
+ );
+ }
+}
diff --git a/sample/frontend/src/pages/index.tsx b/sample/frontend/src/pages/index.tsx
index 41b9fc61c3f0b0e9bbc86f905c331c7f6f88c84a..f4dbb2fea6327acbdde09ff128d6fa6a1b628550 100644
--- a/sample/frontend/src/pages/index.tsx
+++ b/sample/frontend/src/pages/index.tsx
@@ -1,6 +1,7 @@
import { NextPage } from "next";
import React from "react";
+import styled from "styled-components";
import api from "../lib/api";
import { InlineResponse200 } from "../types/typescript-axios";
@@ -18,9 +19,13 @@ const Page: NextPage = () => {
});
}, [last]);
+ const H1 = styled.h1`
+ color: red;
+ `;
+
return (
<div>
- <h1>アバップサンプル</h1>
+ <H1>アバップサンプル</H1>
<b>サーバステータス: {status.status}</b>
<br />
<b>サーバ時刻: {status.time}</b>