Next js Styling

Basic CSS styling in Next.js

Next.js supports traditional CSS styling methodologies. You can include CSS files directly into your components or pages, and Next.js takes care of bundling and optimization during the build process.

/* styles.css */
.container {
  max-width: 960px;
  margin: 0 auto;
}

.title {
  font size: 2rem;
  color: #333;
}

// pages/index.js
import React from 'react';
import styles from './styles.module.css';

const HomePage = () => (
  <div className={styles.container}>
    <h1 className={styles.heading}>Welcome to Next.js</h1>
    <p>This is a basic example of CSS styles in Next.js.</p>
  </div>
);

export default homepage;

CSS modules

CSS modules offer a modular approach to styling that allows you to encapsulate styles within individual components. Next.js provides built-in support for CSS modules, allowing scoped styling without the risk of class name collisions.

/* button.module.css */
.button {
  background-color: #007bff;
  color: #fff;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.button:hover {
  background-color: #0056b3;
}

// components/Button.js
import React from 'react';
import styles from './button.module.css';

const Button = ({ children }) => (
  <button className={styles.button}>{children}</button>
);

export default button;

CSS-in-JS with styled components

For those who prefer a more dynamic and expressive approach to styling, Next.js integrates seamlessly with popular CSS-in-JS libraries such as Styled Components. Styled components allow you to write CSS directly into your JavaScript files using tagged template literals.

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

const StyledButton = styled.button`
  background-color: #007bff;
  color: #fff;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    background-color: #0056b3;
  }
`;

const Button = ({ children }) => (
  <StyledButton>{children}</StyledButton>
);

export default button;

Global styles

Next.js also supports global styles, allowing you to define styles that apply to your entire application. You can include global styles by importing CSS files into the _app.js file, which acts as an entry point for your Next.js application.

// pages/_app.js
import '../styles/globals.css';

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

export default MyApp;

Conclusion

Styling in Next.js offers a plethora of options to suit different preferences and requirements. Whether you opt for traditional CSS, CSS modules, or CSS-in-JS solutions like Styled Components, Next.js provides a flexible and intuitive platform for efficient style management.