Using Styled Components with Next.js | Updated 2024

65

Styled-components is a popular library for styling React applications using tagged template literals. It allows you to write CSS directly in your JavaScript files, which makes it easier to manage styles in a component-based architecture like Next.js. This guide will walk you through setting up and using styled-components in a Next.js project.

Steps for Using Styled Components with Next.js

Step 1: Setting Up a New Next.js Project

Initialize a New Project

npx create-next-app@latest nextjs-styled-components
cd nextjs-styled-components

Start the Development Server

npm run dev

Step 2: Installing Styled Components

Install Styled Components

npm install styled-components

Install Babel Plugin for Styled Components

To ensure server-side rendering and proper styling with styled-components, you need to install the Babel plugin.

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

Configure Babel

Create or edit the .babelrc file in the root of your project:

{
  "presets": ["next/babel"],
  "plugins": ["styled-components"]
}

Step 3: Creating Styled Components

Create a components Directory

Create a components directory to store your styled components.

Create a Styled Button Component

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

const StyledButton = styled.button`
  background-color: #0070f3;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 10px 2px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s;

  &:hover {
    background-color: #005bb5;
  }
`;

export default StyledButton;

Step 4: Using Styled Components in a Page

Create a Home Page

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

export default function Home() {
  return (
    <div>
      <h1>Welcome to Next.js with Styled Components</h1>
      <StyledButton>Click Me</StyledButton>
    </div>
  );
}

Add Global Styles

You can add global styles using the createGlobalStyle helper from styled-components.

// pages/_app.js
import { createGlobalStyle } from 'styled-components';
import App from 'next/app';

const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
  }
`;

function MyApp({ Component, pageProps }) {
  return (
    <>
      <GlobalStyle />
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

Step 5: Running the Application

Start the Next.js Development Server

npm run dev

View the Application

Open your browser and navigate to http://localhost:3000 to see the styled button and the global styles in action.

Conclusion

In this article, we covered how to integrate styled-components into a Next.js project. We set up a new Next.js project, installed styled-components, configured Babel, created styled components, and applied global styles. This approach allows you to manage styles in a modular and maintainable way, leveraging the full power of JavaScript and CSS.

For more updates on programming trends and tutorials, visit blogsea.net regularly.

Using Styled Components with Next.js – FAQs