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.

Example

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

app/dashboard/layout.tsx
import styles from './styles.module.css'
 
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return <section className={styles.dashboard}>{children}</section>
}
app/dashboard/styles.module.css
.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ında 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.

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üzeninin içinde (app/layout.js), stilleri uygulamanızdaki her rotaya uygulamak için global.css stil sayfasını içe aktarın:

app/layout.tsx
// These styles apply to every route in the application
import './global.css'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

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 aktarılabilir:

app/layout.tsx
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" /> adresini kullanamazsınız.

Additional Features

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