← Tilbake til oversikten

Node + npm + Next + React (enkel start i VS Code)

Installer Node, bruk npx create-next-app for å lage prosjekt, og bygg egne Header- og Footer-komponenter i Next.js.

Trinn 1 — Forberedelser

  • 1.1Installer Node LTS fra nodejs.org.
  • 1.2Lag en tom mappe på skrivebordet (f.eks. web-prosjekter) og dra mappen inn i VS Code.
  • 1.3Åpne terminalen i VS Code: Ctrl + ` (backtick).
  • 1.4Test installasjonen:
node -v
npm -v

Hvis du får versjonsnumre (f.eks. v20.x og 10.x), er alt klart.

Trinn 2 — Lag første Next.js-prosjekt

  • 2.1Med mappen fra

    1.2

    åpen i VS Code-terminalen, gå til "Terminal" og "New Terminal", skriv inn:
npx create-next-app my-first-app

Du kan bruke eget navn, men kun små bokstaver (f.eks. npx create-next-app my-first-project).


  • 2.2Velg disse svarene for enklest mulig start:
✔ Would you like to use TypeScript?        No
✔ Would you like to use ESLint?            Yes
✔ Would you like to use Tailwind CSS?      No (kan være Yes hvis du vil)
✔ Would you like to use `src/` directory?  No
✔ Would you like to use App Router?        Yes
✔ Would you like to customize import alias? No
  • 2.3Høyreklikk på prosjekt-mappen din (f. eks my-first-app ) i VSC og velg "Open in Integrated Terminal" eller bruk cd. Start dev-serveren med kommandoen: 
npm run dev

Åpne http://localhost:3000 i nettleseren – du skal nå se Next.js sin velkomstside (React kjører 🎉).

OBS: Dersom dette ikke fungerte har du ikke stått i riktig mappe da du kjøte npm run dev.

Trinn 3 — Lag egne komponenter

Lag en ny mappe components inni prosjektet ditt. Opprett Header.js og Footer.js inni denne mappen.

A) Header.js

Kopier koden under inn i filen og lagre filen. Du har nå laget din første Javascript-funksjon.

export default function Header() {
  return (
    <header style={{ background: "#000", color: "#fff", padding: "12px 0" }}>
      <div style={{ maxWidth: "1024px", margin: "0 auto", padding: "0 16px" }}>
        Ditt React-prosjekt
      </div>
    </header>
  );
}
B) Footer.js
export default function Footer() {
  return (
    <footer style={{ background: "#000", color: "#fff", padding: "12px 0", textAlign: "center" }}>
      © 2025 – Mitt første React-prosjekt
    </footer>
  );
}
C) Bruk komponentene i app/layout.js

Erstatt all koden i filen med koden under:

import "./globals.css";
import Header from "../components/Header";
import Footer from "../components/Footer";

export const metadata = {
  title: "Mitt første React-prosjekt",
  description: "Next.js + React - test",
};

export default function RootLayout({ children }) {
  return (
    <html lang="no">
      <body>
        <Header />
        <main style={{ background: "#fff", minHeight: "90vh", padding: "24px 0", color: "#111" }}>
          {children}
        </main>
        <Footer />
      </body>
    </html>
  );
}
D) Oppdater app/page.js

Erstatt all koden i filen med koden under:

export default function Home() {
  return (
    <section style={{ maxWidth: "1024px", margin: "0 auto", padding: "0 16px" }}>
      <h1>Velkommen til ditt første React-prosjekt</h1>
      <p>Dette er startsiden i Next.js (React).</p>
    </section>
  );
}
Kjør igjen: npm run dev → åpne localhost:3000. Du skal nå se svart header, hvit body og svart footer.

Trinn 4 — Endre globals.css

Next.js-prosjektet har en fil som heter globals.css i app/-mappen. Dette er global styling som gjelder for hele appen.

A) Åpne filen

Åpne: app/globals.css

B) Slett alt og lim inn dette:
/* Nullstill margin/padding */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Sett base-font */
body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #f7f7f7;
  color: #111;
  line-height: 1.5;
}

/* Overskrifter */
h1, h2, h3 {
  font-weight: 600;
  margin-bottom: 12px;
}

/* Standard spacing for seksjoner */
section {
  margin-bottom: 32px;
}

Når du lagrer filen, vil siden oppdatere automatisk (hot reload). Hele appen får nå bedre marginer, font og bakgrunn.

Feilsøking