next/image არის Next.js-ის <img> ტეგის ოპტიმიზებული ჩანაცვლება. ის ავტომატურად აერთებს სურათის ფუნქციონირების საუკეთესო პრაქტიკის რაოდენობას, რომელსაც წინააღმდეგ შემთხვევაში ხელით დაასრულებდით.
tsx
;
() {
(
);
}
next/image არის Next.js-ის <img> ტეგის ოპტიმიზებული ჩანაცვლება. ის ავტომატურად აერთებს სურათის ფუნქციონირების საუკეთესო პრაქტიკის რაოდენობას, რომელსაც წინააღმდეგ შემთხვევაში ხელით დაასრულებდით.
;
() {
(
);
}
srcset — ქმნის მრავალ ზომას ისე, რომ თითოეული მოწყობილობა სწორი ჩამოტვირთავს.priority -ით).width/height (ან fill) დაისახელა სივრცე ისე, რომ გვერდი არ გადახტება სურათის ჩატვირთვისას.placeholder="blur" აჩვენებს პატარა ბუნდოვან გადახედვას ჩატვირთვის დროს.<div style={{ position: "relative", height: 300 }}>
<Image src="/hero.jpg" alt="" fill style={{ objectFit: "cover" }} />
</div>
გამოიყენეთ fill (ფიქსირებული სიგანე/სიმაღლის ნაცვლად) როდესაც სურათი უნდა შეავსოს მისი განთავსებული მშობელი — ჩვენ hero/cover სურათებისთვის.
// next.config.js — allowlist remote hosts for security
module.exports = { images: { remotePatterns: [{ hostname: "cdn.example.com" }] } };
სურათები ჩვეულებრივ გვერდის ყველაზე მძიმე ქონებაა და Core Web Vitals-ის (LCP, CLS) ცუდი მიზეზი. next/image ავტომატურად ცვლის ზომას, თანამედროვე ფორმატებს, რეაქტიულ srcset -ს, ნუში ჩატვირთვას და განლაგების ცვლა თავიდან ასაცილებელს — ტრান ფერმაციის ძირითადი ამოცანა მარტივ კომპონენტად, LCP სურათის priority იყო ერთ კამეტე, რომელიც უნდა დაიმახსოვროთ.