Next.js 15-fullstackwebapps · Lektion

Optimering af billeder og fonts

Optimér billeder med `next/image`, og håndtér fonts effektivt for at reducere indlæsningstider.

Lektion 2 af 411 trin

Optimering af billeder og fonts er en gratis Next.js 15-fullstackwebapps-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Next.js 15-fullstackwebapps, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Next.js 15-fullstackwebapps-kurset indeholder 4 lektioner i alt.

Hvorfor optimere billeder og skrifttyper?

Optimering af billeder og skrifttyper er afgørende for et websted, der indlæses hurtigt. Store filer gør din side langsommere og påvirker brugeroplevelsen og SEO.

Hurtigere indlæsning: Brugere behøver ikke vente på langsomme sider.
Forbedret SEO: Søgemaskiner foretrækker hurtigere websteder.
Bedre brugeroplevelse: En jævn og responsiv oplevelse.
Mindre båndbredde: Sparer data for brugerne.

Next.js Image-komponenten

Next.js tilbyder den effektive komponent next/image. Den optimerer automatisk billeder for dig og håndterer responsivitet, doven indlæsning og konvertering til moderne formater som WebP.

Ved at bruge next/image sikrer du, at dine billeder leveres på den mest effektive måde, ofte uden at du selv behøver at optimere dem manuelt.

Brug af Image-komponenten

For at bruge next/image skal du importere den og derefter definere billedets src, alt-tekst, width og height. width og height er afgørende for at forhindre forskydninger i layoutet (CLS).

import Image from 'next/image';

export default function MyImage() {
  return (
    <Image
      src="/my-photo.jpg"
      alt="A descriptive alt text"
      width={500}
      height={300}
    />
  );
}

Layouttilstande og responsivitet

next/image tilbyder forskellige layouttilstande, som styrer, hvordan billeder skaleres:

intrinsic (standard): Skalerer ned til mindre visningsområder, men ikke op ud over den oprindelige størrelse.
fixed: Billedet har en fast bredde og højde.
fill: Billedet udfylder sit overordnede element. Det er nyttigt til baggrundsbilleder, eller når billedets dimensioner er ukendte. Det kræver, at det overordnede element har position: relative.

Indlæsningsprioritet med `priority`

For billeder over folden (som er synlige, når siden indlæses første gang) bør du tilføje egenskaben priority. Det fortæller Next.js, at billedet skal forudindlæses, hvilket forbedrer målingen Largest Contentful Paint (LCP) for dit websted.

Brug kun priority til vigtige billeder som hero-bannere. Hvis du bruger den for meget, kan det ophæve fordelene.

import Image from 'next/image';

export default function HeroSection() {
  return (
    <Image
      src="/hero-banner.jpg"
      alt="Hero banner for the website"
      width={1200}
      height={600}
      priority
    />
  );
}

Behovet for optimering af skrifttyper

Brugerdefinerede skrifttyper kan påvirke ydeevnen betydeligt. Store skrifttypefiler betyder længere downloadtider, hvilket kan føre til »flash of unstyled text« (FOUT) eller »flash of invisible text« (FOIT).

Optimering af skrifttyper reducerer filstørrelsen og sikrer, at de indlæses problemfrit. Det forbedrer den visuelle oplevelse og forhindrer forskydninger i layoutet.

Google Fonts med `next/font`

Next.js 15 gør det nemmere at bruge Google Fonts med next/font/google. Skrifttyperne hostes automatisk på din egen server, layoutforskydninger (CLS) reduceres, og privatlivets fred forbedres, fordi direkte forespørgsler til Google undgås.

Importér den ønskede skrifttype, og anvend den derefter på dine HTML-elementer.

import { Inter } from 'next/font/google';

// Configure the Inter font
const inter = Inter({ subsets: ['latin'] });

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={inter.className}>
      <Component {...pageProps} />
    </main>
  );
}

Lokal hosting af skrifttyper

Til skrifttyper, du selv hoster (skrifttyper, du stiller til rådighed), skal du bruge next/font/local. Det giver dig mulighed for at samle dine skrifttypefiler direkte med din applikation, så du får fuld kontrol over leveringen af dem.

Definér kilden til din skrifttype, og anvend den på samme måde som Google Fonts.

import localFont from 'next/font/local';

// Configure a local custom font
const myCustomFont = localFont({ src: './my-custom-font.woff2' });

export default function MyPage() {
  return (
    <h1 className={myCustomFont.className}>
      My Custom Title
    </h1>
  );
}

Strategier til indlæsning af skrifttyper

Sådan optimerer du indlæsningen af skrifttyper yderligere:

display: swap: Denne CSS-egenskab viser reserve-tekst med det samme, mens den brugerdefinerede skrifttype indlæses, så »flash of invisible text« (FOIT) forhindres. next/font håndterer dette som standard.
Begræns skrifttyper: Medtag kun de tegn fra en skrifttype, som du har brug for, for at reducere filstørrelsen.
Forudindlæs vigtige skrifttyper: Overvej at forudindlæse dine vigtigste skrifttyper ved hjælp af <link rel="preload"> i dokumentets head.

Kontrol af billedoptimering

Hvilke af følgende er fordelene ved at bruge komponenten next/image i en Next.js-applikation?

Besvar den i den interaktive lektion

Opsummering: Optimeret til ydeevne

Flot arbejde! Du har lært, hvordan du kan forbedre din Next.js-apps ydeevne betydeligt ved at optimere billeder og skrifttyper.

Brug next/image til automatisk billedoptimering, doven indlæsning og forebyggelse af forskydninger i layoutet.
Brug egenskaben priority til vigtige billeder over folden.
Brug next/font/google og next/font/local til effektiv, selvhostet indlæsning af skrifttyper, som også forhindrer forskydninger i layoutet.

Disse metoder fører til hurtigere og mere brugervenlige applikationer.

Gratis at komme i gang

Lær TypeScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 12
Lektioner: 48

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Optimering af billeder og fonts” gratis?

Ja — alle 3 lektioner i læringssporet Next.js 15-fullstackwebapps, inklusive “Optimering af billeder og fonts”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Next.js 15-fullstackwebapps-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Optimering af billeder og fonts”?

Optimér billeder med `next/image`, og håndtér fonts effektivt for at reducere indlæsningstider. Du øver dig i Next.js 15-fullstackwebapps med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Next.js 15-fullstackwebapps?

Der kræves ingen tidligere erfaring. Next.js 15-fullstackwebapps på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “Optimering af billeder og fonts”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Next.js 15-fullstackwebapps-lektion?

Ja. Alle Next.js 15-fullstackwebapps-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Next.js 15-fullstackwebapps