CSS Modülleri (CSS Modules)

Next.js, .module.css uzantısını kullanan CSS Modülleri için yerleşik desteğe sahiptir.

CSS Modülleri, otomatik olarak benzersiz bir sınıf adı oluşturarak CSS'yi yerel olarak kapsar. Bu, çakışma endişesi olmadan farklı dosyalarda aynı sınıf adını kullanmanıza olanak tanır. Bu davranış CSS Modüllerini bileşen düzeyinde CSS eklemek için ideal bir yol haline getirir.

Örnek

CSS Modülleri, app dizini içindeki herhangi bir dosyaya aktarılabilir:

import styles from "./styles.module.css";

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode,
}) {
  return <section className={styles.dashboard}>{children}</section>;
}

.dashboard {
  padding: 24px;
}

CSS Modülleri isteğe bağlı bir özelliktir ve yalnızca .module.css uzantılı dosyalar için etkinleştirilir. Normal <link> stil sayfaları ve global CSS dosyaları hala desteklenmektedir.

Üretimde, tüm CSS Modülü dosyaları otomatik olarak birçok küçültülmüş ve kod bölünmüş .css dosyasına birleştirilecektir. Bu .css dosyaları uygulamanızdaki sıcak yürütme yollarını temsil eder ve uygulamanızın boyaması için minimum miktarda CSS yüklenmesini sağlar.

Küresel Stiller (Global Styles)

Global stiller, app dizini içindeki herhangi bir düzene, sayfaya veya bileşene aktarılabilir.

Bilmekte fayda var: Bu, yalnızca _app.js dosyasının içindeki global stilleri içe aktarabileceğiniz pages dizininden farklıdır.

Örneğin, app/global.css adında bir stil sayfası düşünün:

body {
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

Kök düzen (app/layout.js) içinde, stilleri uygulamanızdaki her rotaya uygulamak için global.css stil sayfasını içe aktarın:

// Bu stiller uygulamadaki her rota için geçerlidir
import "./global.css";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode,
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Harici Stil Sayfaları (External Stylesheets)

Harici paketler tarafından yayınlanan stil sayfaları, ortak konumlandırılmış bileşenler de dahil olmak üzere app dizininin herhangi bir yerine içe aktarılabilir:

import "bootstrap/dist/css/bootstrap.css";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode,
}) {
  return (
    <html lang="en">
      <body className="container">{children}</body>
    </html>
  );
}

Bilmekte fayda var: Harici stil sayfaları doğrudan bir npm paketinden içe aktarılmalı veya indirilmeli ve kod tabanınızla birlikte yerleştirilmelidir. <link rel="stylesheet" /> kullanamazsınız.

Ek Özellikler

Next.js, stil ekleme yazma deneyimini iyileştirmek için ek özellikler içerir:

Next Dev ile yerel olarak çalıştırılırken, yerel stil sayfaları (genel veya CSS modülleri), düzenlemeler kaydedildikçe değişiklikleri anında yansıtmak için Hızlı Yenileme özelliğinden yararlanacaktır.
Next build ile üretim için oluştururken, stilleri almak için gereken ağ isteklerinin sayısını azaltmak için CSS dosyaları daha az sayıda küçültülmüş .css dosyasında bir araya getirilecektir.
JavaScript'i devre dışı bırakırsanız stiller üretim derlemesinde (next start) yüklenmeye devam eder. Ancak, Hızlı Yenileme'yi etkinleştirmek için JavaScript'te next dev hala gereklidir.

PreviousŞekillendirme (Styling)NextTailwind CSS

Last updated 2 years ago

hashtagÖrnek

hashtagKüresel Stiller (Global Styles)

hashtagHarici Stil Sayfaları (External Stylesheets)

hashtagEk Özellikler

Örnek

Küresel Stiller (Global Styles)

Harici Stil Sayfaları (External Stylesheets)

Ek Özellikler