NextJS Tutorial — Project Structure
NextJS, React tabanlı projelerde önemli rol oynamaktadır. Server-side rendering (SSR),Static site Generation ( SSG ) ve Incremental Static Regeneration ( ISR ) gibi özellikleri , performans ve SEO performansıyla uygulama geliştirmenize olanak tanır. Bu yazımızda NextJS’in sağladığı folder yapısnından yapısından bahsedeceğim ve projelerimizi daha anlaşılır hale getirilmesini anlayacağız.
Nextjs Proje Yapısının Temel Bileşenleri
Nextjs,belirli bir proje yapısına zorunluluğu yoktur , ancak bazı klasörler ve dosyaları kullanarak geliştirme sürecini kolaylaştırmaktadır. Bunlar aşağıdaki gibidir.
pages: Her dosya bir sayfaya gizmet etmektedir. Örneğin “pages/about.js” otomatik olarak “/about” olarak URL’e dönüşür.
public: Static dosyalarımızı burada saklayabiliriz ( resimler , faviconlar vb)
styles: Global stil dosyalarımızı burada tutabiliriz. Nextjs, Css ve Sass’ı desteklemektedir.
Örnek Bir Nextjs Proje Yapısı
Örnek bir Nextjs projesi, genellikle aşağıdaki gibi organize edilebilir;
project/
├── pages/
│ ├── index.js
│ └── about.js
├── public/
│ ├── favicon.ico
│ └── vercel.svg
├── styles/
│ ├── Home.module.css
│ └── globals.css
└── package.jsonBu yapı, projenin temel bileşenlerini net bir şekilde tanımlar ve yönetimini kolaylaştırır.
Routing ve Linking
Nextjs ,dosya tabanlı bir routing yapısına sahiptir. pages klaösür içinde her dosya, bir URL yoluyla ilişkilidir.Dinamik yollar ve catch-all yollar gibi özellikler , uygulamanın farklı URL yapılarını kolayca yönetmesini sağlar. “Link” bileşeni ile farklı sayfalar arasında geçişleri sağlanabilir.
Veri Yönetimi ve API Entegrasyonu
Nextjs, veri alışverişi yapmak için birçok yöntem bulunmaktadır.
getStaticProps: Derleme zamanında veri çekmek için kullanılır.
getServerSideProps: Her istek yapıldığında sunucu tarafında veri çekmek için kullanılır.
Apı Routing: Kendi API endpointlerinizi pages/api altında oluşturabilirsiniz.
Stil Yönetimi
Nextjs, CSS ve SASS yerel olarak desteklemektedir. CSS modlüllerini,stil çakışmalarını önlemek için kullanışlıdır. Stil dosyalarınızı styles klasöründe tutarak, projelerimizi stillendirebiliriz.
Testing and Deployment
Nextjs uygulamalarını, Jest gibi populer test uygulamalarıyla test edebiliriz.Versel gibi platformlar, Nextjs projelernizi kolayca deploy edip kullanıma sunabiliriz.
Bu yapı ve prensipler ile Nextjs projelerimizi temiz , düzenli ve yönetilebilir olmasını sağlayabiliriz. Daha iyi bir deneyimi , son kullanıcı performansı için en iyi uygulamaları benimsemeyi unutmayın.
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.
