← Tilbake

Oppgave: Utvid Next + React-prosjektet

Du skal bygge videre på my-first-app og gjøre det til en liten nettside med flere sider, komponenter, bilder og navigering.

Sentrale konsepter

Komponenter

Gjenbrukbar UI

Bygg sider av små deler som kan brukes flere steder.

Routing

Flere sider

I Next.js blir mapper og filer automatisk til URL-er.

Verktøy

Node + npm

Utviklingsserver, pakker og bygg skjer via terminalen.

Mål for oppgaven

  • Lag minst 3 undersider (routes) i Next.js.
  • Lag minst 3 nye komponenter og bruk dem på flere sider.
  • Sett inn minst 2 bilder på nettsiden.
  • Lag en enkel navigering (meny) som fungerer mellom sidene.

Del 1 — Lag undersider

Du skal lage flere sider i Next (App Router). Lag disse filene:

  • 1.1app/about/page.js (Om meg / Om prosjektet)
  • 1.2app/gallery/page.js (Bilder / galleri)
  • 1.3app/contact/page.js (Kontakt / skjema-tekst)
Tips: Hver side bør ha en <h1>, en kort tekst og gjerne en liste med innhold.

Del 2 — Nye komponenter

Lag minst 3 nye komponenter i components/. Velg f.eks. disse:

  • 2.1components/Nav.js (meny med lenker)
  • 2.2components/Card.js (gjenbrukbar “kort”-boks)
  • 2.3components/Hero.js (stor toppseksjon på forsiden)
Krav: Minst én av komponentene må brukes på minst to ulike sider.

Del 3 — Bilder

Legg inn minst 2 bilder i prosjektet.

  • 3.1Lag mappe: public/images
  • 3.2Legg inn 2 bildefiler (f.eks. skog.jpg og by.jpg)
  • 3.3Vis bildene på /gallery-siden

Du kan bruke vanlige <img> for enkelhet.

<img
  src="/images/skog.jpg"
  alt="Skog"
  style={{ width: "100%", maxWidth: "600px", borderRadius: "12px" }}
/>

Del 4 — Navigering

Lag en enkel meny slik at man kan klikke seg mellom sidene.

  • 4.1Lag components/Nav.js med lenker til: /, /about, /gallery, /contact
  • 4.2Bruk menyen i app/layout.js (slik at den vises på alle sider)
Tips: Bruk <a href="/about"> for enkel start. (Senere kan dere lære Link.)