← Tilbake til oversikten

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.

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.

Innhold

Del 1 — Lag undersider
Del 2 — Nye komponenter
Del 3 — Bilder
Del 4 — Navigering

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.)