I recently started using Next.js, and quite honestly I have to say, is an awesome tool, you get a lot out of the box, and while there are some things I don't necessary agree with, overall it makes really simple to create static and server‑rendered applications.
Next comes bundled with styled-jsx, which is a full, scoped and component-friendly CSS support for JSX (rendered on the server or the client), and while this is great, I rather use styled components, it's just my preference.
This guide features how you use a different styling solution than styled-jsx that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client.
Next.js has an example repo that already comes with styled components, but you need to clone it and then try to understand what is happening under the hood, I decided to make this quick and really simple guide that illustrates the process of making styled components work with next.js.
Lets get to it!
1. Create a project directory and install next and react dependencies
mkdir my-next-app && cd my-next-app && yarn add next react react-dom
Next.js only supports React 16.
We had to drop React 15 support due to the way React 16 works and how we use it.
2. Add scripts to your package.json
{
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
"dependencies": {
"next": "^...",
"react": "^...",
"react-dom": "^..."
}
}
After that, the file-system is the main API. Every .js
file becomes a route that gets automatically processed and rendered.
3. Create a /pages directory and your first page.
From your project root directory:
mkdir pages && touch pages/index.js
Populate ./pages/index.js
:
export default () => (
<div>
<h1>My First Next.js Page</h1>
</div>
)
and then just run yarn dev
and go to http://localhost:3000
.
So far, we get:
- Automatic transpilation and bundling (with webpack and babel)
- Hot code reloading
- Server rendering and indexing of
./pages
4. Add styled-components
yarn add styled-components
Let's now edit ./pages/index.js
:
import styled from 'styled-components';
export default () => (
<div>
<Title>My First Next.js Page</Title>
</div>
);
const Title = styled.h1`
color: red;
`;
If you reload the page, you will get an error, this is because we haven’t set up the correct configuration yet, not to worry, we are doing that next.
5. Add babel plugin and custom .bablerc
file
First, lets install the styled components babel plugin as a dev dependency:
yarn add -D babel-plugin-styled-components
Then create a .babelrc
file in the root of the project.
touch .babelrc
- Add a babel/preset
- Add a styled-components plugin, set the
ssr
flag totrue
,displayName
totrue
andpreprocess
to false.
The final .babelrc
file should look like this:
{
"presets": [
"next/babel"
],
"plugins": [
[
"styled-components",
{
"ssr": true,
"displayName": true,
"preprocess": false
}
]
]
}
Note: displayName
will generate class names that are easier to debug (will contain also the component name instead of just hashes); preprocess
– experimental feature turned off explicitly.
6. Create the custom _document.js
file
If you have used create-react-app
before, you are used to knowing where your main document is, well, next.js does not expose this file, but you can override the default Document by adding a _document.js
file in your pages folder.
touch pages/_document.js
We will be extending the <Document />
and injecting the server side rendered styles into the <head>
.
To override that default behavior, you must create a file at
./pages/_document.js
, where you can extend the Document class.
https://github.com/zeit/next.js/#custom-document
This is how a custom _document.js
would look like, if we just rendered the page and nothing else:
import Document, { Head, Main, NextScript } from 'next/document'
export default class MyDocument extends Document {
static getInitialProps ({ renderPage }) {
// Returns an object like: { html, head, errorHtml, chunks, styles }
return renderPage();
}
render () {
return (
<html>
<Head>
<title>My page</title>
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
)
}
}
This is how it looks like once we add SSR styled components.
import Document, { Head, Main, NextScript } from 'next/document';
// Import styled components ServerStyleSheet
import { ServerStyleSheet } from 'styled-components';
export default class MyDocument extends Document {
static getInitialProps({ renderPage }) {
// Step 1: Create an instance of ServerStyleSheet
const sheet = new ServerStyleSheet();
// Step 2: Retrieve styles from components in the page
const page = renderPage((App) => (props) =>
sheet.collectStyles(<App {...props} />),
);
// Step 3: Extract the styles as <style> tags
const styleTags = sheet.getStyleElement();
// Step 4: Pass styleTags as a prop
return { ...page, styleTags };
}
render() {
return (
<html>
<Head>
<title>My page</title>
{/* Step 5: Output the styles in the head */}
{this.props.styleTags}
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
);
}
}
Once this is done, restart your server and the error should go away, your <h1>
tag should be red, and SSR styled components should work.
Thats it, so to recapitulate:
- Create a project and install dependencies
- Add scripts
- Create a pages folder and a first page
- Add styled components
- Add a babel plugin and a custom
.babelrc
file - Create a custom
_document.js
file
As you can see, if you already have an existing next.js project, you only need to implement steps 4 to 6.
There is also a way to use plain .css
files with next.js, I will be writing a guide on how to set it up soon.
Resources
This post was originally posted on my website on 06/26/2018.
Oldest comments (38)
are we able to move
const sheet = new ServerStyleSheet();
out of the class? so we just create an instance of ServerStyleSheet instead of creating new one every time we render a page?Thanks mate, worked beautifully with the latest version of NextJS (v7)
Edit: actually, results in this annoying error:
Any ideas? GitHub issues and Google are not helping.
yes 2 years later
.babelrc
Thanks, this was really useful.
Let me add some SEO for people google for their Next + styled-component issues. Adding the babel configuration .babelrc in step 5 will fix the following errors/warnings:
not really working, here explanation:
it only works for the first load, if you hard reload + remove cach, then it crashes and keeps crashing
Solved my issues. Thanks for laying all of this out in such a complete and understandable way.
Thanks, really useful. Solved the issues I was running into
Your article was really useful to me.
With styled-components 3.3.3 i'm unable to use injectGlobal, any thoughts or example ?
Thanks :)
injectGlobal has been replace with a createGlobalStyle component. Read more about it here:
styled-components.com/docs/faqs#wh...
Thanks so much for this. :)
Hi! When adding
<title>
to the _document.js file I get an errorWarning: <title> should not be used in _document.js's <Head>. https://err.sh/next.js/no-document-title
That's absolutely right. You should put it in
next/head
instead.I am using latest NextJS (8.0.3) and Styled-Components (4.1.3) and seems like it doesn't need to extend the
<Document />
component anymore (step 6), because I don't see any error(?)edit: Nope, my fault. Step 6 will make the page's style rendered before being served in the browser, so there will be no flash of unstyled content
Great post! Works like a charm on Next 8 ... Thank you!
Is it possible to do strict (nonce) csp (content security policy) with next/styled components?
thanks for this mate really saved my bacon
Thanks!
Is there a specific reason for installing
babel-plugin-styled-components
as a dev dependency, since you are not using it anywhere? Or am I missing something here?This was a useful starting point, but I found that Next.js maintains an example that is more up to date. Check it out here...
Hey Jeff, you are probably right, Next.js has made so many great changes since I wrote this post, that I'm not surprised this is no longer up to date, I would definitely suggest to follow their documentation. Thanks for the heads up. By the way what are the main changes?
It seems to be applying the CSS client side. The page loads without any styling, then a second later styles are applied...
I suppose this solution does not work well in conjunction with styled-jsx?