App Router, standart dosya adları veya metadata nesnesi üzerinden simge öğeleri üretebilir. Her iki yaklaşım da geçerlidir, ancak açık bir kural olmadan bunları karıştırmak kolayca birbiriyle yarışan tanımlar oluşturabilir.
Dosya kurallarını seçin
favicon.ico dosyasını app köküne yerleştirin. Desteklenen icon dosyaları bir rota segmentinde bulunabilir; apple-icon ise Apple cihazlarına yönelik simgeyi tanımlar.
Next.js bu dosyaları algılar, gerekli özellikleri belirler ve ilgili link öğelerini head bölümüne ekler. Bir segmente yerleştirilen simge, o segmentteki rotalara uygulanır.
| Dosya | Konum | Amaç |
|---|---|---|
| favicon.ico | app/ | Site yedeği |
| icon.svg | app segmenti | Tarayıcı simgesi |
| apple-icon.png | app segmenti | Apple simgesi |
| manifest.webmanifest | app segmenti | Kurulabilir uygulama manifesti |
Açık yollar için metadata kullanın
Dosyalar public içinde veya bir görsel sunucusunda bulunuyorsa layout ya da page içinde metadata.icons tanımlayın. Tutarlı URL'ler kullanarak icon, apple ve gerektiğinde shortcut belirtin.
Alt segmentteki metadata, üst segmentten devralınan birleşik alanların yerini alabilir. Üst segmentteki her kaydın birleştirildiğini varsaymak yerine birkaç rotada son head içeriğini inceleyin.
İstek üzerine üretilen simgeler için Next.js, icon.tsx veya icon.js dosyalarını da destekler. Fonksiyon, açık boyut ve içerik türüyle görsel verisi döndürür. Bu yaklaşımı gerçekten dinamik çizimler için saklayın: statik dosyayı önbelleğe almak, incelemek ve dağıtımlar arasında tutarlı sunmak daha kolaydır.
Manifesti ve simgelerini bağlayın
Statik manifest dosyası veya manifest.ts fonksiyonu uygulama adını, renklerini ve kurulabilir simgelerini tanımlayabilir. Manifest simgelerinin URL'leri herkese açık olmalı ve belirtilen boyutlardaki dosyalara işaret etmelidir.
Manifestin görevini sekme favicon'undan ayrı tutun: 512×512 kurulum simgesi, icon.svg veya favicon.ico dosyasının yerini otomatik almaz.
Üretim ortamında test edin
Üretim derlemesi çalıştırın, etkilenen her segmentten bir rota açın ve link öğelerini inceleyin. Ardından her dosyanın URL'sini doğrudan açın ve middleware tarafından engellenmediğini doğrulayın.
basePath veya CDN kullanıyorsanız üretilen URL'leri dağıtılmış ortamda test edin. Yerel davranış, yanlış herkese açık temel yolu veya yeniden yazma kuralını her zaman ortaya çıkarmaz.
Birincil kaynaklar
Sık sorulan sorular
Link öğelerini elle yazmak gerekir mi?
Hayır. Dosya kuralları veya metadata.icons bunları üretebilir. Tek ve açık bir tanım kaynağı seçin.
favicon.ico nereye yerleştirilmeli?
App Router'da favicon.ico kuralı, app dizininin kökünde desteklenir.
manifest.ts, icon.svg yerine geçer mi?
Hayır. Manifest, diğer verilerin yanında kurulabilir simgeleri tanımlar; icon.svg ise doğrudan tarayıcı simgesini sunar.