Next.js'te Özelleştirilmiş Fave İconlar Ekleme ve React ile Dinamik Güncelleme

İçindekiler:

1. Giriş
2. Nedir Fave Icon?
3. Fave İcon Nasıl Eklenir?
4. Fave İconu Özelleştirme
5. İconu Dinamik Olarak Güncelleme
6. Fave İcon Kullanım Senaryoları
7. Nexjs Hakkında Daha Fazla Bilgi
8. Nexjs İle Blog Oluşturma
9. Twitter ile Giriş Ekleme
10. Sonuç

Giriş

Merhaba ekip, bu makalede Nexjs'e özel Fave İcon'ların nasıl ekleneceğini öğreneceğiz. Fave İcon, bir web sitesinin tarayıcıda veya yer imlerinde görünen küçük bir ikondur. Bu ikonlar, bir web sitesinin tanımlanmasına yardımcı olur ve kullanıcılara siteyi tanımaları konusunda yardımcı olur. Haydi başlayalım!

Nedir Fave Icon?

Fave İcon, kullanıcının web sitesiyle ilgili hızlı bir tanıma sağlayan küçük bir simgedir. Genellikle tarayıcı sekmesinde veya yer imlerinde görünen bu simge, web sitesinin kimliğini yansıtabilir. Özelleştirilmiş bir Fave İcon, web sitenize daha profesyonel bir görünüm kazandırabilir ve kullanıcıların sitenizi daha kolay tanımasına yardımcı olabilir.

Fave İcon Nasıl Eklenir?

İlk adım olarak, web projemizi oluşturmak için Nexjs'in sağladığı create-next-app komutunu kullanacağız. Bunu yapmak için terminalinizi açın ve aşağıdaki komutu girin:

yarn create next app favicon-app

Bu komut, yeni bir Nexjs uygulaması oluşturacak ve bağımlılıkları yükleyecektir. Ardından, oluşturulan dizine gidip geliştirme sunucusunu başlatabilirsiniz:

cd favicon-app
yarn dev

Artık yeni Nexjs uygulamanızı çalıştırabilirsiniz. Tarayıcınızı açın ve http://localhost:3000 adresine gidin. İlk etapta boş bir site göreceksiniz.

Fave İconu Özelleştirme

Web sitemize özelleştirilmiş bir Fave İcon eklemek için "realfavicon.net" adlı bir siteyi kullanacağız. Bu site bize, Fave İcon'u özelleştirmemize ve farklı boyutlarda oluşturmamıza olanak tanır. Aşağıdaki adımları izleyerek nasıl yapılacağını görelim:

1. İlk olarak, "realfavicon.net" sitesine gidin.
2. Sitenin ana sayfasında, "Select your Favicon Image" bölümünde kendi Fave İcon'unuzu seçin.
3. Seçtiğiniz resim önizleme olarak görünecektir.
4. Geniş bir seçenek yelpazesiyle özelleştirme yapabilirsiniz. Örneğin, "Generic Image" seçeneğini kullanarak, favicon için önceden oluşturulmamış bir görüntüyü özelleştirebilirsiniz. Ayrıca, mobil cihazlarda nasıl görüneceğini de önizleyebilirsiniz.
5. Tüm önizlemeleri tamamladıktan sonra, sayfanın en altına kaydırın ve "Generate your Favicon package" düğmesine tıklayın.
6. Yeni bir pencere açılacak ve "Favicon package" adlı bir ZIP dosyasını indirmenizi isteyecektir. ZIP dosyasını bilgisayarınıza kaydedin ve çıkarın.
7. Çıkan dosya içinde, favicon.ico adında bir dosya bulacaksınız. Bu, favicon simgemizin ana dosyasıdır.
8. Projenizin kök dizinine gidin ve public klasörünü açın.
9. İndirdiğiniz favicon.ico dosyasını, public klasörüne sürükleyin ve mevcut favicon.ico dosyasını değiştirin. Dosyayı değiştiriyoruz çünkü bu adı varsayılan olarak tarayıcılar tarafından aranır.
10. Artık web sitenizde özelleştirilmiş bir Fave İcon'a sahipsiniz. Tarayıcınızı yenileyerek Fave İcon'un çalışıp çalışmadığını kontrol edebilirsiniz.

İconu Dinamik Olarak Güncelleme

Fave İcon'u, kullanıcı etkileşimlerine veya sayfada gerçekleşen olaylara bağlı olarak dinamik olarak güncellemek isterseniz, React'in useState kancasını kullanabilirsiniz. Şimdi nasıl yapılacağına bakalım:

1. İlk adımda, React'ten useState kancasını içe aktaracağız:

import React, { useState } from 'react';

2. Daha sonra, bileşenimizin üst kısmında bir state oluşturacağız ve bu state'i güncellemek için setFaveIcon fonksiyonunu kullanacağız. Örneğin:

const [faveIcon, setFaveIcon] = useState('');

3. State'i güncellemek için bir işlev oluşturacağız. Örneğin, bir "beğen" düğmesine her tıklandığında Fave İcon'un belirli bir süre boyunca güncelleneceğini ve ardından varsayılan değere geri döneceğini gösterelim:

