Yavuzlar
Ana sayfaTelegram
  • Yavuzlar
  • VulnLab
  • CodinLab
  • 📚EĞİTİM
    • PHP
      • XAMPP kurulumu
      • VS Code Kurulum
      • 1.0 PHP Nedir
      • 1.1 Dosya Oluşturma
      • 1.2 Syntax (Yazım Kuralları)
      • 1.3 PHP'de Echo ve Print
      • 1.4 PHP'deki yorumlar
      • 1.5 PHP Değişkenleri
      • 1.6 Operatörler (Operators)
      • 1.7 Veri Türünü Alma
      • 1.8 PHP'de String
      • 1.9 PHP'de Sabitler
      • 2.0 PHP'de If Else Elseif
      • 2.1 Switch Case
      • 2.2 PHP'de Döngüler
      • 2.3 PHP'de Diziler (Arrays)
      • 2.4 PHP'de Süper Global Değişkenleri
      • 2.5 PHP'de Cookie (Çerez) Ve Session (Oturum) Yöntemleri
      • 2.6 Form işlemleri
    • C++
      • 1.0 Temeller
        • 1.1 Dosya Oluşturma
        • 1.2 Syntax (Yazım Kuralları)
        • 1.3 Yorum Satırları
        • 1.4 C++ Değişkenleri
          • 1.4.1 Değişken Türleri
        • 1.5 Operatörler (Operators)
        • 1.6 Namespace
        • 1.7 Kullanıcı Girdisi (User Input)
        • 1.8 C++ Stringleri (C++ Strings)
        • 1.9 Matematik (Math) Fonksiyonları
        • 1.10 Booleans
        • 1.11 If Else
        • 1.12 Switch
        • 1.13 While Döngüsü
          • 1.13.1 Do While Döngüsü
        • 1.14 For Döngüsü
        • 1.15 Break/Continue
        • 1.16 Diziler
        • 1.17 Structures
        • 1.18 Enums
        • 1.19 References
        • 1.20 Pointers
      • 2.0 Fonksiyonlar
      • 3.0 Sınıflar
        • 3.1 OOP
        • 3.2 Sınıflar ve Objeler
        • 3.3 Sınıf Methodları
        • 3.4 Yapıcılar (Constructors)
        • 3.5 Erişim Belirleyicileri (Access Specifiers)
        • 3.6 Kapsülleme (Encapsulation)
        • 3.7 Inheritance
        • 3.8 Polimorfizm (Polymorphism)
        • 3.9 Dosyalar (Files)
        • 3.10 İstisnalar (Exceptions)
        • 3.11 Tarih ve Zaman (Date and Time)
      • 4.0 Veri Yapıları (Data Structures)
        • 4.1 Veri Yapıları ve STL
        • 4.2 Vektörler (Vectors)
        • 4.3 Listeler (Lists)
        • 4.4 Yığınlar (Stacks)
        • 4.5 Kuyruklar (Queues)
        • 4.6 Deque (Çift Uçlu Kuyruk)
        • 4.7 Küme (Set)
        • 4.8 Maps
        • 4.9 Iterator
        • 4.10 Algoritmalar
  • 🛠️ARAÇLAR
    • Aircrack-ng
    • Airgeddon
    • Arjun
    • BeEF
    • Bettercap
    • Docker
    • Gelişmiş Wireshark Kullanımı (Advanced Wireshark Usage)
    • Google Dorks
    • Hping3
    • John the Ripper
    • Metasploit Framework
    • Netcat
    • Nmap
    • OSINT Framework
    • PEASS-ng
    • Sublist3r
    • XSS Scanner
    • Wireshark
    • ZAP
    • HYDRA
  • 🖥️İŞLETİM SİSTEMLERİ
    • Linux101
    • MBR
  • 🔑KRİPTOLOJİ
    • Dijital Sertifika ve İmzalar
    • Sezar Şifrelemesi
    • Steganografi
    • Veri Şifreleme (Data Encryption)
  • 🔏Network
    • Domain Name Server (DNS)
    • Firewall Nedir? Nasıl Çalışır ?
    • Ortadaki Adam Saldırısı (Man In The Middle Attack)
    • OSI Modeli
    • Sanal Özel Ağlar (VPN)
    • World Wide Web (WWW)
  • 🔐PRIVILEGED
    • Docker Escape
  • 📨Protokoller
    • ARP
    • DHCP
    • FTP
    • HTTP/HTTPS
    • SSH
    • TCP/IP
    • UDP
    • Wİ-Fİ Güvenlik Protokolleri (WEP/WPA/WPA2/WPA3)
  • 💻SİBER TEHDİT İSTİHBARATI
    • Gelişmiş Siber Tehdit İstihbaratı Nedir?
  • 🔒WEB GÜVENLİĞİ
    • 403 ByPass
    • API Güvenliği (API Security)
    • Broken Access Control
    • Bulut Güvenliği (Cloud Security)
    • Command Injection
    • Cross Origin Resource Sharing
    • Cross Site Request Forgery (CSRF)
    • Cyber Kill Chain
    • DDoS Saldırıları
    • File Upload Zafiyeti Nedir?
    • HTTP Request Smuggling
    • Insecure Direct Object Reference (IDOR)
    • Incident Response
    • Local File Inclusion (LFI)
    • NoSQL Injection
    • Pentest 101
    • Race Condition
    • Server Side Request Forgery (SSRF)
    • Server Side Template Injection (SSTI)
    • Spring4Shell
    • Two Factor Authentication Bypass
    • XML External Entity Attack (XEE)
  • 🤖YAPAY ZEKA
    • ChatGPT for Hacking
    • Siber Güvenlik ve Yapay Zeka
    • Yapay Zeka ile Sahte Fotoğraf Tespiti
  • 🌐YAZILIM
    • Düzenli İfadeler (Regular Expressions)
    • Elasticsearch Nedir?
    • Front-end Teknolojileri
    • Golang'da Arayüzler (Interfaces)
    • Go'da Concurrency ve Uygulamaları
    • Güvenli Kodlama (Secure Coding)
    • Java Overloading vs Overriding
    • JSON Web Token (JWT)
    • Material-UI
    • NextJS Nedir?
    • ReactJS Kancalar (Hooks)
    • ReactJS Nedir?
    • Redux Toolkit
    • SOLID Yazılım Geliştirme Prensipleri
    • SQL 101
    • UI / UX Nedir?
    • Veri Taşıma Nedir? (Database Migration)
    • Versiyon Kontrol Sistemleri ve GIT
  • 🔷DİĞER
    • Bug Bounty (Hata Ödülü) Nedir?
    • Popüler Yazılımların Kurulumları
      • Ubuntu Server 24.04 LTS Kurulumu
      • Ubuntu için Güncel Docker Engine Kurlumu
    • Güvenlik Operasyonları Merkezi Nedir?
    • Honeypot (Bal Küpü)
    • IoT Güvenliği Nedir?
    • ShellShock Exploit
    • Yük Dengeleyici (Load Balancer) Nedir?
