Next.js

Styling

by Tomas Trescak t.trescak@westernsydney.edu.au

Next.js

/

CSS Import Strategies

  • Organizing CSS is crucial for maintainability.
  • Import location dictates style scope.

Next.js

/

CSS Modules

    // Import in the component
import styles from './styles.module.css'; 

export default function BlogPost() {
  return <div className={styles.blogPost}>...</div>;
}
/src/app/blog/[id]/page.tsx
  • Component-Level Styles
  • *.module.css files alongside components
  • Imported directly into the component

Next.js

/

Global CSS

    // Import in the root CSS
import './globals.css'; 
// Import CSS from packages
import "react-ui-package/css/shared.css" 

export default function RootLayout({ children }) {
  return (
    <html>
      <body>{children}</body>
    </html>
  );
}
/ app/layout.tsx
  • Application-Wide Styles
  • globals.css for site-wide styles
  • Imported into the root layout ( app/layout.tsx ).

Next.js

/

Styling Alternatives

  • Tailwind CSS : Utility-first framework ( 👍🏽 ).
  • CSS-in-JS : Styling in JavaScript ( 👎🏽 ).
  • CSS Frameworks (e.g., Bootstrap, Material UI, 👍🏽)