Nextjs kurulumu ve Nextjs ile React projesi nasıl yapılır?

React freamworklerinden olan ve bizlere hazır conroller/root ve klasör yapısı veren, kullanım kolaylığı sağlayan en önemlisi de kod bölümünün tarayıcıda görünmesini ve index almasını sağlayarak arama motorları optimizasyonu ve daha bir çok özelliği ile Nextjs kurulumu ve adım adım nasıl öğrenilir, projelerimizde nasıl kullanırız? konusunu işleyeceğiz. Hazırsanız başlayalım.

• İçindekiler
• Nexjs Nedir, Özellikleri Nelerdir?
  • Server Side Rendering Nedir?
  • Otomatik Code Splitting nedir?
  • Simple page based routing nedir?
  • Hot Module Reolading Nedir?
  • Build-in css support (styled-jsx) Nedir
• Nodejs nasıl kurulur?
• Nextjs nasıl kurulur ve Çalıştırılır?
• Nextjs klasör & root yapısı nelerden oluşuyor?
• Nextjs link kullanımı nasıldır?
• Nextjs ile Img,Css gibi statik ve global dosyalari projemize nasıl ekleriz?
• Nextjs ile Head bölümü nasıl düzenlebilir?
• Nextjs css kullanma yöntemleri nelerdir?
• Nextjs Template sistemi nasıl yapılır?
• Nextjs ile json okuma, veri çekme ve listeleme nasıl yapılır?
• Nextjs props ile alt komponentlere veri gönderme nasıl yapılır?
• Nextjs ile Dinamik root Url nasıl yapılır?
• Nextjs Url Parcalama ve Okuma Nasıl Yapılır?
• Nextjs Routing As Nedir, Seo uyumlu Url Nextjs ile Nasıl Yapılır?
• Service Workers Nedir?
• Nextjs projesini github'a nasıl yüklenir?
• Nextjs ubuntu Deploy, Sunucuya github ile nextjs nasıl yüklenir?
• Nextjs ubuntu sunucu üzerinde build işlemi

Nexjs Nedir, Özellikleri Nelerdir?

Nextjs; react uygulamaları için hazırlanmış server side rendering yapısı olan bir freamworktür. React çatısı altında çalışan komponent ve genel yapısını zaten react freamworkünden alan dosya klasör yapısı ile hızlandırılmış ve kullanım kolaylığı sayesinde saniyeler içinde kurulumu mevcuttur.

Nextjs Avantajları ve Özellikleri

• Server Side Rendering
• Otomatik Code Splitting
• Simple page based routing
• Hot module reolading
• Build-in css support (styled-jsx)

Server Side Rendering Nedir?

Kurulma ve nexjs kullanımına başlamadan önce Server side rendering ve client rendering konularına değinerek aralarındaki farkı anlamaya çalışalım.

Single page uygulamalarının kabusu arama motoru optimizazyonu yani tarayıcıda kaynak html kodların görünmemesi ve robotların okuyamaması işte tam bu noktada nextjs devreye çözüm olarak giriyor.

Server sider rendering kaynak kodunda sitenize ait tüm detayları ile birlikte html olarak parse eder ve robotlar okur. Client rendering ise sayfa kaynağında html parse etmez robotlar bunu algılayamadığı için indexlemez.

Otomatik Code Splitting nedir?

Sadece çalışan sayfa yüklenir. Blog sayfasındayken iletisim sayfası yüklenmiyor.

Simple page based routing nedir?

Bazı klasörler özel pages ve components nextjs kendi klasör yapısında bulunuyor. Pages ile root kontrolünü yapıyoruz siteadi.com/iletisim url pages/ilesitisim.js ile sağlayabiliyoruz.

Hot Module Reolading Nedir?

En güzel özelliklerinden birisi düzenleme yaptığınızda kodlarda tüm sayfayı refresh etmiyor yani yeniden yüklenmiyor. Sadece kod değişikliği yaptığınız component yenileniyor ve buda hız konusunda harika sonuçlar elde etmemizi sağlıyor.

Build-in css support (styled-jsx) Nedir?

Yine nextjs ile birlikte kolay kullanımı sağlayan bir özellik nextjs ile css kullanımı aynı html kodlar gibi ister sayfa içinde isterse global olarak düz css yazmamıza olanak sağlıyor. Toplamda 4 farklı yöntemle nextjs içinde css kullanmamıza izin veriyor. Her yöntemi ve nextjs ile css kullanımını aşarıda uygulamalı olarak anlattım inceleyiniz.

