Giriş Yap
Kayıt Ol
Üye Listesi
Aktif Konular
Arama Yap
() INF
Next.js
Nedir? Başlangıç Rehberi, Temel Kavramlar ve Örnek Kodlar
Giriş
Next.js, modern web uygulamaları geliştirmek için kullanılan
popüler bir JavaScript framework'üdür. Next.js, React ile entegre çalışır ve
gelişmiş özellikler sunarak React uygulamalarını daha performanslı ve SEO dostu
hale getirir. Bu makalede, Next.js'in temel kavramlarına odaklanarak, başlangıç
seviyesinde bir anlayış kazanmanıza yardımcı olacağım. Ayrıca, Next.js ile
ilgili örnek kodlar da sunacağım.
Nedir?
Next.js, React tabanlı web uygulamaları geliştirmek için
kullanılan bir framework'tür. React ile geliştirme yaparken karşılaşılan bazı
karmaşıklıkları ortadan kaldırarak, kullanıcı deneyimini iyileştirir. Next.js,
sunucu tarafı rendering (server-side rendering) ve statik site üretimi (static
site generation) gibi özellikleri destekler.
Temel Kavramları:
Tabanlı Yapı
Next.js, uygulamanızı sayfa (page) tabanlı bir yapıya
dayandırır. Her sayfa, "pages" dizini içinde bir dosya olarak
tanımlanır. Örneğin, "index.js" dosyası, uygulamanın ana sayfasını
temsil eder. Bu yapı, URL yönlendirmesi ve sayfa oluşturmayı oldukça basit hale
getirir.
Tarafı Rendering (Server-Side Rendering)
Next.js, sunucu tarafı rendering (SSR) sağlar. Bu,
uygulamanızın sunucu tarafında sayfaları oluşturmasını ve istemciye hazır HTML
olarak göndermesini sağlar. SSR, SEO iyileştirmeleri için önemlidir ve daha iyi
performans sunar.
Site Üretimi (Static Site Generation)
Next.js, statik site üretimi (SSG) özelliği sayesinde
dinamik içerikli siteleri ön belleğe alabilir ve bu sayede hızlı bir şekilde
sunabilir. Özellikle içeriği sık sık değişmeyen siteler için idealdir.
Getirme
Next.js, sayfa oluşturulmadan önce sayfaya gerekli verileri
getirme yeteneği sunar. Bu, sayfanın yüklendiğinde verilerin hazır olmasını
sağlar ve kullanıcı deneyimini iyileştirir.
Başlangıç Adımları
Next.js ile başlamak için aşağıdaki adımları takip
edebilirsiniz:
Oluşturma
Yeni bir Next.js uygulaması oluşturmak için aşağıdaki komutu
kullanabilirsiniz:
npx
create-next-app my-next-app
Bu komut, yeni bir Next.js proje klasörü oluşturur ve
gerekli bağımlılıkları ekler.
Oluşturulan uygulamayı başlatmak için aşağıdaki komutları
kullanabilirsiniz:
my-next-app
npm run
dev
Bu komutlar, geliştirme sunucusunu başlatır ve tarayıcınızda
uygulamanızı görüntülersiniz. Varsayılan olarak, uygulamanız
"http://localhost:3000" adresinde çalışır.
Next.js ile sayfaları oluşturmak oldukça basittir.
"pages" dizini içinde oluşturulan her dosya, bir sayfayı temsil eder.
Örneğin, "pages/index.js" dosyası uygulamanın ana sayfasını
oluşturur.
pages/index.js
import
React from 'react';
function
HomePage() {
return (
<div>
<h1>Next.js Başlangıç</h1>
<p>Merhaba, Next.js!</p>
</div>
);
}
export
default HomePage;
Next.js, otomatik olarak sayfaları algılar ve yönlendirme
sağlar.
Next.js, sayfa oluşturulmadan önce veri getirme işlemlerini
yapmanıza olanak tanır. Örneğin, bir sayfa için veri getiren bir örnek:
pages/products.js
import
React from 'react';
function
ProductsPage({ products }) {
return (
<div>
<h1>Ürünler</h1>
<ul>
{products.map((product) => (
<li
key={product.id}>{product.name}</li>
))}
</ul>
</div>
);
}
export
async function getStaticProps() {
// Veritabanından ürünleri getir
const products = await
fetchProductsFromDatabase();
return {
props: {
products,
},
};
}
export
default ProductsPage;
Bu örnekte, getStaticProps fonksiyonu sayfanın
oluşturulmadan önce verileri getirir ve bileşenin props'larına ekler.
Sayfa Yönlendirmesi
Next.js, dinamik sayfa yönlendirmesi için kolay bir yol
sunar. Örneğin, kullanıcıların profil sayfalarını görüntülemek için
"/profile/username" şeklinde URL'leri ziyaret ettiğini düşünün. İşte
bu tür bir dinamik yönlendirme örneği:
pages/profile/[username].js
import {
useRouter } from 'next/router';
function
ProfilePage() {
const router = useRouter();
const { username } = router.query;
return (
<div>
<h1>Kullanıcı Profili:
{username}</h1>
</div>
);
}
export
default ProfilePage;
Bu sayede "/profile/johndoe" gibi URL'leri ele
alabilir ve kullanıcı adını dinamik olarak görüntüleyebilirsiniz.
Layout ve Component Kullanımı
Next.js, tekrar kullanılabilir bileşenlerin kullanımını
teşvik eder. Örneğin, bir sayfa şablonu veya site başlığı için bir bileşen
oluşturabilirsiniz:
components/Layout.js
import
Head from 'next/head';
function
Layout({ children }) {
return (
<div>
<Head>
<title>My Next.js
Uygulaması</title>
</Head>
<header>
<nav>
{/* Site menüsü */}
</nav>
</header>
<main>{children}</main>
<footer>
{/* Altbilgi */}
</footer>
</div>
);
}
export
default Layout;
Daha sonra bu bileşeni sayfalarınızda kullanabilirsiniz:
pages/index.js
import
React from 'react';
import
Layout from '../components/Layout';
function
HomePage() {
return (
<Layout>
<h1>Next.js Başlangıç</h1>
<p>Merhaba, Next.js!</p>
</Layout>
);
}
export
default HomePage;
API Rotaları
Next.js, sunucu tarafında çalışan API rotaları oluşturmanıza
da olanak tanır. Örneğin, bir kullanıcının adını ve soyadını alan bir API
rotası:
pages/api/user.js
export
default function handler(req, res) {
const { method } = req;
if (method === 'GET') {
res.status(200).json({ firstName: 'John',
lastName: 'Doe' });
} else {
res.status(405).end(); // İzin verilmeyen
yöntem
}
}
Bu API rotasını kullanmak için, istemci tarafında bir istek
yapabilirsiniz:
React, { useEffect, useState } from 'react';
function
UserProfile() {
const [user, setUser] = useState({});
useEffect(() => {
fetch('/api/user')
.then((response) => response.json())
.then((data) => setUser(data));
}, []);
return (
<div>
<h1>Kullanıcı Profili</h1>
<p>Ad: {user.firstName}</p>
<p>Soyad: {user.lastName}</p>
</div>
);
}
export
default UserProfile;
Bu örnekte, /api/user rotası kullanıcı verilerini sağlar.
Bu örnekler, Next.js ile yapılabilecek bazı temel şeyleri
göstermektedir. Next.js, daha fazla özellik ve esneklik sunar ve bu örneklerle
başlayarak daha karmaşık projeler oluşturabilirsiniz.
