StayedCSS: A CSS Library for Next.js App Router, Supporting Both Server and Client Components

Introduction to StayedCSS

Hello! I’m excited to introduce StayedCSS, a static CSS library built specifically for the Next.js App Router. It fully supports both server and client components while providing a simple and intuitive syntax.

Why I Created StayedCSS

With the introduction of the Next.js App Router, the distinction between server and client components became clearer, and I wanted to create a library specifically designed for the App Router version. StayedCSS generates static CSS, ensuring reliable styling.

Main Features

1. Automatic Static CSS Generation


StayedCSS automatically creates a stayedcss folder in the project’s root directory and generates CSS files for each component. Since styles are pre-generated at build time, it provides seamless rendering without flickering.

2. Supports Both Server and Client Components


It works perfectly with both server components and client components (with use client) in the Next.js App Router.

3. Familiar CSS Syntax


StayedCSS uses the same syntax as standard CSS, meaning you can define styles naturally without learning a new syntax. Classes are automatically generated, making adoption effortless.

4. Comprehensive Styling Features

• 
  Pseudo-classes and Pseudo-elements: Supports :hover, :focus, ::before, ::after, and more.
  


• 
  Media Queries: Easily implement responsive designs.
  


• 
  Dark Mode Support: Enables smooth dark mode transitions without flickering, enhancing the user experience.

5. Component-Based Style Management


StayedCSS manages styles using a componentId, ensuring that each component's CSS is neatly organized. This makes debugging and maintenance much simpler.

6. Lightweight and Efficient


I designed StayedCSS to be lightweight, removing unnecessary overhead and ensuring easy integration with your Next.js projects.

Usage Example

import { st } from "stayedcss";



const styles = st({

  componentId: "components/example",

  container: {

    backgroundColor: "black",

    padding: "20px",

  },

  title: {

    fontSize: "24px",

    color: "white",

  },

});



export default function Example() {

  return (

    <div className={styles.container}>

      <h1 className={styles.title}>Hello StayedCSS</h1>

    </div>

  );

}

For detailed usage instructions, check out the /