Next.js 15 for fullstack-webapper · leksjon

CSS Modules og globale stiler

Organiser stilene Deres med CSS Modules for lokalt omfang, og håndter globale stiler effektivt.

Leksjon 1 av 411 trinn

CSS Modules og globale stiler er en gratis leksjon i Next.js 15 for fullstack-webapper på CoddyKit. Dette er leksjon 1 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Next.js 15 for fullstack-webapper, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Next.js 15 for fullstack-webapper inneholder totalt 4 leksjoner.

Slik utformer De stilene i Next.js-appen

Velkommen til styling i Next.js! Det er avgjørende for alle webapplikasjoner å lage visuelt tiltalende og brukervennlige grensesnitt.

Next.js tilbyr kraftige og fleksible måter å håndtere stiler på, fra enkle globale stilark til komponentspesifikke løsninger. I denne leksjonen utforsker vi to grunnleggende metoder: CSS Modules og globale stiler.

Problemet med global CSS

I tradisjonell webutvikling er alle CSS-stiler ofte globale. Dette kan føre til flere problemer:

Navnekonflikter: To forskjellige deler av applikasjonen kan bruke samme klassenavn, noe som fører til utilsiktede overstyringer av stiler.
Vanskelig vedlikehold: Hvis De endrer en stil på ett sted, kan De ved et uhell ødelegge oppsettet eller utseendet et annet sted.
Manglende isolasjon: Stilene er ikke direkte knyttet til komponentene de påvirker, noe som gjør dem vanskeligere å forstå og administrere.

CSS Modules ble laget for å løse disse problemene!

Hva er CSS Modules?

CSS Modules er en måte å avgrense CSS lokalt på ved å opprette unike klassenavn automatisk. Det betyr at stiler som er definert i én CSS Module-fil, bare gjelder for komponenten som importerer filen.

Viktige fordeler:

Ingen konflikter: Unike klassenavn forhindrer utilsiktede overstyringer.
Komponentisolasjon: Stilene kapsles inn i komponentene de tilhører.
Enklere vedlikehold: De kan trygt endre stiler uten å bekymre Dem for bivirkninger.

Opprette en CSS Module-fil

For å opprette en CSS Module i Next.js navngir De ganske enkelt CSS-filen med filtypen .module.css. Hvis De for eksempel skal utforme en knapp, kan De opprette Button.module.css.

Slik kan en enkel CSS Module se ut:

// app/ui/Button.module.css
.primaryButton {
  background-color: #0070f3;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
}

.primaryButton:hover {
  background-color: #0056b3;
}

Bruke en CSS Module i React

Når De har en .module.css-fil, kan De importere den i alle React-komponenter. Next.js behandler deretter stilene og gjør dem tilgjengelige som et JavaScript-objekt.

Klassenavnene som er definert i CSS Modulen, blir egenskaper i dette importerte objektet. .primaryButton blir for eksempel til styles.primaryButton.

Prøv å kjøre dette eksempelet for å se hvordan en komponent importerer og bruker en CSS Module. Selve stilene brukes av Next.js under byggeprosessen.

// app/ui/PrimaryButton.js
import styles from './Button.module.css'; // Imports the CSS Module

export default function PrimaryButton({ text }) {
  return (
    // 'styles.primaryButton' uses the class from Button.module.css
    <button className={styles.primaryButton}>
      {text}
    </button>
  );
}

// How this component would be used in app/page.js:
// import PrimaryButton from './ui/PrimaryButton';
//
// export default function HomePage() {
//   return (
//     <div>
//       <h1>My App</h1>
//       <PrimaryButton text="Click Me" />
//     </div>
//   );
// }

Globale stiler i Next.js

CSS Modules passer godt til styling på komponentnivå, men noen stiler må gjelde universelt i hele applikasjonen. Disse kalles globale stiler.

Globale stiler brukes til:

CSS-nullstillinger (for eksempel for å normalisere standardinnstillinger i nettleseren).
Grunnleggende typografi (for eksempel standard skrifttype og linjehøyde for body).
Oppsettsstiler som påvirker hele sidestrukturen.
Hjelpeklasser som faktisk skal være globale (for eksempel .hidden).

Implementere globale stiler

