Next.js 15 Fullstack Web Apps · Ders

CSS Modülleri ve Genel Stiller

Yerel kapsam için stillerinizi CSS Modülleriyle düzenleyin ve genel stilleri etkili biçimde yönetin.

CSS Modülleri ve Genel Stiller, CoddyKit'te ücretsiz bir Next.js 15 Fullstack Web Apps dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Next.js 15 Fullstack Web Apps öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Next.js 15 Fullstack Web Apps kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

Styling Your Next.js App

Welcome to styling in Next.js! Creating visually appealing and user-friendly interfaces is crucial for any web application.

Next.js offers powerful and flexible ways to manage your styles, from simple global stylesheets to component-specific solutions. In this lesson, we'll explore two fundamental methods: CSS Modules and Global Styles.

The Global CSS Problem

In traditional web development, all CSS styles are often global. This can lead to issues:

Naming Conflicts: Two different parts of your application might use the same class name, causing unintended style overrides.
Maintenance Headaches: Changing a style in one place might accidentally break the layout or appearance elsewhere.
Lack of Isolation: Styles aren't tied directly to the components they affect, making it harder to understand and manage them.

CSS Modules were created to solve these problems!

What are CSS Modules?

CSS Modules are a way to locally scope CSS by automatically creating unique class names. This means that styles defined in one CSS Module file will only apply to the component that imports it.

Key benefits:

No Conflicts: Unique class names prevent accidental overrides.
Component Isolation: Styles are encapsulated within their components.
Easier Maintenance: You can confidently change styles without worrying about side effects.

Creating a CSS Module File

To create a CSS Module in Next.js, you simply name your CSS file with the .module.css extension. For example, if you're styling a button, you might create Button.module.css.

Here's what a simple CSS Module might look like:

// app/ui/Button.module.css
.primaryButton {
  background-color: #0070f3;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
}

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

Using a CSS Module in React

Once you have a .module.css file, you can import it into any React component. Next.js then processes these styles, making them available as a JavaScript object.

The class names defined in your CSS Module become properties of this imported object. For instance, .primaryButton becomes styles.primaryButton.

Try running this example to see how a component imports and uses a CSS Module. The actual styling would be applied by Next.js during the build process.

// app/ui/PrimaryButton.js
import styles from './Button.module.css'; // Imports the CSS Module

export default function PrimaryButton({ text }) {
  return (
    // 'styles.primaryButton' uses the class from Button.module.css
    <button className={styles.primaryButton}>
      {text}
    </button>
  );
}

// How this component would be used in app/page.js:
// import PrimaryButton from './ui/PrimaryButton';
//
// export default function HomePage() {
//   return (
//     <div>
//       <h1>My App</h1>
//       <PrimaryButton text="Click Me" />
//     </div>
//   );
// }

Global Styles in Next.js

While CSS Modules are great for component-level styling, some styles need to apply universally across your entire application. These are called Global Styles.

You'd use global styles for:

CSS resets (e.g., to normalize browser defaults).
Base typography (e.g., default font family, line height for body).
Layout styles that affect the entire page structure.
Utility classes that are truly global (e.g., .hidden).

Implementing Global Styles

In Next.js 15 with the App Router, global styles are typically imported into your root app/layout.js file. This ensures they are available to all pages and components within your application.

First, create a global CSS file, usually named globals.css in your app directory:

// app/globals.css
html, body {
  padding: 0;
  margin: 0;
  font-family: system-ui, sans-serif;
  background-color: #f8f8fa;
  color: #333;
}

h1 {
  color: #1a1a1a;
  font-size: 2em;
  margin-bottom: 0.5em;
}

Then, import it into your app/layout.js to apply these styles application-wide:

// app/layout.js
import './globals.css'; // Import global styles

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children} {/* All pages will be rendered within this layout */}
      </body>
    </html>
  );
}

// A page (app/page.js) would then automatically inherit these styles:
// export default function HomePage() {
//   return (
//     <main>
//       <h1>Hello, Global Styles!</h1>
//       <p>This text uses the font and color defined in globals.css.</p>
//     </main>
//   );
// }

CSS Modules vs. Global: Best Practices

Knowing when to use each styling method is key to a well-organized Next.js application:

Use CSS Modules for: Component-specific styles. If a style belongs to a single component (e.g., a button, a card, a navigation item), it should likely be in a CSS Module.
Use Global Styles for: Application-wide defaults, resets, base typography, and main layout structures. Styles that truly affect every part of your app or establish a baseline.

Mixing both approaches allows for powerful and maintainable styling.

Combining Styles & Specificity

Sometimes you might need to apply multiple styles or conditional styles. You can combine CSS Module classes with regular global classes, or even inline styles:

import styles from './MyComponent.module.css';

function MyComponent({ isActive }) {
  const activeClass = isActive ? 'global-active-class' : '';
  return (
    <div className={`${styles.container} ${activeClass}`} >
      ... 
    </div>
  );
}

Remember that CSS specificity rules still apply. More specific selectors (e.g., IDs, inline styles) will override less specific ones (e.g., class names).

Quick Check on Styles

Which of the following statements about styling in Next.js are TRUE?

Recap: Styling for Success

You've mastered the fundamentals of styling in Next.js 15!

CSS Modules provide local scope, solving the global CSS problem with unique class names for component-specific styles.
Global Styles are used for application-wide defaults, resets, and base layouts, typically imported in app/layout.js.

By effectively combining these two powerful methods, you can build maintainable, scalable, and visually consistent Next.js applications. Keep practicing to make your UIs shine!

Sıkça Sorulan Sorular

“CSS Modülleri ve Genel Stiller” dersi ücretsiz mi?

Evet — “CSS Modülleri ve Genel Stiller” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Next.js 15 Fullstack Web Apps kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Next.js 15 Fullstack Web Apps kursu toplamda 4 dersten oluşur.

“CSS Modülleri ve Genel Stiller” dersinde ne öğreneceğim?

Yerel kapsam için stillerinizi CSS Modülleriyle düzenleyin ve genel stilleri etkili biçimde yönetin. Next.js 15 Fullstack Web Apps ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Next.js 15 Fullstack Web Apps öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Next.js 15 Fullstack Web Apps, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“CSS Modülleri ve Genel Stiller” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Next.js 15 Fullstack Web Apps dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Next.js 15 Fullstack Web Apps dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Next.js 15 Fullstack Web Apps Sayfasına Dön