How use next.js with styled components 💅

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

next.js
styled-components
How use next.js with styled components 💅
Alberto Cruz Luis Profile
3 min read

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;
  }