How use next.js with styled components đź’…

Alberto Cruz Luis
3 min readApr 9, 2021

--

Install next.js and styled-components, configure the NextJS _document file,
add the styles to a page and analyse possible errors.

Original Post: https://www.albertocruzluis.com/blog/how-use-nextjs-styled-components

Table of Contents

  1. Install next.js
  2. Install styled-components
  3. Create the file _document.js
  4. Use styled-components in a page
  5. Possible Errors

Install next.js

The following command will create a nextjs project in a simple way.

npx create-next-app

After executing this command it will ask you to tell it the name of your project.
You can put app. Once this is done our app will be ready to run.

Also if you want to configure your nextjs app from scratch you can also do it by installing these 3 dependencies
and creating by yourselves your package.json

npm i react-dom react next

dependencies in package.json

{
“scripts”: {
“dev”: “next”,
“build”: “next build”,
“start”: “next start”
},
“dependencies”: {
“next”: “^…”,
“react”: “^…”,
“react-dom”: “^…”
}
}

Install styled-components

Install the package with npm. In this link you have the documentation of styled components https://styled-components.com/

npm i styled-components

Create the file _document.js

The _document file is a special file where we can put everything related to the html header and more things that is explained here. https://nextjs.org/docs/advanced-features/custom-document

import Document, {Html, Head, Main, NextScript} from 'next/document';
import {ServerStyleSheet} from 'styled-components';
class MyDocument extends Document {
static async getInitialProps(ctx) {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;
try {
ctx.renderPage = () =>
originalRenderPage({
enhaceApp: (App) => (props) =>
sheet.collectStyles(<App {…props} />),
});
const initialProps = await Document.getInitialProps(ctx);return {
…initialProps,
locale: ctx.locale,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
),
};
} finally {
sheet.seal();
}
}
render() {
return (
<Html>
<Head>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;

Use styled-components in a page

Next we will apply styles using styled-components to a page to test how it works.

import styled from 'styled-components';const Heading = styled.h1`
font-size: 2rem;
color: blue;
`;
const Home = () => {
return (
<Heading>
Using styled-components in Next.js
</Heading>
);
}
export default Home;

Possible Errors

After my experience using styled-components on my website ….
I have been able to resolve several errors that I would like you to know about.

  • Use this “styled-components” **version**: “4.4.1”.
    So far I have not been able to get the styles to work correctly in production using another
    correctly in production using another version.
  • You don’t need to use **babel-plugin-styled-components** to get the styles to work correctly.
  • Are the **styles** not loading correctly in the **first render** of your app after running it in production?
    This may be due to the version of styled-components you are using. So use the one I mentioned above.
  • Some styles work fine and some don’t?
    This failure may be due to incorrect use of styled components syntax.

Example — Using props in Styled-Components

import styled from 'styled-components';export const HeaderContainer = styled.div`
${(props) => props.activeSticky === false} {
position: sticky;
top: 0;
}

Refactor of code

import styled, {css} from 'styled-components';export const HeaderContainer = styled.div`
${(props) => (props.activeSticky === false) && css`
position: sticky;
top: 0;
}
`

Thank you for making it this far. 🙏

If you have any questions about this article please visit my page 👨‍💻 where you can contact me to solve any doubt you may have.

Original Post: https://www.albertocruzluis.com/blog/how-use-nextjs-styled-components

--

--

Alberto Cruz Luis
Alberto Cruz Luis

Written by Alberto Cruz Luis

0 Followers

I am Alberto Cruz Luis a Frontend Developer from Tenerife, Canary Islands. I build modern websites with react, nextjs, figma. https://www.albertocruzluis.com/

No responses yet