Powered by GitBook
On this page
  • Next.js Nedir?
  • Next.js Özellikleri
  • Server Side Rendering
  • Static Generation
  • API Routes
  • Automatic Code Splitting
  • File-System Based Routing (Dosya Sistemi Tabanlı Yönlendirme)
  • Image Optimization (Görüntü Optimizasyonu)
  • Dynamic Routing
  • Next.js ve SEO (Search Engine Optimization)
  • Next.js Kurulumu ve Kullanımı
  • Proje oluşturma
  • Projenin Yapısı
  • Sonuç

Was this helpful?

  1. YAZILIM

NextJS Nedir?

PreviousMaterial-UINextReactJS Kancalar (Hooks)

Last updated 4 months ago

Was this helpful?

Next.js, Netflix, Uber, Starbucks veya Twitch gibi dünyanın dört bir yanındaki en büyük ve en popüler şirketler tarafından yaygın olarak kullanılmaktadır. Ayrıca, statik sitelerle çalışmak için mükemmel olan en hızlı büyüyen React frameworklerinden biri olarak kabul edilir — ki bu, son zamanlarda web geliştirme dünyasında en çok konuşulan konulardan birisidir.

Stack Overflow'un verilerine göre, web geliştiricileri arasındaki en popüler 4. web framework Next.js imiş.

Yıllar geçtikçe Next.js sürekli olarak evrim geçirerek web geliştirmenin sürekli değişen ortamına hitap eden özellikler sunmuştur. Güncellemeleri sürekli olarak performansı, geliştirici deneyimini iyileştirmeye ve sağlam SEO yetenekleri sağlamaya odaklanmıştır.

Gelin hep beraber Next.js'e ve temel özelliklerine bir bakış atalım.

Next.js Nedir?

Next.js, React tabanlı bir frameworktür. Vercel tarafından geliştirilmiştir ve SSR (Server-side rendering), SSG (Static Site Generation) gibi modern web geliştirme için güçlü araçlarla donatılmıştır. Next.js, SEO dostu, hızlı yükleme süreleri ve geliştirilmiş performans sunarak hem kullanıcılar hem de geliştiriciler için işleri kolaylaştırır diyebiliriz.

Hem basit hem de karmaşık web uygulamalarını çok daha hızlı ve kolay bir şekilde oluşturmamıza olanak tanır ve Next'in üzerine katılarak geliştirilen birçok harika framework sayesinde de artık çok daha iyi bir UX (User experience) ve SEO verimliliğine sahip hızlı web siteleri oluşturabiliriz.

Next.js Özellikleri

Server Side Rendering

Sayfalar server tarafında işlenir ve kullanıcılara önceden render edilmiş HTML olarak sunulur. Bu, sayfa yükleme sürelerini kısaltır ve SEO'yu iyileştirir.

Static Generation

Uygulamanın tamamını veya belirli sayfalarını derleme zamanında statik HTML dosyalarına dönüştürür.

API Routes

Next.js ile, aynı app içinde API endpointleri oluşturmak mümkündür.

Automatic Code Splitting

