I have been fiddling around with Next.js library for the past couple of months and it has been really fun so far.
Styled-Components is another great library I've started using in my production applications which has improved my development cycle.
Let's talk business now, Next.js is server-rendered library we will need to utilize Styled-Components server side rendering functions to get them working together.
Add styled-components package in your Next.js project:
yarn add styled-components
Now in the pages folder create a new file called _document.js and paste the following code snippet in it.
import Document, { Head, Main, NextScript } from 'next/document'
import { ServerStyleSheet } from 'styled-components'
export default class MyCustomDocument extends Document {
static getInitialProps ({ renderPage }) {
const sheet = new ServerStyleSheet()
const page = renderPage(App => props => sheet.collectStyles(<App {...props} />))
const styleTags = sheet.getStyleElement()
return { ...page, styleTags } // return styles collected
}
render () {
return (
<html>
<Head>
<title>My Page Title</title>
{this.props.styleTags}
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
)
}
}
Above code collects all the styles defined using styled-components in the application and return them to be populated as props before the page is rendered. Now inside render function the {this.props.styleTags} injects those collected styles in the head part of the page. Makes sense?
Moreover, If there is a need to apply global styles then import another function called injectGlobal and provide your styles before defining your custom document component.
import { ServerStyleSheet, injectGlobal } from "styled-components";
injectGlobal`
html {
font-size: 10px;
}
body {
font-family: "Merriweather", serif;
font-size: 1.6em;
line-height: 1.6;
}
`;
export default class MyCustomDocument extends Document {
//....
That's it! I'm finding Next.js + Styled Component combination very productive and flexible. You can let me know your thoughts on this combo on twitter.
P.S: originally posted on personal blog: https://bilalbudhani.com/using-next-js-with-styled-components/
Top comments (0)