adding styled-components basic structure

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [["styled-components", { "ssr": true }]]
+}

package.json

@@ -10,6 +10,8 @@
   "dependencies": {
     "next": "10.2.3",
     "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react-dom": "17.0.2",
+    "styled-components": "^5.3.0",
+    "styled-normalize": "^8.0.7"
   }
 }

src/pages/_app.js

@@ -0,0 +1,11 @@
+import Theme from "../styles/theme"
+
+export default function App({ Component, pageProps }) {
+  return (
+    <>
+      <Theme>
+        <Component {...pageProps} />
+      </Theme>
+    </>
+  )
+}

src/pages/_document.js

@@ -0,0 +1,30 @@
+import Document from 'next/document'
+import { ServerStyleSheet } from 'styled-components'
+
+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(<App {...props} />),
+        })
+
+      const initialProps = await Document.getInitialProps(ctx)
+      return {
+        ...initialProps,
+        styles: (
+          <>
+            {initialProps.styles}
+            {sheet.getStyleElement()}
+          </>
+        ),
+      }
+    } finally {
+      sheet.seal()
+    }
+  }
+}

src/pages/index.js

@@ -0,0 +1,11 @@
+
+import styled from 'styled-components'
+
+const Title = styled.h1`
+  font-size: 50px;
+  color: ${({ theme }) => theme.colors.background1};
+`
+
+export default function Home() {
+  return <Title>My page</Title>
+}

src/styles/globals.js

@@ -0,0 +1,33 @@
+import { createGlobalStyle } from 'styled-components';
+import { normalize } from 'styled-normalize';
+
+
+const GlobalStyles = createGlobalStyle`
+  ${normalize};
+
+  * {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+  html {
+    font-size: 62.5%;
+  }
+  body {
+    font-family: ${props => props.theme.fonts.main};
+    font-size: 1.6rem;
+    height: 100%;
+    background: ${props => props.theme.colors.accent1};
+    color: ${props => props.theme.colors.primary1};
+    cursor: default;
+  }
+  h1,h2,h3,h4,h5,h6,button {
+    font-family: ${props => props.theme.fonts.title};
+  }
+  a {
+    text-decoration: none;
+  }
+
+`;
+
+export default GlobalStyles;

src/styles/theme.js

@@ -0,0 +1,17 @@
+import { ThemeProvider } from 'styled-components';
+import theme from "../themes/default";
+import GlobalStyles from './globals';
+
+
+
+const Theme = ({ children }) => {
+
+  return (
+    <ThemeProvider theme={theme}>
+      <GlobalStyles />
+      {children}
+    </ThemeProvider>
+  );
+};
+
+export default Theme;

src/themes/default.js

@@ -0,0 +1,22 @@
+export default {
+  // Temp fonts
+  fonts: {
+    title: "Space Grotesk, sans-serif",
+    main: "Space Grotesk, sans-serif"
+  },
+  // Colors for layout
+  colors: {
+    primary1: "hsl(204,23.8%,95.9%)",
+    background1: "#0F1624",
+    accent1: "hsl(34.9,98.6%,72.9%)",
+    button: "hsl(205.1,100%,36.1%)",
+    background2: "hsl(232.7,27.3%,23.7%)",
+  },
+  // Breakpoints for responsive design
+  breakpoints: {
+    sm: 'screen and (max-width: 550px)',
+    md: 'screen and (max-width: 800px)',
+    lg: 'screen and (max-width: 1023px)',
+    xl: 'screen and (max-width: 1199px)'
+  },
+}