Az App Router elnevezési szabályok szerinti fájlokból vagy a metadata objektumból is előállítja az ikonelemeket. Mindkét megoldás helyes, de egyértelmű szabály nélküli keverésük könnyen egymással versengő deklarációkat hoz létre.
Válaszd a fájlelnevezési szabályokat
Tedd a favicon.ico fájlt az app gyökerébe. A támogatott icon fájlok útvonalszegmensben is lehetnek, az apple-icon pedig az Apple-eszközöknek szánt ikont írja le.
A Next.js felismeri ezeket a fájlokat, meghatározza a hasznos attribútumokat, és hozzáadja a megfelelő link elemeket a head részhez. Egy szegmensbe helyezett ikon annak útvonalaira vonatkozik.
| Fájl | Hely | Feladat |
|---|---|---|
| favicon.ico | app/ | Webhelyszintű tartalék |
| icon.svg | app szegmens | Böngészőikon |
| apple-icon.png | app szegmens | Apple-ikon |
| manifest.webmanifest | app szegmens | Telepíthető alkalmazás jegyzéke |
Használj metaadatokat az explicit útvonalakhoz
Ha a fájlok a public mappában vagy képkiszolgálón vannak, add meg a metadata.icons értékét egy layout vagy page fájlban. Az icon, apple és szükség esetén shortcut bejegyzéseknél következetes URL-eket használj.
A gyermekszegmens metaadatai lecserélhetik a szülőtől örökölt összetett mezőket. Több útvonalon is ellenőrizd a végső head tartalmát; ne feltételezd, hogy minden szülőbejegyzés összeolvadt.
Igény szerint generált ikonhoz a Next.js az icon.tsx és icon.js fájlokat is támogatja. A függvény képadatokat ad vissza meghatározott mérettel és tartalomtípussal. Ezt valóban dinamikus grafikákhoz használd: a statikus fájlt egyszerűbb gyorsítótárazni, vizsgálni és különböző telepítésekben egységesen kiszolgálni.
Kapcsold össze a jegyzéket és az ikonjait
Statikus jegyzékfájl vagy manifest.ts függvény írhatja le az alkalmazás nevét, színeit és telepíthető ikonjait. A jegyzékikonok URL-jei legyenek nyilvánosak, és a megadott méretű fájlokra mutassanak.
Kezeld külön a jegyzék és a böngészőfül faviconjának szerepét: az 512×512-es telepítési ikon nem helyettesíti automatikusan az icon.svg vagy favicon.ico fájlt.
Tesztelj éles környezetben
Készíts éles buildet, nyiss meg minden érintett szegmensből egy útvonalat, és vizsgáld meg a link elemeket. Ezután közvetlenül nyisd meg az összes fájl URL-jét, és ellenőrizd, hogy a middleware nem téríti el őket.
Ha basePath vagy CDN van használatban, teszteld a létrejött URL-eket a telepített környezetben. A helyi működés nem mindig mutatja meg a hibás nyilvános alapútvonalat vagy átírási szabályt.
Elsődleges források
Gyakori kérdések
Kézzel kell megírni a link elemeket?
Nem. A fájlszabályok vagy a metadata.icons előállíthatják őket. Válassz egyértelmű, egyetlen hiteles forrást.
Hová kerüljön a favicon.ico?
App Router használatakor a favicon.ico fájlszabály az app könyvtár gyökerében támogatott.
A manifest.ts helyettesíti az icon.svg fájlt?
Nem. A jegyzék többek között telepíthető ikonokat ír le, az icon.svg pedig közvetlenül a böngésző ikonját adja.