CSS-in-JS considerations in NextJS

Introduction

CSS-in-JS lets you write CSS styles directly inside your JavaScript code. This helps keep styles close to the components they belong to, making your code easier to manage.

When you want to style React components in Next.js without separate CSS files.

When you need dynamic styles that change based on component state or props.

When you want to avoid global CSS conflicts by scoping styles to components.

When you want to use JavaScript variables or logic inside your styles.

When you want to improve developer experience by co-locating styles and components.

Syntax

NextJS

import styled from 'styled-components';

const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 1rem;
  border-radius: 0.5rem;
`;

export default function MyComponent() {
  return <Button>Click me</Button>;
}

Use backticks `` to write CSS inside JavaScript template literals.

Styled components create real React components with styles attached.

Examples

Simple styled component for a red heading.

NextJS

const Title = styled.h1`
  font-size: 2rem;
  color: red;
`;

Styled div using Flexbox to center content.

NextJS

const Container = styled.div`
  display: flex;
  justify-content: center;
  padding: 2rem;
`;

Dynamic styles using props to change background color.

NextJS

const Button = styled.button`
  background-color: ${props => props.primary ? 'blue' : 'gray'};
  color: white;
  padding: 1rem;
`;

Sample Program

This Next.js component shows two buttons styled with CSS-in-JS. The first button uses a prop to get a blue background. The second button uses the default gray background.

NextJS

import styled from 'styled-components';

const Button = styled.button`
  background-color: ${props => props.primary ? 'blue' : 'gray'};
  color: white;
  padding: 1rem 2rem;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 1rem;
`;

export default function App() {
  return (
    <>
      <Button primary>Primary Button</Button>
      <Button>Default Button</Button>
    </>
  );
}

Important Notes

CSS-in-JS can increase your JavaScript bundle size, so use it wisely.

Server-side rendering in Next.js works well with styled-components but requires setup.

Always test styles on different screen sizes for responsiveness.

Summary

CSS-in-JS keeps styles close to components for easier management.

It allows dynamic styling using JavaScript logic and props.

Next.js supports CSS-in-JS well, but remember to handle server-side rendering properly.