Next.js, web uygulamanızın kodlarını otomatik olarak daha küçük parçalara böler ve böylece kullanıcılar yalnızca ihtiyaç duydukları kodu yükler. Bu, performansı artırır ve sayfa yükleme sürelerini önemli ölçüde kısaltır.

File-System Based Routing (Dosya Sistemi Tabanlı Yönlendirme)

Next.js, pages veya app klasörü içindeki dosya yapısını kullanarak otomatik olarak yönlendirme (routing) mantığını oluşturur, böylece ayrı bir routing yapılandırmasına ihtiyaç duyulmaz.

Image Optimization (Görüntü Optimizasyonu)

Next.js, next/image bileşeni aracılığıyla otomatik görüntü optimizasyonu sağlar. Bu, farklı ekran boyutları ve cihazlar için optimize edilmiş görüntüler sunarak performansı artırır.

import Image from 'next/image'
 
export default function Page() {
  return (
    <Image
      src="/profile.png"
      width={500}
      height={500}
      alt="Picture of the author"
    />
  )
}

Dynamic Routing

Next.js, dinamik yönlendirme ile pathler (yollar) ve parametrelerle çalışmayı oldukça kolaylaştırır.

Parametreler useRouter() kullanılarak alınabilir:

import { useRouter } from 'next/router'

const router = useRouter();
const language = router.query.language;
const pathId = router.query.pathId;

Next.js ve SEO (Search Engine Optimization)

Next.js, güçlü bir framework olmasının yanı sıra, SEO (Arama Motoru Optimizasyonu) açısından da birçok avantaj sunar. Bu sayede, web sitenizin arama motorlarında daha üst sıralarda yer almasını ve organik trafik elde etmesini kolaylaştırır.

  • SSR ve SSG Next.js, Server-side Rendering ve Static Site Generation gibi farklı derleme yöntemleri sunar. Bu yöntemler sayesinde, arama motorları botları web sitenizin içeriğini kolayca tarayabilir ve anlayabilir, bu da SEO performansınızı artırır.

  • Meta tags ve Headerlar next/head bileşeni aracılığıyla sayfa başlıklarını, meta açıklamalarını ve diğer önemli meta etiketlerini kolayca yönetmenize olanak tanır. Bu, arama motorlarına sayfalarınızın içeriği hakkında daha fazla bilgi sağlar ve SEO performansınızı artırır.

  • XML Site Haritaları (Sitemaps) Otomatik olarak XML site haritaları oluşturarak arama motorlarına web sitenizin yapısı hakkında bilgi verir ve tüm sayfalarınızın taranmasını kolaylaştırır.

Next.js Kurulumu ve Kullanımı

Son olarak nasıl bir Next.js projesi oluşturabileceğimizden ve projenin yapısından bahsedip yazımızı noktalayalım.

Proje oluşturma

Next.js ile bir proje oluşturmak oldukça kolaydır. Node.js npm veya yarn'ın kurulu olduğuna emin olduktan sonra başlayabilirsiniz.

npx create-next-app@latest
# veya
yarn create next-app

Projenin Yapısı

Next.js projeleri genellikle şu klasörlerden oluşur:

  • src: Uygulamanızın temel bileşenlerini yazdığınız klasördür.

  • pages/: Her klasör (routing) ve içindeki dosya (index.js, index.tsx) bir sayfa olarak tanımlanır.

  • public/: Statik dosyalar (assets, fonts) bu klasöre konulur.

  • styles/: CSS dosyaları bu klasörde bulunur.

  • api/: API endpoint'leri oluşturmak için kullanılır.

  • app (Next.js 13 ve sonrası): Yeni App Directory (Uygulama Dizini) yapısını kullanarak sayfaları ve düzenleri yönetmek için kullanılır.

    • layout.js Sayfalarınızda ortak olarak kullanılan layout bileşeni.

    • page.js Sayfa içeriği

    • loading.js Yüklenme sayfası

  • package.json: Projenin dependencylerini ve komutları içerir.

  • next.config.js: Next.js yapılandırmalarınızı içerir.

Sonuç

Next.js hakkında çok daha kapsamlı bilgiye sahip olmak için dokümanını okuyabilir ve Vercel'in sağlamış olduğu React ve Next.js kurslarına ücretsiz erişim sağlayabilirsiniz.

Next.js, modern web uygulamaları geliştirmek için güçlü bir framework'tür. SEO dostu, performans odaklı ve geliştirici deneyimini iyileştiren özellikleri ile öne çıkar. Hem küçük hem de büyük ölçekli projeler için ideal bir seçimdir. Artan popülerliği sebebiyle de kariyerinizde envanterinize eklenmeye değer bir teknolojidir.

Okuduğunuz için teşekkürler!

🌐
Next.js Websitesi
Next.js Dokümantasyonu
Next.js Öğren
2024 Developer Survey
Next.js ile oluşturulmuş API endpointleri
pages directory
Oluşturulmuş dynamic routing klasörleri
Örnek bir proje yapısı
Stack Overflow Survey Web Framworks
Next.js Logo
Server side rendering
Static Generation
API routes
Pages directory
Dynamic Routing
Proje yapısı