Next.js Server Bileşenlerinde Aktif Gezinme Bağlantılarını Stilleme

Next.js Server Bileşenlerinde Aktif Gezinme Bağlantılarını Stilleme

Next.js’in en güçlü özelliklerinden biri, performansı artırmak ve sunucu tarafı işlemeyi sağlayan Server Bileşenleridir. Ancak, Server Bileşenleri kullanırken, uygulamada gezinme bağlantıları gibi dinamik unsurları nasıl stilize edeceğimizi anlamak zor olabilir.

Bu makalede, Next.js Server Bileşenlerinde aktif gezinme bağlantılarını stilleme konusunda adım adım bir rehber sunacağım. Öncelikle, aktif bağlantıyı nasıl belirleyeceğimizi öğreneceğiz. Ardından, bu bilginin stil oluşturma için nasıl kullanılacağını göstereceğiz. Bu makale boyunca, basit ve anlaşılır bir örnek üzerinde çalışacağız. Böylece, konuyu daha iyi anlayabileceksiniz.

Aktif Bağlantıyı Belirleme

Aktif bağlantıyı tanımlamak için, kullanıcının şu anda hangi sayfada olduğunu bilmemiz gerekir. Next.js’te, bunu `useRouter` hook’unu kullanarak elde edebiliriz. Bu hook, sayfaya ait bilgileri sağlar. Bizim için önemli olan bilgi, `pathname` özelliğidir. `pathname` kullanıcının şu anda ziyaret ettiği URL’yi temsil eder.

“`javascript
“use client”;

import { useRouter } from ‘next/navigation’;

function Nav() {
const router = useRouter();

return (

);
}

export default Nav;
“`

Bu örnekte, `useRouter` hook’unu kullanarak `router` adlı bir değişken oluşturduk. Ardından, `pathname` özelliğini kullanarak her bir bağlantının URL’si ile mevcut sayfanın URL’sini karşılaştırdık. Eğer URL’ler eşleşiyorsa, `active` sınıfını ekliyoruz.

Aktif Bağlantıları Stilleme

Aktif bağlantıyı belirledikten sonra, `active` sınıfına stil uygulayarak aktif bağlantıları stilize edebiliriz. Bunu, CSS dosyalarınızı veya inline stilleri kullanarak yapabilirsiniz.

“`css
.active {
font-weight: bold;
color: blue;
}
“`

Yukarıdaki CSS kodu, `active` sınıfına sahip bağlantıları kalın ve mavi yapar. Bu şekilde, aktif bağlantıyı diğerlerinden ayırabilirsiniz.

Diğer Seçenekler

Bu yöntem, aktif bağlantıları stillemek için en yaygın yöntemlerden biridir. Ancak, farklı ihtiyaçlara göre diğer yöntemleri de tercih edebilirsiniz. Örneğin, CSS modülleri veya `styled-components` kütüphanesini kullanarak stillerinizi yönetebilirsiniz.

Aktif bağlantılar için kullanılabilecek bazı diğer yöntemler:

• **React Router’ı Kullanma**: React Router, dinamik uygulamalarda gezinme ve URL yönetimi için kullanılır. `useLocation` hook’unu kullanarak aktif sayfanın yolunu elde edebilir ve bunu stilleme için kullanabilirsiniz.
• **CSS’te :active Seçiciyi Kullanma**: CSS’te `:active` seçici, bir element üzerine tıklandığında uygulanır. Ancak, bu yöntem, bağlantının sadece tıklandığı anda stil uygulayacaktır.
• **JavaScript Kullanma**: JavaScript kullanarak da aktif bağlantıyı belirleyip stile uygulayabilirsiniz. Bu, daha karmaşık senaryolarda daha fazla kontrol sağlamanıza olanak tanır.

Sonuç

Bu makalede, Next.js Server Bileşenlerinde aktif gezinme bağlantılarını stilleme konusunda temel yöntemleri inceledik. Bu yöntemler basit ve anlaşılır olup, uygulamada aktif bağlantıları kolayca stilize etmenize yardımcı olur.

Next.js Server Bileşenlerinin performans avantajlarını elde ederken aynı zamanda kullanıcı arayüzünü geliştirmek için bu bilgileri kullanabilirsiniz. Daha fazla bilgi için Next.js resmi dokümantasyonuna göz atabilirsiniz.

Eğer bu konu hakkında daha fazla sorunuz varsa, web sitemi ziyaret edebilir veya yorum bölümünde sorularınızı sorabilirsiniz.

#Etiketler
Next.js, Server Bileşenleri, Aktif Bağlantı, Gezinme, Stilleme, useRouter, pathname, CSS