I Next.js 15 med App Router importeres globale stiler vanligvis i rotfilen app/layout.js. Dette sikrer at de er tilgjengelige for alle sider og komponenter i applikasjonen.

Opprett først en global CSS-fil, vanligvis kalt globals.css, i app-mappen:

// app/globals.css
html, body {
  padding: 0;
  margin: 0;
  font-family: system-ui, sans-serif;
  background-color: #f8f8fa;
  color: #333;
}

h1 {
  color: #1a1a1a;
  font-size: 2em;
  margin-bottom: 0.5em;
}

Importer den deretter i app/layout.js for å bruke disse stilene i hele applikasjonen:

// app/layout.js
import './globals.css'; // Import global styles

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children} {/* All pages will be rendered within this layout */}
      </body>
    </html>
  );
}

// A page (app/page.js) would then automatically inherit these styles:
// export default function HomePage() {
//   return (
//     <main>
//       <h1>Hello, Global Styles!</h1>
//       <p>This text uses the font and color defined in globals.css.</p>
//     </main>
//   );
// }

CSS Modules kontra globale stiler: Anbefalte fremgangsmåter

Å vite når De bør bruke hver stylingmetode, er avgjørende for en velorganisert Next.js-applikasjon:

Bruk CSS Modules til: Komponentspesifikke stiler. Hvis en stil tilhører én enkelt komponent (for eksempel en knapp, et kort eller et navigasjonselement), bør den sannsynligvis ligge i en CSS Module.
Bruk globale stiler til: Standardinnstillinger for hele applikasjonen, nullstillinger, grunnleggende typografi og hovedstrukturer for oppsettet. Dette gjelder stiler som faktisk påvirker alle deler av appen eller etablerer et grunnlag.

Ved å kombinere begge tilnærmingene får De en kraftig og vedlikeholdbar måte å utforme stilene på.

Kombinere stiler og spesifisitet

Noen ganger kan De ha behov for å bruke flere stiler eller betingede stiler. De kan kombinere CSS Module-klasser med vanlige globale klasser eller til og med innebygde stiler:

import styles from './MyComponent.module.css';

function MyComponent({ isActive }) {
  const activeClass = isActive ? 'global-active-class' : '';
  return (
    <div className={`${styles.container} ${activeClass}`} >
      ... 
    </div>
  );
}

Husk at reglene for CSS-spesifisitet fortsatt gjelder. Mer spesifikke selektorer (for eksempel ID-er og innebygde stiler) overstyrer mindre spesifikke selektorer (for eksempel klassenavn).

Rask kontroll av stiler

Hvilke av de følgende påstandene om styling i Next.js er SANNE?

Besvar den i den interaktive leksjonen

Oppsummering: Styling for å lykkes

Du har lært det grunnleggende om styling i Next.js 15!

CSS Modules gir lokalt omfang og løser problemet med global CSS ved hjelp av unike klassenavn for komponentspesifikk styling.
Globale stiler brukes for standardinnstillinger, tilbakestillinger og grunnleggende oppsett som gjelder hele applikasjonen, og importeres vanligvis i app/layout.js.

Ved å kombinere disse to kraftige metodene på en effektiv måte kan du bygge vedlikeholdbare og skalerbare Next.js-applikasjoner med et visuelt helhetlig uttrykk. Fortsett å øve, så kan du få brukergrensesnittene dine til å skinne!

Gratis å komme i gang

Lær deg TypeScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 12
Leksjoner: 48

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «CSS Modules og globale stiler» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Next.js 15 for fullstack-webapper, inkludert «CSS Modules og globale stiler», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Next.js 15 for fullstack-webapper inneholder totalt 4 leksjoner.

Hva lærer jeg i «CSS Modules og globale stiler»?

Organiser stilene Deres med CSS Modules for lokalt omfang, og håndter globale stiler effektivt. Du øver på Next.js 15 for fullstack-webapper med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Next.js 15 for fullstack-webapper?

Ingen tidligere erfaring er nødvendig. Next.js 15 for fullstack-webapper på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «CSS Modules og globale stiler»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Next.js 15 for fullstack-webapper-leksjonen?

Ja. Alle Next.js 15 for fullstack-webapper-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Next.js 15 for fullstack-webapper