├── .babelrc
├── .gitignore
├── .prettierrc
├── README.md
├── pages
    ├── _document.js
    └── index.js
└── package.json


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["next/babel"],
3 |   "plugins": ["styled-components"]
4 | }
5 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | .env
 3 | .idea/*
 4 | .next/
 5 | 
 6 | # Logs
 7 | logs
 8 | *.log
 9 | npm-debug.log*
10 | yarn-debug.log*
11 | yarn-error.log*
12 | 
13 | .cache/
14 | dist
15 | node_modules/
16 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "printWidth": 80,
 3 |   "singleQuote": true,
 4 |   "trailingComma": "es5",
 5 |   "bracketSpacing": true,
 6 |   "jsxBracketSameLine": false,
 7 |   "parser": "babel",
 8 |   "semi": true
 9 | }
10 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # nextjs-style-components-starter
 2 | 
 3 | * Server side rendered Styled Components with NextJS
 4 | 
 5 | * Full tutorial published [medium.com](https://medium.com/@koalamango/server-side-rendering-styled-components-with-nextjs-1db1353e915e)
 6 | 
 7 | ### Getting started
 8 | 
 9 | ```bash
10 | git clone git@github.com:koalamango/nextjs-styled-components-starter.git
11 | 
12 | npm install
13 | npm run dev
14 | 
15 | # or
16 | 
17 | yarn
18 | yarn dev
19 | ```
20 | 


--------------------------------------------------------------------------------
/pages/_document.js:
--------------------------------------------------------------------------------
 1 | import Document from 'next/document';
 2 | import { ServerStyleSheet } from 'styled-components';
 3 | 
 4 | export default class MyDocument extends Document {
 5 |   static async getInitialProps(ctx) {
 6 |     const sheet = new ServerStyleSheet();
 7 |     const originalRenderPage = ctx.renderPage;
 8 | 
 9 |     try {
10 |       ctx.renderPage = () =>
11 |         originalRenderPage({
12 |           enhanceApp: (App) => (props) =>
13 |             sheet.collectStyles(<App {...props} />),
14 |         });
15 | 
16 |       const initialProps = await Document.getInitialProps(ctx);
17 |       return {
18 |         ...initialProps,
19 |         styles: (
20 |           <>
21 |             {initialProps.styles}
22 |             {sheet.getStyleElement()}
23 |           </>
24 |         ),
25 |       };
26 |     } finally {
27 |       sheet.seal();
28 |     }
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nextjs-styled-components-starter",
 3 |   "version": "1.0.0",
 4 |   "description": "Server side rendering Styled Components with Next.js",
 5 |   "scripts": {
 6 |     "dev": "next",
 7 |     "build": "next build",
 8 |     "start": "next start"
 9 |   },
10 |   "dependencies": {
11 |     "next": "latest",
12 |     "react": "^18.2.0",
13 |     "react-dom": "^18.2.0",
14 |     "styled-components": "^5.3.6"
15 |   },
16 |   "devDependencies": {
17 |     "babel-plugin-styled-components": "^2.0.7",
18 |     "prettier": "^2.8.2"
19 |   },
20 |   "overrides": {
21 |     "lodash": "4.17.21"
22 |   },
23 |   "resolutions": {
24 |     "lodash": "4.17.21"
25 |   },
26 |   "repository": {
27 |     "type": "git",
28 |     "url": "https://github.com/koalamango/nextjs-style-components-starter.git"
29 |   },
30 |   "homepage": "https://github.com/koalamango/nextjs-style-components-starter",
31 |   "author": "Jessie W.",
32 |   "license": "MIT"
33 | }
34 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
 1 | import Head from 'next/head';
 2 | import styled, { createGlobalStyle } from 'styled-components';
 3 | 
 4 | const GlobalStyle = createGlobalStyle`
 5 |   * {
 6 |   box-sizing: border-box;
 7 |   word-wrap: break-word;
 8 |   }
 9 |   body {
10 |     font-family: Arial, Helvetica, Verdana, sans-serif;
11 |     font-size: 16px;
12 |     font-weight: normal;
13 |     letter-spacing: .03rem;
14 |     margin: 0 auto;
15 |   }
16 |   h1 {
17 |     font-size: 4rem;
18 |   }
19 |   a {
20 |     color: #bf9e5f;
21 |     text-decoration: none;
22 |     cursor: pointer;
23 |   }
24 |   a:hover {
25 |     text-decoration: underline;
26 |   }
27 |   img {
28 |     border: 0px;
29 |     width: 100%;
30 |   }
31 | `;
32 | 
33 | const Container = styled.div`
34 |   max-width: 1200px;
35 |   margin: 0 auto;
36 |   overflow: hidden;
37 |   text-align: center;
38 | `;
39 | 
40 | export default function Home() {
41 |   return (
42 |     <>
43 |       <Head>
44 |         <title>SSR styled-components with Next.js Starter</title>
45 |       </Head>
46 |       <Container>
47 |         <GlobalStyle />
48 |         <h1>Hello, world!</h1>
49 |       </Container>
50 |     </>
51 |   );
52 | }
53 | 


--------------------------------------------------------------------------------