diff --git a/package.json b/package.json index 525e54a..d114d8e 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "devDependencies": { "@types/node": "^17.0.31", "@types/react": "^18.0.8", + "@types/styled-components": "^5.1.25", "eslint": "8.14.0", "eslint-config-next": "12.1.6", "eslint-config-prettier": "^8.5.0", diff --git a/pages/_app.js b/pages/_app.js deleted file mode 100644 index 1e1cec9..0000000 --- a/pages/_app.js +++ /dev/null @@ -1,7 +0,0 @@ -import '../styles/globals.css' - -function MyApp({ Component, pageProps }) { - return -} - -export default MyApp diff --git a/pages/_app.tsx b/pages/_app.tsx new file mode 100644 index 0000000..b81b5d2 --- /dev/null +++ b/pages/_app.tsx @@ -0,0 +1,14 @@ +import React from 'react' +import '../styles/globals.css' + +import { AppProps } from 'next/app' + +function MyApp({ Component, pageProps }: AppProps) { + return ( + <> + + + ) +} + +export default MyApp diff --git a/pages/_document.tsx b/pages/_document.tsx new file mode 100644 index 0000000..afe7522 --- /dev/null +++ b/pages/_document.tsx @@ -0,0 +1,48 @@ +import React from 'react' + +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() + }); + + const initialProps = await Document.getInitialProps(ctx); + return { + ...initialProps, + styles: ( + <> + {initialProps.styles} + {sheet.getStyleElement()} + + ) + }; + } finally { + sheet.seal(); + } + } + + render() { + return ( + + + + + + + +
+ + + + ); + } +} diff --git a/pages/index.js b/pages/index.js deleted file mode 100644 index dc4b640..0000000 --- a/pages/index.js +++ /dev/null @@ -1,69 +0,0 @@ -import Head from 'next/head' -import Image from 'next/image' -import styles from '../styles/Home.module.css' - -export default function Home() { - return ( - - ) -} diff --git a/pages/index.tsx b/pages/index.tsx new file mode 100644 index 0000000..7d2c3ab --- /dev/null +++ b/pages/index.tsx @@ -0,0 +1,13 @@ +import React from 'react' + +import Head from 'next/head' +import Image from 'next/image' +import styles from '../styles/Home.module.css' + +export default function Home() { + return ( +
+

Index.js

+
+ ) +} diff --git a/yarn.lock b/yarn.lock index 98c08fa..985453f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -399,6 +399,14 @@ resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.1.3.tgz#6801033be7ff87a6b7cadaf5b337c9f366a3c4b0" integrity sha512-WiBSI6JBIhC6LRIsB2Kwh8DsGTlbBU+mLRxJmAe3LjHTdkDpwIbEOZgoXBbZilk/vlfjK8i6nKRAvIRn1XaIMw== +"@types/hoist-non-react-statics@*": + version "3.3.1" + resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" + integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA== + dependencies: + "@types/react" "*" + hoist-non-react-statics "^3.3.0" + "@types/json-schema@^7.0.9": version "7.0.11" resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3" @@ -419,7 +427,7 @@ resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf" integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w== -"@types/react@^18.0.8": +"@types/react@*", "@types/react@^18.0.8": version "18.0.8" resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.8.tgz#a051eb380a9fbcaa404550543c58e1cf5ce4ab87" integrity sha512-+j2hk9BzCOrrOSJASi5XiOyBbERk9jG5O73Ya4M0env5Ixi6vUNli4qy994AINcEF+1IEHISYFfIT4zwr++LKw== @@ -433,6 +441,15 @@ resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39" integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew== +"@types/styled-components@^5.1.25": + version "5.1.25" + resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.25.tgz#0177c4ab5fa7c6ed0565d36f597393dae3f380ad" + integrity sha512-fgwl+0Pa8pdkwXRoVPP9JbqF0Ivo9llnmsm+7TCI330kbPIFd9qv1Lrhr37shf4tnxCOSu+/IgqM7uJXLWZZNQ== + dependencies: + "@types/hoist-non-react-statics" "*" + "@types/react" "*" + csstype "^3.0.2" + "@typescript-eslint/eslint-plugin@^5.22.0": version "5.22.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.22.0.tgz#7b52a0de2e664044f28b36419210aea4ab619e2a" @@ -1439,7 +1456,7 @@ has@^1.0.3: dependencies: function-bind "^1.1.1" -hoist-non-react-statics@^3.0.0: +hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==