Next.js 15 fullstack (App Router + Server Actions) · Lektion

Styla er Next.js-app

Lägg till stilar i en Next.js 15-applikation med global CSS, CSS Modules och Tailwind CSS i App Router.

Lektion 4 av 413 steg

Styla er Next.js-app är en gratis lektion i Next.js 15 fullstack (App Router + Server Actions) på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Next.js 15 fullstack (App Router + Server Actions), och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Next.js 15 fullstack (App Router + Server Actions) innehåller totalt 4 lektioner.

Översikt över stylingalternativ

Next.js har stöd för flera stylingmetoder direkt från början: global CSS, lokalt begränsade CSS Modules, utility-first Tailwind och CSS-in-JS-bibliotek.

Global stilmall

Global CSS importeras en gång i root-layouten och används på alla sidor — perfekt för resets och grundläggande typografi.

import "./globals.css";
export default function RootLayout({ children }) {
  return (<html lang="en"><body>{children}</body></html>);
}

CSS Modules för avgränsning

En CSS Module (x.module.css) genererar lokalt begränsade klassnamn, så komponenternas stilar läcker aldrig in i varandra.

import styles from "./button.module.css";
export default function Button() {
  return <button className={styles.primary}>Click</button>;
}

I modulfilen

I en modul skriver ni klassnamn som vanligt — Next.js hashar dem vid byggtillfället för att hålla dem unika.

.primary {
  background: rebeccapurple;
  color: white;
  padding: 8px 16px;
}

Tailwind CSS

Tailwind ger er utility-klasser som ni kombinerar direkt i er markup. Det är det vanligaste stylingvalet i moderna Next.js-appar.

export default function Card() {
  return <div className="rounded-lg bg-white p-4 shadow">Hello</div>;
}

Konfigurera Tailwind

För att konfigurera Tailwind installerar ni det och lägger till dess tre direktiv i den globala stilmallen, så att utility-klasserna blir tillgängliga.

@tailwind base;
@tailwind components;
@tailwind utilities;

Villkorsstyrda klasser

Växla klasser utifrån tillstånd för villkorsstyrd styling. En hjälpfunktion som clsx håller logiken ren och lättläst.

import clsx from "clsx";
<button className={clsx("btn", isActive && "btn-active")} />

Teckensnitt med next/font

Modulen next/font hostar teckensnitt lokalt utan layoutförskjutningar och utan extra begäran till en teckensnittsleverantör — högpresterande typografi utan extra ansträngning.

import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"] });

Styling på servern och klienten

Global CSS och CSS Modules fungerar i Server Components. Vissa CSS-in-JS-bibliotek behöver en Client Component-gräns eller särskild konfiguration.

Responsiv design

Tailwinds responsiva prefix, som md: och lg:, tillämpar stilar vid brytpunkter och gör mobile-first-layouter enkla att skapa.

<div className="text-sm md:text-base lg:text-lg">Responsive text</div>

Välja metod

Välj utifrån behov: CSS Modules för isolerade komponenter, Tailwind för snabb utility-driven UI och global CSS för resets och grundläggande typografi.

Snabb kontroll

Vad ger en CSS Module er som en global stilmall inte gör?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Sammanfattning: Styling i Next.js omfattar global CSS, lokalt begränsade CSS Modules och Tailwind-utilities, samt next/font för snabb typografi och responsiva brytpunkter.

Gratis att börja

Lär dig TypeScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 22
Lektioner: 88

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Styla er Next.js-app” gratis?

Ja – hela texten till ”Styla er Next.js-app” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Next.js 15 fullstack (App Router + Server Actions), kan Ni uppgradera till CoddyKit PRO. Kursen i Next.js 15 fullstack (App Router + Server Actions) innehåller totalt 4 lektioner.

Vad lär jag mig i ”Styla er Next.js-app”?

Lägg till stilar i en Next.js 15-applikation med global CSS, CSS Modules och Tailwind CSS i App Router. Ni övar på Next.js 15 fullstack (App Router + Server Actions) med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Next.js 15 fullstack (App Router + Server Actions)?

Du behöver inga förkunskaper. Utbildningen i Next.js 15 fullstack (App Router + Server Actions) på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”Styla er Next.js-app”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Next.js 15 fullstack (App Router + Server Actions)-lektionen?

Ja. Varje Next.js 15 fullstack (App Router + Server Actions)-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Next.js 15 fullstack (App Router + Server Actions)