Nodejs nasıl kurulur?

Ubuntu Sunucuya veya mac,linux işletim sistemlerine Terminalden Nodejs Kurulumunu yapalım

  //Nodejs curl ile indirelim
  curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash -

  //Kurulumu tamamlama komutu
  sudo apt-get install -y nodejs

  //Nodejs Versiyon soralım:
  node -v

  //Npm Versiyonunu Soralım
  npm -v

  //Versiyon numaralarını alabiliyorsak nodejs ve npm yüklenmiştir.

  //Not: killall node // komutu bütün node procesleri oldürür.

Nextjs nasıl kurulur ve Çalıştırılır?

Terminal üzerinden mac ve linux kullanıcıları ilk olarak hangi klasöre kurmak isteniyorsa o klasöre ulaşıp daha sonrasında "npx create-next-app projeadi" belirleyerek kurulum yapabilirler. Örnek komutları aşarida paylaşıyorum.

    //Nextjs projesi oluşturma
    npx create-next-app projeadi --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"

    //proje klasorünün içine girme
    cd projeadi

    //Nextjs çalıştırma komutu
    npm run dev

    //Eğer çalışmaz ise ve şöyle bir hata aldiysaniz: Unhandled rejection Error: EACCES: permission denied
    npm install (yada) sudo npm install (komutlarını kullanın)
    npm run dev (komutuyla tekrar çalıştırın eğer http://localhost:3000 portuna urlden tıkladığınızda çalışıyor ise sorun yok demektir.)
  

Nextjs klasör & root yapısı nelerden oluşuyor?

Nextjs projemizin klasör yapısı next,node_modules,pages,public olarak 4 adet ve kök dizinde package.json,package-lock.json dosyalarımız bulunuyor.

pages klasörü rooter url bazlı linkleme olarak ayarlanmış ve kullanımı gayet basittir. Örnek urlde: localhost:3000/iletisim yazdığımızda pages klasörü içine iletisim.js açmamız yeterli ilk çalışan dosya ise default olarak index.js dir.

Örnek olarak: pages klasorü içine about.js oluşturalım ve urlden http://localhost:3000/about tıkladığımızda about.js çalışmasını sağlayalım.

    //about.js dosyamızın kodları
    export  default function About(){
      return (
        <div>
        <h3>About</h3>
        </div>
      )
    }

    //http://localhost:3000/about tıklandığında yukarıdaki kod yani pages klasoru altındaki about.js çalışıyor.
    //Eğer pages klasörü içine blog klasörü oluşturup içine about.js koyarak çalıştırdığımızda ise bu sefer url adresimizi şöyle belirtmemiz gerekiyordu.
    //urlden: http://localhost:3000/blog/about
  

Nextjs link kullanımı nasıldır?

Nextjs link yapısı ve kullanımı ile sayfalar arasında gezinme işlemi html gibi ve kendi yapısı ile 2 adet kullanımı mevcut. Arasında ki fark ise kendi yapısında kullanımı hızlı olması tercih edilen yani siteniz dışındakileri a html tagı ama proje içindeki linklemeyi nextjs kendi yapısı ile kullanılmasını tavsiye ediyor.

Nextjs ve Normal html link yapılarını inceleyerek aradaki farkı görelim

    //ilk olarak nextjs link modülünü dahil edelim ve nextjs kendi link yapısı ile deneyelim
    import Link from 'next/link'

    //Kullanımı
    <Link href="/about">
      Hakkımızda
    </Link>

    //Html tagı ile linkleme
    <a href="/about">Hakkımızda</a>
  

Nextjs ile Img,Css gibi statik ve global dosyalari projemize nasıl ekleriz?

Projemizin kök dizininde bulunan puplic klasörü içine img(Resim) dosyalarımızı barındırmak için kullanıma sunulmuştur. Kullanımını ise:

    //ilk olarak img nextjs modülünü kullanmak istediğimiz sayfaya js dosyasına ekliyoruz.
    //Mesela pages klasorü içinde about.js dosyamıza kodumuz:
    import Image from 'next/image';

    //Sonra ise img(Resim Dosyamızı dahil edip gosterelim)
    <Image
      src="/profile.jpg" // Route of the image file
      height={144} // Desired size with correct aspect ratio
      width={144} // Desired size with correct aspect ratio
      alt="Your Name"
    />

    //Normal kullanımı
    <img src="/vercel.svg" alt="Vercel" />
  

Nextjs ile Head bölümü nasıl düzenlebilir?

Nextjs ile html bölumünün body ile iki bölümden biri olan, Head bölümünün Düzenlenebilmesi.

    //Head modülünü sayfamıza dahil edelim mesela about.js'ye
    import Head from 'next/head';

    //Sonra ise sayfa başlığımızı değiştirelim
    <Head>
      <title>About(Hakkımızda)</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" />
    </Head>
  

Nextjs css kullanma yöntemleri nelerdir?

Nextjs sağlamış olduğu kolay kullanımlardan biriside css yapısı aynı normal html gibi tag içinde, sayfa içinde style jsx ile dışardan çağrılarak ve global olarak bizlere 4 farklı yöntem sunuyor.

    //ilk Yöntem sayfa içinde kullanımı
    <style jsx>{` h3{color:orange;} `}</style>

    //sayfaya css dosyasını dışardan çağırma yöntemi olan layout page kullanımı:
    //ilk olarak kök dizinde comps adında klasör oluşturup içine stiller.js adında dosya oluşturalım.

    import Stil from '../comps/stiller';

    //dışardan css dosyası olarak
    //comps klasörü içine stiller.module.css dosyası oluşturalım ve içine
    .conter{ background: black;}

    //Ve kullanacağım sayfada çağırıp className={styles.conter}
    import styles from './stiller.module.css';

    //Global Css Kullanımı
    //comps klasorü içine global.css oluşturalım ve
    //Kök dizinde bulunan pages klasörü içine _app.js oluşturalım ve şu kodları yazalım.
    import '../comps/global.css'

    export default function App({ Component, pageProps }) {
      return <Component {...pageProps} />
    }

    //Global css çalışabilmesi için npm tekrar başlatmamız gerekiyor.
    npm run dev
  

Nextjs Template sistemi nasıl yapılır?

Kök dizin içine eklentiler adında klasör içinede header.js oluşturalım. Yani pages klasörü içinde _app.js dosyamız Template gibi kullanıcaz. kodlarımız.

    //eklentiler klasöründeki header.js kodlarımız:
    import Link from 'next/link';

    export default function Header(){
      return (
        <header>
          <nav>
            <ul>
              <li><Link href="/">Anasayfa</Link></li>
              <li><Link href="/about">Hakkında</Link></li>
              <li><Link href="/blog">blog</Link></li>
              <li><Link href="/blog/post">Post</Link></li>
            </ul>
          </nav>
        </header>
      )
    }

    //Pages klasörü içindeki _app.js kodlarımız
    import '../comps/global.css';
    import Header from '../eklentiler/header';

    export default function App({ Component, pageProps }) {
      return <>

      <Header/>
      <Component {...pageProps} />
      <div>footer</div>
      </>
    }
  

Nextjs ile json okuma, veri çekme ve listeleme nasıl yapılır?

Nextjs ile db,json vb gibi yerlere bağlanıp istedidiğimiz değerleri okuyarak, okuduğumuz verileri bir yerlerde göstermeyi yapalım.

Nextjs aynı react'taki gibi fetch() fonksiyonu json url adresini tanımlayarak bağlanabilir ve okuyabiliriz. Okuduğumuz veriyi bir değişkene tanımlayarak return edebilir props mantığı ile dilediğim fonksiyona veya komponentlere dağıtabiliriz.

      //Veri çekme foksiyonlarını getStaticProps()  getServerSideProps() içinde yapıyoruz.
      export async function getServerSideProps(){
        const request = await fetch(`https://api.themoviedb.org/3/movie/popular?api_key=3044afc915e1301ae1d9551614db3711&language=en-US&page=1`);
      	const movies = await request.json();
      	return {
      		props: {
      			movies,
      		},
      	}
      }

      //Listeleme yaparken kodlarımız:
      {
        movies.results.map(movie => (
        <div>
          <h4>{ movie.title }</h4>
        </div>
        ))
      }
  

Nextjs props ile alt komponentlere veri gönderme nasıl yapılır?

Komponent kullanımında en önemli konu başlıklarından birisi komponentlere veriler göndererek props mantığını uygulayalım.

    //ilk olarak komponenti hazırlayalım propsaltkomp.js adında bir dosyamız olsun ve içine kodlarımız
    export default function Propsaltkomp({altveri}){
      return (
        <h4>{altveri}</h4>
      )
    }


    //komponenti ilk olarak çağıralım
    import Propsaltkomp from '../eklentiler/propsaltkomp'

    //ve sayfada kullanalım veri adında bir değişken oluşturup
    const veri = "Alt Componentlere veri gönder";
    //alt komponent olan Propsaltkomp'a altveri olarak veri değerimizi gönderelim
    <Propsaltkomp altveri={veri}/>
  

Nextjs ile Dinamik root Url nasıl yapılır?

Pages Klasörümüzün içine [url].js adında javascript(nextjs) dosyamızı oluşturalım. Hatırladığınız üzere pages klasörümüz root yapımızın url kontrolünü sağlamıza yardımcı oluyordu.

Burada ki en önemli konu url verisini almak siteadi.com/parametre olayını nextjs bize params olarak veriyor. Params verisini returnden önce getServerSideProps ile okuyup, parcalayıp yada başka bir yerden veriyi çekiyorsak mesela web-api ile çekiyorsak json formatında vb tamamiyle getServerSideProps içinde bu işlemleri yapmamız gerekiyor.

    //[url].js dosyamızın kodları
    import { useRouter } from 'next/router';

    export default function DetayPage({veri}){
      const router = useRouter()
      const { url } = router.query
      return (
          <div>
            <h2>Url= {url}</h2>
          </div>
      )
    }


    //Link verdiğimiz komponent veya Anasayfa index.js
    import Link from 'next/link';
    const data = {'id':1818, 'title':"Dinamik Url Örneği"};

    export default function Populer(){
      return (
        <div>
          <Link href={`/${data.id}`}>
            <a><h2>{data.title}</h2></a>
          </Link>
        </div>
      )
    }
  

Nextjs Url Parcalama ve Okuma Nasıl Yapılır?

Routing Query String Nextjs ile url parçalama ve Get verilerini okuma işlemini bize sunduğu next/router modülü ile çok basit bir şekilde yapabiliyoruz. Örnekle uygulamalı olarak işleyelim.

    //Bir url adresi belirleyelim ve pages Klasörümüzün içine urlpars.js adında dosya oluşturup içine kodlarımızı yazalım.
    //url = http://localhost:3000/urlpars?search=canli&ev=galatasaray&rakip=fenerbahce
    import { useRouter } from 'next/router'

    export default function Urlpars(){
      const router = useRouter()
      console.log(router)
      return (
      <div>
        <h1>Route     =  { router.route }</h1>
        <h3>Tam url   =  { router.asPath }</h3>
        <h2>Search    =  { router.query.search }</h2>
        <h2>Ev Shb    =  { router.query.ev }</h2>
        <h2>Rakip     =  { router.query.rakip }</h2>
      </div>
      )
    }
  

Nextjs Routing As Nedir, Seo uyumlu Url Nextjs ile Nasıl Yapılır?

Önemli bir konu olan url parametrelerinden devam ediyoruz. Buradaki amaç seo uyumlu içerik başlığı ile url verme yani siteadi.com/1867 gibi id olan url yapısını siteadi.com/canli-mac-izle olarak nasıl verebiliriz. İşte tam bu noktada nextjs routing as özelliği devreye giriyor. Kullanımı ise gayet basittir.

    //Nextjs Link yapısı href ile url yolunu belirtebiliyorduk as komutu ile o url kısmını id formatindan çıkartarak seo uyumlu link yapısına çevirdik.
    //Routing as kullanımı
    <Link href="/1867" as="canli-mac-izle">
      <a><h2>Canlı Mac İzle</h2></a>
    </Link>

    //ornek 2
    <Link href="/urlpars?search=canli" as="canli-mac-izle">
      <a><h2>Canlı Mac İzle</h2></a>
    </Link>
  

Service Workers Nedir?

Https üzerinde çalışarak internet olmasa bile kullanımına devam edilmesine olanak sağlayan kullanıcı ofline olsa bile site veya yaptığımız oyunda kalmasını sağlar. Özelliklerini tanımlamak gerekirse:

• Background Sync ile kullanıcı reaksiyonlarını browser inline db(veri tabanına ) ofline yazılması
• Push Notifications
• Caching

Progressive Web Nextjs ile offline site çalıştırma service workers örneği yapalım. Bunun için next-offline npm paketini yüklüyoruz ve kök dizine next.config.js dosyası oluşturuyoruz.

    //Kullanımı yüklenme komutları
    npm install --save next-offline

    // next.config.js dosyası oluşturup içine şu ayarı yapmamız gerekiyor.
    const withOffline = require('next-offline');

    module.exports = withOffline(nextConfig);
  

Service Worker localde http ile çalışmaz locale ya https kurulmalı yada deploy ederek sunucu üzerinde çalıştırılmalı. Şimdi gelelim 2 aşamaya server.js adında kök dizine bir dosya oluşturup içine kodlarımızı yazalım.

    //server.js kodlarımız
    const { createServer } = require('http')
    const { join } = require('path')
    const { parse } = require('url')
    const next = require('next')

    const app = next({ dev: process.env.NODE_ENV !== 'production' })
    const handle = app.getRequestHandler()

    app.prepare()
      .then(() => {
          createServer((req, res) => {
            const parsedUrl = parse(req.url, true)
            const { pathname } = parsedUrl

            // handle GET request to /service-worker.js
            if (pathname === '/service-worker.js') {
              const filePath = join(__dirname, '.next', pathname)

              app.serveStatic(req, res, filePath)
            } else {
              handle(req, res, parsedUrl)
            }
          })
          .listen(3000, () => {
            console.log(`> Ready on http://localhost:${3000}`)
          })
        })

  

nextjs projesini github'a nasıl yüklenir?

Githup adresine giderek kullanıcı bilgilerimizle giriş yaptıktan sonra new repository linkinden repomuzu oluşturalım. Ve sonra Terminalden yükleyeceğimiz klasorün içine giderek sırasıyla komutlarımızı girelim.

    //giti aktif hale getirelim
    git init

    //klasörünün içindeki tüm dosyaları . ile ekliyoruz.
    git add .

    //githup user email bilgimizi
    git config --global user.email "[email protected]"

    //githup kullanıcı adımızı
    git config --global user.name "İsmail Gültekin"

    //repoya yorum ile commit atıyoruz.
    git commit -m "Dosyaları yükledim"

		//branch olarak main olduğunu belirtiyoruz.
		git branch -M main

    //repo oluşturduğumuz linki ve git adı belirliyoruz
    git remote add nextdeneme https://github.com/ismailgultekin/nextjstest.git

    //projemizi GitHub’a taşıyoruz. git adı yukarda oluşturdugumuz nextdeneme idi
    git push -u nextdeneme main
  

Nextjs ubuntu Deploy, Sunucuya github ile nextjs nasıl yüklenir?

Ssh bilgilerimiz ile ubuntu linux serverımıza girdikten sonra dosyamızın bulunduğu klasöre gidelim.

	//Ubuntu root ile giriş yapalım
	ssh [email protected]
	password: linux ubuntu root şifreniz

	//Dosyaların bulunduğu dizine gidelim
	cd /var/www/nextjstest

	//Github projemizin adresini bulunduğumuz dizine git clone ile sunucuya çekelim. Komutu:
	git clone https://github.com/ismailgultekin/nextjstest

	//Github şifremizi ve kullanıcı adımızı belirtelim
	Username for 'https://github.com': kullanıcı adı
	Password for 'https://[email protected]':parolanız

	ls komutu ile bulunduğumuz dizine dosyaların yüklendiğine bakalım kontrol edelim

Nextjs ubuntu sunucu üzerinde build ederek çalıştırılması

  //terminalden package.json da bulunan bağımlılıklarımızın hepsini yükleyelim.
  npm install

  //package.json dosyamızda scripts içine build kısmını değiştirelim.
  "build": "next build && next export",

  //Terminalden sunucuda şu komutu çalıştıralım.
  npm run build

  //Export successful. Files written yazarsa işlem tamamdır urlden kontrol edelim
  https://ismailgultekin.com/demo/nextjstest/out/

  Bizim yazdığımız dosyalarımız derlendi ve out adında bir dosya oluşturulup içine index.html olarak kullanıma sunuldu.