App Router gali kurti piktogramų elementus pagal sutartinius failus arba metadata objektą. Abu būdai tinkami, tačiau juos maišant be aiškios taisyklės lengvai atsiranda konkuruojančių deklaracijų.
Pasirinkite sutartinius failus
Įkelkite favicon.ico į app šakninį katalogą. Palaikomi icon failai gali būti maršruto segmente, o apple-icon aprašo Apple įrenginiams skirtą piktogramą.
Next.js aptinka šiuos failus, nustato reikalingus atributus ir į head prideda atitinkamus link elementus. Segmente esanti piktograma taikoma to segmento maršrutams.
| Failas | Vieta | Paskirtis |
|---|---|---|
| favicon.ico | app/ | Svetainės atsarginė piktograma |
| icon.svg | app segmentas | Naršyklės piktograma |
| apple-icon.png | app segmentas | Apple piktograma |
| manifest.webmanifest | app segmentas | Diegimo manifestas |
Aiškius kelius nurodykite per metadata
Jei failai laikomi public kataloge ar vaizdų serveryje, išdėstyme arba puslapyje deklaruokite metadata.icons. Nurodykite icon, apple ir, jei reikia, shortcut, naudodami nuoseklius URL.
Antrinio segmento metaduomenys gali pakeisti sudėtinius laukus, paveldėtus iš pirminio segmento. Patikrinkite galutinį head keliuose maršrutuose, užuot manę, kad visi pirminio segmento įrašai buvo sujungti.
Pagal poreikį kuriamai piktogramai Next.js taip pat palaiko icon.tsx arba icon.js. Funkcija grąžina vaizdo duomenis su aiškiu dydžiu ir turinio tipu. Šį būdą palikite iš tikrųjų dinaminėms kompozicijoms: statinį failą paprasčiau išsaugoti podėlyje, patikrinti ir nuosekliai pateikti skirtinguose diegimuose.
Susiekite manifestą ir jo piktogramas
Statinis manifesto failas arba manifest.ts funkcija gali aprašyti programos pavadinimą, spalvas ir diegimo piktogramas. Manifesto piktogramų URL turi būti vieši ir nukreipti į nurodytų matmenų failus.
Nepainiokite manifesto paskirties su kortelės piktograma: 512×512 diegimo piktograma automatiškai nepakeičia icon.svg ar favicon.ico.
Patikrinkite gamybinę versiją
Sukurkite gamybinę versiją, atverkite po vieną maršrutą iš kiekvieno susijusio segmento ir patikrinkite link elementus. Tada tiesiogiai atverkite kiekvieno failo URL ir įsitikinkite, kad tarpinė programinė įranga jo neperima.
Jei naudojate basePath ar CDN, sugeneruotus URL tikrinkite paskelbtoje aplinkoje. Vietinis veikimas ne visada atskleidžia netinkamą viešąjį bazinį adresą ar perrašymo taisyklę.
Pirminiai šaltiniai
Dažniausi klausimai
Ar link elementus reikia rašyti ranka?
Ne. Juos gali sugeneruoti sutartiniai failai arba metadata.icons. Pasirinkite vieną aiškų pagrindinį deklaravimo būdą.
Kur dėti favicon.ico?
Naudojant App Router, favicon.ico failo taisyklė palaikoma app katalogo šaknyje.
Ar manifest.ts pakeičia icon.svg?
Ne. Manifestas, be kitų duomenų, aprašo diegimo piktogramas, o icon.svg tiesiogiai pateikia naršyklės piktogramą.