Next.JS Nedir ?

Nedir?

NextJS, bir React FrameWork'üdür. Sunucu taraflı web uygulamaları yazmak için kullanılır. Ücretsiz ve Open source olan NextJS'; Node.js ve Babel.js kullanır.

NextJS'in frontend kısmı tamamen JavaScript kodlarının içine yazılan HTML kodları ile sağlanır. Tabi bu işlemi SSR yani 'Server Side Rendering' ile gerçekleştirir, bu ayrıntı bizlere birçok avantaj kazandırır.

Bu avantajlardan kastım; NextJS uygulamaları daha hızlı ve performanslı bir şekilde çalışmaktadır. Bunun yanı sıra web siteniz SEO uyumlu ve frontend kısmı yazılan Component'ler sayesinde daha güzel görünmektedir.

Daha önceden 'React' ile uğraştıysanız bu terimler size fazla yabancı gelmeyecektir. Dediğim gibi NextJS bir React framework'üdür fakat react yapısını fazla andırmıyor. NextJs ile ReactDom ile uğraşmıyorsunuz, bunun yanı sıra Webpack ile de uğraşmıyorsunuz. Bu da sizin işinizi önemli bir şekilde hızlandırıyor.

NextJs'in bir özelliği daha var; Code Splitting. Google'da 'code splitting' diye arama yaptığınız zaman hemen en üst kısımlarda React'ın web sitesi çıkıyor. React'ın kendi web sitesinde bir açıklaması var:

"Uygulamanıza kod bölümlemesi yapmak, kullanıcının anlık olarak ihtiyaç duyduğu şeylerin “lazy yüklenmesine” yardımcı olarak uygulama performansını önemli ölçüde arttırabilir. Uygulamanızdaki toplam kod miktarını azaltmamış olsanız da kullanıcının hiçbir zaman ihtiyaç duymayacağı kodu yüklemekten kaçınmış ve ilk yükleme sırasında ihtiyaç duyulan kodu azaltmış olursunuz."

Code splitting kısaca sadece işe yarar kodları çalıştırıyor ve bu sayede web site performansını önemli ölçüde arttırıyor.

React uygulamalarında olduğu gibi en sevdiğim özelliğinden birisi de siz dosyanızı kaydettiğiniz andan itibaren tarayıcıda kendisini yeniliyor. Sürekli olarak tarayıcıda 'F5' yapmaktan kurtarıyor.

İçerisine HTML kodlarını yazıyoruz ve Nextjs bunu render ediyor demiştik ama yalın bir şekilde html kodlarını yazamıyoruz. Bu kodların 'JSX' formatında olması gerekir, tabi bu biraz style kısmını etkiliyor ama bazı html taglarını JSX formatında değiştirmemiz gerekiyor.

Mesela bir html tag'ine 'class' özelliği ve ismi vermek istiyorsak normalde '<div class='divClassName'></div>' şeklinde veriyoruz. Fakat JSX formatında bir div'e veya herhangi bir HTML tag'ine class vermek için '

<div className='divClassName'></div>'

şeklinde bir yol izlememiz gerekmekte. Gördüğünüz gibi 'class' yerine 'className' gibi bir anahtar sözcük kullandık .

Nasıl Kullanılır?

NextJS'i kullanabilmek için NodeJS'in kurulu olması gerekmektedir. Eğer NodeJS kurulu değil ise 'NodeJS Nedir' adlı yazımı ziyaret etmenizi tavsiye ederim. NodeJS kurulu ise NextJS'i kurma işlemine geçebiliriz. Bu işlemi iki şekilde yapabiliriz, otomatik olarak ve manual olarak.

Otomatik Kurulum

İlk olarak Npm'in sizin için otomatik olarak proje oluşturması için 'next-app' komutu!. Bu komutu terminal ekranına gelip aşağıda ki şekilde yazarsanız npm bir proje oluşturacaktır.

$ npm init next-app
$ yarn create next-app

Komutunu yazdıktan sonra size proje ismini soracaktır, proje ismini yazdıktan sonra işleminiz tamamdır.Bu komut sayesinde siz uğraşmadan npm kendisi sizin için bir NextJS App'i oluşturuyor. Bu komutu kullanmadan önce NodeJS'in 10.13+ üstü olması gerekmektedir.

Manual Kurulum

Bu sefer ise kendimiz bir NextJS projesi oluşturalım. İlk önce proje dizininize gelip aşağıda ki komutu yazmanız gerekmektedir.

$ mkdir pages
$ npm init -y
$ npm install react reactdom next --save

Bu komutu yazdıktan sonra göreceksiniz ki proje dizininizde pages adında bir dosya ve bir 'package.json' dosyası oluştu. Şimdi ise bu package.json dosyasını düzenlememiz gerekmekte. Bunun için package.json dosyasını bir text editöründe açalım ve "script":{} kısmını aşağıda ki gibi değiştirelim.

,"script":{
    "dev":"next",
    "build":"next build",
    "start":"next start"
}

package.json dosyamızın "script" kısmını değiştirdikten sonra yapmamız gereken tek şey 'pages' klasörünün içerisine 'index.js' adında bir JavaScript dosyası oluşturmamız gerekiyor. NextJS dosyaları render ederken pages klasörüne bakıyor ve buradaki dosyaları sunucuda çalıştırıyor. index.js dosyası projemizin ana dizini yani 'home' sayfasıdır. Oluşturduktan sonra text editörümüzde index.js dosyasını açalım ve içeriğini aşağıda ki gibi dolduralım ve kaydedelim.

export default function Index(){
    return(
    <div>
        <h3>$Hello World!</h3>
    </div>
    );
}

veya

const Index = {} => {
    return(
    <div>
        <h3>$Hello World!</h3>
    </div>
    );
};

Bu işlemi gerçekleştirdikten sonra tekrar proje dizinimize gelip serverimizi başlatmamız gerekmekte. Bunun için ise terminal ekranına:

$ npm run dev

yazdıktan sonra 'localhost:3000' adresinde projemizi görüntüleyebiliriz. localhost:3000 adresine geldikten sonra tarayıcımızda $Hello World' yazısını görebileceğiz. Projede yapacağınız tüm değişiklikleri bu pages sayfasının içinde ki JavaScript dosyaları ile sağlıyoruz.

Routers

NextJS'in en iyi özelliklerinden bir tanesi de 'pages' klasörünün içerisinde ki dosyaları direkt olarak rotalıyor. Mesela basitçe şöyle anlatayım. index.js dosyası bizim '/' dizinimiz oluyor. 'pages' klasörünün içerisine deneme.js adında bir dosya oluşturup içerisini doldurduktan sonra '/deneme' dizinine geldiğiniz zaman deneme.js dosyasını görüyorsunuz. Bu son derece iyi bir özellik ve tekrar tekrar dediğim gibi işimizi bayağı hızlandırıyor.

NextJS için kendi web sitesinde geniş bir dökümantasyonu var. Bu dökümantasyona bu adresten ulaşabilirsiniz.  

Kaynak

- NextJS Website
- Medium