What Is Meant by Styled JSX in Next.js?

Styled JSX is a CSS-in-JS solution built into Next.js that enables component-level styling. This approach is often featured in Next.js interview questions. It allows you to write CSS directly within your components, ensuring that styles are scoped to the component and do not interfere with other parts of the application.

function Button({ children }) {
  return (
    <button>
      {children}
      <style jsx>{`
        button {
          background-color: #0070f3;
          color: white;
          border: none;
          padding: 20px 30px;
          border-radius: 5px;
          font-size: 16px;
          cursor: pointer;
        }
        button:hover {
          background-color: #0051a2;
        }
      `}</style>
    </button>
  )
}

In this example, the CSS defined within the <style jsx> tag applies only to the button element within this component, ensuring that styles are modular and do not affect other parts of the application.