How to use styled-components with nextjs

What is Next.js?

Next.js is a strong react framework that simplifies building high-performance web applications by enabling server-side rendering and static site generation. Vercel created it with functions including automatic code splitting, enhanced speed, and a user-friendly API for data gathering and routing. Next.js can improve user experience overall, optimize SEO, and streamline your development workflow.

For further information, see our blog post on NextJs Best Practices.

What are styled components?

Styled components contains a CSS-in-JS package that supports component-based styling and scoped styles, enabling developers to write CSS directly within JavaScript components. Under the Next.js framework, Styled components simplify the styling of React apps by encapsulating styles within components, improving maintainability and reusability. This method, called CSS-in-JS Next.js style, is a good fit for applications looking to improve developer efficiency and speed. It provides benefits, including dynamic theme, scoped styling, and server-side rendering support.

Primary usage of styled components in Next.js

A popular CSS-in-JS package called styled components styles React components with Next.js. Install styled components first (npm install styled-components) before integrating. To define CSS styles, import styled from styled-components and use template literals to generate styled components. To achieve seamless Next.js styling, import these styled components into your React components using Next.js. This method encourages reusability and maintainability in your Next.js projects by containing styles using components. Additionally, ThemeProvider may handle global themes, guaranteeing a uniform application design.

The adoption of CSS-in-JS libraries has grown significantly over the past few years. According to the State of CSS 2020, styled-components is one of the leading CSS-in-JS libraries, with a satisfaction rate of 90% among developers who have used it. Additionally, 34.5% of respondents reported using styled-components, making it the second most popular CSS-in-JS solution after Emotion.

A key reason for the popularity of styled-components is its ability to streamline the development process. As Max Stoiber, co-creator of styled-components, explains:

“Styled-components allow you to write plain CSS in your JavaScript, removing the mapping between components and styles. This leads to a much more intuitive and streamlined development process.

“Furthermore, according to a survey by The Next Web, over 40% of developers reported increased productivity and ease of maintenance when using CSS-in-JS libraries like styled-components. This trend highlights the growing acceptance and positive impact of these tools in modern web development.

How to install and configure styled components with Next.js?

The following procedures can be used to install and set up styled components in a Next.js project:

Step 1: Add styled components in place

Install stylized components first. The command for the same is listed below: npm install styled-components.

npm install styled-components

Step 2: Install components in the babel plugin method

Babel-plugin-styled-components is needed by Next.js in order to maximize the utilization of styled components. Put it in place:

npm install --save-dev babel-plugin-styled-components

Step 3: Update your next.config.js

Edit the next.config.js file located in the root of your Next.js project:

Step 4: Utilization within your Components

You may now know how to integrate styled-components with Next.js. As an example:

// components/Button.js
import styled from 'styled-components';

const Button = styled.button`
  background-color: ${props => props.primary ? 'blue' : 'gray'};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
`;

export default Button;

Step 5: Use and import into your web pages

The styled component can be imported and used in the following ways in your Next.js pages:

// pages/index.js
import Button from '../components/Button';

const HomePage = () => (
  <div>
    <Button primary>Primary Button</Button>
    <Button>Secondary Button</Button>
  </div>
);

export default HomePage;

Step 6: Check the configuration

Try running your Next.js application (npm run dev) to make sure that server-side rendering (SSR) in Next.js is properly utilizing styled components.

These steps will get your Next.js project created and Next.js styled components setup, enabling you to effectively style your components using the power of CSS-in-JS.

Next.js styled components example project step by step guide

Styled components is a popular toolkit for styling React components with tagged template literals, and Next.js is a robust framework for creating React applications. We’ll see a Next.js styled components tutorial that walks you through using styled components to set up a Next.js project.
The detailed instructions for global styling in a NextJS project using a style component are below.

Step 1: Configure global styles

For your global styles, create the file styles/globalStyles.js:

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  }
`;

export default GlobalStyle;

Step 2: In _app.js, apply global styles

Pages are initialized by Next.js using a customized _app.js file. Change pages/_app.js so that the global styles are included:

import App from 'next/app';
import GlobalStyle from '../styles/globalStyles';
class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    return (
      <>
        <GlobalStyle />
        <Component {...pageProps} />
      </>
    );
  }
}
export default MyApp;

Step 3: Make a styled component

In components/Button.js, create a stylized component as follows:

import styled from 'styled-components';

const Button = styled.button`
  background: palevioletred;
  border-radius: 3px;
  border: none;
  color: white;
  padding: 0.5em 1em;
  font-size: 1em;
  cursor: pointer;

  &:hover {
    background: darkviolet;
  }
`;

export default Button;

Step 4: Make use of the styled component

Make use of a page’s styled component, such as pages/index.js:

import Button from '../components/Button';

export default function Home() {
  return (
    <div>
      <h1>Hello, Next.js with Styled-Components!</h1>
      <Button>Click me</Button>
    </div>
  );
}

Step 5: Manage your project

Lastly, launch the development server for Next.js:

npm run dev

What you will see is as follows:

On hover:

You’ve successfully added styled components to a Next.js project. With this configuration, you may use JavaScript to build component-level styles and take advantage of the full potential of both CSS and JS.

Advanced features of styled components

Advanced capabilities from styled components make it perfect for white-label web development services. With CSS-in-JS, encapsulated styling is possible, and guarantees scoped and modular styles. Its dynamic styling based on component props is supported by its props-based styling, which increases reusability. ThemeProvider makes it simple to use for uniform branding in all projects. Unified design systems are ensured by global style management, which is essential for preserving brand identity. Complex styling requirements are dynamically supported via CSS interpolation, which adjusts to design specifications. With the help of these tools, white-label service developers may effectively manage and alter styles, providing customized solutions while upholding scalability and consistency among brands.

Conclusion

In conclusion, we see in the blog that how to integrate styled components with Next.js provides an effective way to style React apps. Styled components ensure that styles are scoped to specific components and offer a smooth approach to composing CSS within JavaScript. Following the instructions, you may quickly set up and customize styled components in your Next.js project. These tools work together to improve development efficiency and maintain a clean codebase. Developers may design robust, scalable, and maintainable apps by utilizing advanced capabilities like dynamic styling and keyframes in conjunction with best practices like theming and global styles. Accept this integration to take advantage of all that modern web development offers.

About August Infotech

A leading offshore web development company, August Infotech specializes in web application content management systems. It is a software outsourcing company with a strong portfolio that specializes in providing customized content management systems solutions. Their specialty is developing effective and scalable web apps that enable companies worldwide.
August Infotech’s dedication to quality and innovation guarantees that customers receive excellent solutions personalized to their requirements. Whether creating unique content management systems or offering all-inclusive software services, August Infotech keeps raising the bar for dependability and quality in software outsourcing services.