CSS Modules

Examples

Temel CSS Örneği

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

Örneğin, components/ klasöründe yeniden kullanılabilir bir Button bileşeni düşünün:

İlk olarak, aşağıdaki içeriğe sahip components/Button.module.css adresini oluşturun:

Button.module.css

/*
You do not need to worry about .error {} colliding with any other `.css` or
`.module.css` files!
*/
.error {
  color: white;
  background-color: red;
}

Ardından, yukarıdaki CSS dosyasını içe aktararak ve kullanarak components/Button.js adresini oluşturun:

components/Button.js

import styles from './Button.module.css'
 
export function Button() {
  return (
    <button
      type="button"
      // Note how the "error" class is accessed as a property on the imported
      // `styles` object.
      className={styles.error}
    >
      Destroy
    </button>
  )
}

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

Uygulamanıza bir stil sayfası eklemek için CSS dosyasını pages/_app.js adresine aktarın.

Örneğin, styles.css adlı aşağıdaki stil sayfasını düşünün:

styles.css

body {
  font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
    'Arial', sans-serif;
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

Henüz mevcut değilse bir pages/_app.js dosyası oluşturun, importstyles.css dosyası.

pages/_app.js

import '../styles.css'
 
// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

Bu stiller (styles.css) uygulamanızdaki tüm sayfalar ve bileşenler için geçerli olacaktır. Stil sayfalarının global yapısı nedeniyle ve çakışmaları önlemek için, bunları yalnızca pages/_app.js içine aktarabilirsiniz.

Geliştirme sırasında stil sayfalarını bu şekilde ifade etmek, stillerinizin siz onları düzenlerken sıcak olarak yeniden yüklenmesini sağlar; yani uygulama durumunu koruyabilirsiniz.

Üretimde, tüm CSS dosyaları otomatik olarak tek bir küçültülmüş .css dosyasında birleştirilecektir. CSS'nin birleştirilme sırası, CSS'nin _app.js dosyasına içe aktarılma sırasıyla eşleşecektir. Kendi CSS'lerini içeren içe aktarılan JS modüllerine özellikle dikkat edin; JS modülünün CSS'si içe aktarılan CSS dosyalarıyla aynı sıralama kuralları izlenerek birleştirilecektir. Örneğin:

import '../styles.css'
// The CSS in ErrorBoundary depends on the global CSS in styles.css,
// so we import it after styles.css.
import ErrorBoundary from '../components/ErrorBoundary'
 
export default function MyApp({ Component, pageProps }) {
  return (
    <ErrorBoundary>
      <Component {...pageProps} />
    </ErrorBoundary>
  )
}

External Stylesheets

Next.js, CSS dosyalarını bir JavaScript dosyasından içe aktarmanıza olanak tanır. Bu mümkündür çünkü Next.js import JavaScript'in ötesinde.

Import styles from `node_modules`

Next.js 9.5.4'ten bu yana, node_modules adresinden bir CSS dosyasının içe aktarılmasına uygulamanızın herhangi bir yerinde izin verilmektedir.

bootstrap veya nprogress gibi global stil sayfaları için dosyayı pages/_app.js içine aktarmalısınız:

pages/_app.js

import 'bootstrap/dist/css/bootstrap.css'
 
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

Üçüncü taraf bir bileşenin gerektirdiği CSS'yi içe aktarmak için bunu bileşeninizde yapabilirsiniz. Örneğin:

components/example-dialog.js

import { useState } from 'react'
import { Dialog } from '@reach/dialog'
import VisuallyHidden from '@reach/visually-hidden'
import '@reach/dialog/styles.css'
 
function ExampleDialog(props) {
  const [showDialog, setShowDialog] = useState(false)
  const open = () => setShowDialog(true)
  const close = () => setShowDialog(false)
 
  return (
    <div>
      <button onClick={open}>Open Dialog</button>
      <Dialog isOpen={showDialog} onDismiss={close}>
        <button className="close-button" onClick={close}>
          <VisuallyHidden>Close</VisuallyHidden>
          <span aria-hidden>×</span>
        </button>
        <p>Hello there. I am a dialog</p>
      </Dialog>
    </div>
  )
}

Additional Features

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