const handleClick = () => {
  setFaveIcon('like');
  setTimeout(() => {
    setFaveIcon('');
  }, 3000);
  console.log(faveIcon);
};

4. Kullanıcıya düğmeyi sunabilmek için bir düğme bileşeni oluşturalım:

<button onClick={handleClick}>Smash that like button</button>

Bu kod parçacığı, düğmeye tıklandığında Fave İcon'un geçici olarak "like" simgesiyle değişeceğini ve ardından 3 saniye sonra varsayılan simgeye geri döneceğini gösterir.

5. Son olarak, Fave İcon'u güncellemek için head bileşenini kullanacağız ve önceki adımda oluşturduğumuz state'i dinamik olarak kullanacağız:

<head>
  {faveIcon ? (
    <link rel="icon" href={`/favicon-${faveIcon}.ico`} />
  ) : (
    <link rel="icon" href="/favicon.ico" />
  )}
</head>

Bu kod, Fave İcon state'i boşsa varsayılan favicon.ico'yu kullanacak, doluysa dinamik olarak faveIcon state değerine bağlı olarak favicon-like.ico'yu kullanacaktır.

Artık kullanıcılar sayfa içinde etkileşime geçtikçe Fave İcon'un güncellendiğini göreceksiniz.

Fave İcon Kullanım Senaryoları

Fave İcon, web sitelerinde birçok kullanım senaryosu için idealdir. İşte bazı popüler senaryolar:

• Marka kimliği: Özelleştirilmiş bir Fave İcon, markanızın güçlü bir görsel kimlik oluşturmasına yardımcı olabilir. Kullanıcılar, Fave İcon sayesinde sitenizi hızlı bir şekilde tanıyabilirler.

• Farklı sayfalar için farklı ikonlar: Farklı sayfaların farklı Fave İcon'ları olması, kullanıcılara gezindikleri sayfayı tanımlama konusunda daha fazla ipucu verir. Örneğin, bir e-ticaret sitesinde, sepet sayfasının Fave İcon'unun bir alışveriş sepeti şeklinde olması, kullanıcılara sayfanın amacını hızlıca anlatır.

• Dinamik güncellemeler: Özel durumlarda, Fave İcon'u kullanıcının etkileşimlerine veya sayfa olaylarına bağlı olarak dinamik olarak güncelleyebilirsiniz. Örneğin, bir bildirim sayfasındaki Fave İcon'un, kullanıcının yeni bildirim aldığında bildirim simgesine dönüşmesi gibi.

Fave İcon'un kullanımı özelleştirme ve etkileyici deneyimler sunma konusunda sınırsız olanaklar sunar.

Nexjs Hakkında Daha Fazla Bilgi

Nexjs, web için güçlü bir React çerçevesidir. Dinamik ve performanslı uygulamalar oluşturmanıza olanak sağlar. Nexjs, SSR (Sunucu Tarafı Rendeleme) ve SSR (İstemci Tarafı Rendeleme) gibi çeşitli özellikler sunar.

Daha fazla bilgi için Nexjs'in resmi belgelerini inceleyebilirsiniz: Nexjs Belgeleme

Nexjs İle Blog Oluşturma

Nexjs, bir blog oluşturmak için harika bir çerçeve sunar. Özellikle MDX dosyalarının kullanımıyla, içeriğinizi Markdown formatında oluşturabilir ve hızlı bir şekilde yayınlayabilirsiniz. Daha fazla bilgi için, Nexjs ile MDX destekli blog oluşturma makalesine göz atabilirsiniz.

Twitter ile Giriş Ekleme

Nexjs kullanarak web sitenize Twitter ile giriş özelliği eklemek için NextAuth.js'i kullanabilirsiniz. NextAuth.js, sosyal medya hesapları ve hizmet sağlayıcılarıyla oturum açma ve kimlik doğrulamayı basitleştiren bir kütüphanedir. Detaylı talimatlar için, Twitter ile Giriş Ekleme Kılavuzunu inceleyebilirsiniz.

Sonuç

Bu makalede, Nexjs'e özelleştirilmiş Fave İcon'lar eklemenin ve bunları dinamik olarak güncellemenin nasıl yapılacağını öğrendik. Fave İcon, web sitenizin kimliğini yansıtan küçük ama önemli bir detaydır. Özelleştirilmiş Fave İcon'lar, sitenizin profesyonel bir görünüm kazanmasına yardımcı olabilir ve kullanıcıların sitenizi tanımasını kolaylaştırabilir.

Özelleştirme ve dinamik güncellemeler gibi özelliklerle, Fave İcon'un kullanımı sınırsız olanaklar sunar. Nexjs, web uygulamalarınızı hızlı ve dinamik bir şekilde oluşturmanıza olanak tanırken, NextAuth.js ile sosyal medya hesaplarıyla giriş özelliği ekleyebilirsiniz. Web sitenizin kullanıcı deneyimini geliştirerek daha etkileyici bir yapı oluşturabilirsiniz.

Bu makalede öğrendiklerinizle, web projelerinizde Fave İcon kullanımına başlayabilir ve daha önce görmemiş olabileceğiniz özelleştirmeleri gerçekleştirebilirsiniz.