Next.js, TypeScript ve Tailwind CSS ile Dinamik Navbar Oluşturma

Next.js, TypeScript ve Tailwind CSS ile Dinamik Navbar Oluşturma

Bu makalede, Next.js, TypeScript ve Tailwind CSS kullanarak dinamik bir navbar oluşturma sürecini adım adım inceleyeceğiz. Özellikle, Caleb Makafoi’nin yazısında paylaştığı deneyimleri temel alarak, konuyu daha detaylı ve Türkçe olarak ele alacağız. Ayrıca, kendi deneyimlerimi ve ipuçlarımı da paylaşacağım.

Proje Hazırlığı ve Kurulum

Öncelikle, yeni bir Next.js projesi oluşturarak işe başlayalım. Bunun için, terminalinizde aşağıdaki komutu çalıştırabilirsiniz:

npx create-next-app my-app --ts --use-npm

Ardından, Tailwind CSS kurulumunu gerçekleştirelim. Tailwind CSS’in resmi dökümanında detaylı bilgi bulabilirsiniz. Kısaca, gerekli paketleri yükleyip konfigürasyon dosyasını düzenlemeniz gerekecektir. Bu sayede, projenizde Tailwind CSS’i kullanmaya başlayabilirsiniz. Sonrasında ise, TypeScript’i zaten kurmuş bulunuyoruz.

Dinamik Navbar Bileşeni

Şimdi, dinamik navbar bileşenini oluşturalım. Bu bileşen, sayfanın hangi bölümünde olduğunuzu algılayacak ve buna göre menü öğelerini güncelleyecektir. Örneğin, ana sayfada farklı, blog sayfasında farklı menü öğeleri gösterebiliriz. Bunun için, Next.js’in useRouter hook’unu kullanabiliriz.

import { useRouter } from 'next/router';

const Navbar = () => {
  const router = useRouter();

  return (
    <nav className="bg-gray-800 p-4">
      <ul className="flex space-x-4">
        <li>
          <a href="/" className={router.pathname === '/' ? 'text-blue-500' : 'text-white'}>Ana Sayfa</a>
        </li>
        <li>
          <a href="/blog" className={router.pathname === '/blog' ? 'text-blue-500' : 'text-white'}>Blog</a>
        </li>
        {/* Diğer menü öğeleri... */}
      </ul>
    </nav>
  );
};

export default Navbar;

Bu kodda, useRouter hook’u ile mevcut rotanın bilgilerine erişip, aktif menü öğelerini farklı bir stile sahip olarak gösterebiliyoruz. Bu sayede, kullanıcı hangi sayfada olduğunu kolayca anlayabilir. Ayrıca, Tailwind CSS sınıflarını kullanarak, stil uygulamak oldukça kolaylaşır.

Sonuç

Bu makalede, Next.js, TypeScript ve Tailwind CSS kullanarak dinamik bir navbar oluşturmayı ele aldık. Verilen örnek kodları inceleyerek ve kendi projelerinize uyarlayarak, profesyonel ve kullanıcı dostu arayüzler geliştirebilirsiniz. Daha fazla bilgi için, Next.js resmi dökümanına ve Tailwind CSS resmi dökümanına göz atabilirsiniz. Ayrıca, kendi web sitemi fatihsoysal.com‘u ziyaret ederek, daha fazla web geliştirme içeriğine ulaşabilirsiniz.

Umarım bu makale, size Next.js ile dinamik navbar oluşturma konusunda yardımcı olmuştur. Herhangi bir sorunuz veya öneriniz varsa, lütfen yorumlarda belirtmekten çekinmeyin.

#Etiketler: Next.js, TypeScript, Tailwind CSS, Dinamik Navbar, React, JavaScript, Web Geliştirme, Programlama, Navbar Oluşturma, Router, useRouter