Skip to Content
Nextjs2.5 Assets & Styling

Assets & Styling 🎨

Next.js treats styling as a buffet—choose the approach that fits each component while leaning on framework optimizations.

CSS Modules 🧩

  • Create Component.module.css alongside your component.
import styles from './Card.module.css';
 
export function Card() {
  return <div className={styles.card}>Hello</div>;
}
  • Class names are locally scoped, preventing collisions.

Global CSS 🌍

  • Import once in app/layout.tsx (App Router) or _app.tsx (Pages Router).
import './globals.css';
  • Use for resets, typography, or utilities.

Tailwind CSS 🌬️

  • Install via npx tailwindcss init -p.
  • Configure content paths to include app/**/*.{ts,tsx}.
  • Utility-first classes speed up prototyping; pair with clsx for conditional styling.

Sass / SCSS 🧶

  • Supported out of the box: import styles from './Card.module.scss';.
  • Enjoy nesting, variables, mixins.

Styled-components / Emotion 💅

  • Supported via SWC transforms. Update next.config.js:
const nextConfig = {
  compiler: { styledComponents: true },
};
module.exports = nextConfig;
  • Great for theme-based design systems.

Fonts (next/font) 🔤

import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'], variable: '--font-inter' });
 
export default function Layout({ children }) {
  return <html className={inter.variable}>{children}</html>;
}
  • Self-hosts fonts automatically, no layout shift.
  • Supports local fonts via next/font/local.

Images (next/image) 🖼️

import Image from 'next/image';
 
<Image src="/hero.png" alt="Hero" width={1200} height={600} priority />
  • Automatic responsive sizing, lazy loading, AVIF/WebP.
  • Configure remote domains in next.config.js.

Static Assets (/public) 📁

  • Place files in public/ and reference via /logo.svg.
  • Ideal for favicons, robots.txt, downloadable files.

Styling Tips ✅

  1. Mix and match: global CSS for tokens, modules for components, Tailwind for utilities.
  2. Co-locate styles with components to improve maintenance.
  3. Use CSS variables for theming (works across CSS Modules + Tailwind).
  4. Keep static assets optimized; rely on next/image for responsive variants.

Analogy: Next.js styling is a wardrobe with labeled drawers—pick the outfit (approach) that suits the occasion while keeping everything organized.

Invest a few minutes setting conventions early—it pays dividends as the app grows. 💅

Last updated on
2.4 Rendering Basics20.1 Security Hardening