Nextjs Tutorial — File CoLocation

Nextjs v14 ile beraber dosya yerleşimi ( File CoLocation ) özelliği geliştirildi. Dosya yerleşimi ile ilgili dosyaları ( Javascript, Stil ve Test dosyaları ) aynı dizinde bir arada tutulmasını ifade etmektedir. Bu yaklaşım , projelerin organize edilmesini ve yönetilmesini kolaylaştırmaktadır.

Sayfa Dosyaları Yerleşimi

Nextjs’te her sayfa, “pages” klasörü altında oluşturulmaktadır. Örneğin, anasayfanızı oluşturmak için “pages/index.js” dosyasını kullanırız. Nextjs v14 ile beraber sayfayla ilgili CSS ve Test dosyalarını da aynı dizinde tutabiliriz.

/pages
  /home
    index.js      // Sayfa bileşeni
    index.module.css // Sayfa için CSS modülü
    index.test.js // Sayfa için test dosyası

API Yollarının Yerleşimi

API yollarıda benzer şekilde “pages/api” dizini altında organize edilebilir. Bir API yolunun test dosyalarını aynı dizinde tutabiliriz.

/pages
  /api
    /user
      index.js       // API rotası
      index.test.js  // API rotası için test dosyası

Stil Dosyaları Yerleşimi

Nextjs, CSS modüllerini yerel olarak desteklemektedir. Bir bileşen veya sayfa için stil dosyalarınızı , aynı isimle yalnız “.module.css” uzantısı ile oluşturabiliriz. İmport ederkende bileşeni doğrudan kullanabiliriz.

// pages/home/index.js
import styles from './index.module.css';

function HomePage() {
  return <div className={styles.container}>Merhaba Dünya!</div>;
}

export default HomePage;

Resimler ve Statik Dosyalar Yerleşimi

Statik ve Resimleri normal şartlarda “public” klasörü altında konumlandırırız. Ancak bileşenlere özel resimler veya statil dosyaları doğrudan bileşenlerin bulunduğu klasörde tutmakta mümkündür.

/components
  /Header
    index.js      // Bileşen
    logo.svg      // Bileşene özel resim

Bileşen içinden direkt olarak resim dosyasına erişebilirsiniz:

// components/Header/index.js
import logo from './logo.svg';

function Header() {
  return <header><img src={logo} alt="Logo"/></header>;
}

export default Header;

Nextjs v14 , file colocation yaklaşımı, projelerimizi daha temiz bir dosya yapısı ve kolay yönetmemizi sağlar. İlgili dosyaları bir arada tutarak proje üzerinde çalışmayı kolaylaştırabiliriz.

Buraya kadar okuduysanız teşekkür ederim. Elimden geldiğince sade ve anlaşılır bir şekilde anlatmaya çalıştım.Bu makaleyi yararlı bulduysanız beni sosyal medya üzerinden takip edebilirsiniz. Eğer bana bir kahve ısmarlamak isterseniz aşağıdaki linki kullanabilirsiniz.

BuymeCoffee || Linkedin