Eksempel på en enkel statisk-generert side

Statisk-generert side

Sider i NextJs er hovedsaklig basert på mappetrukturen i koden din. I et gitt NextJs-prosjekt vil du finne en mappe som heter pages og alt under her vil tilsvare faktiske sider. Et eksempel på et oppsett av en side-fil (med Typescript) kan se sånn her ut.

1import {GetStaticPropsContext, GetStaticPropsResult, InferGetStaticPropsType} from "next";
2
3type StaticPropsType = { bananer: string }
4
5export const getStaticProps = async (context: GetStaticPropsContext): Promise<GetStaticPropsResult<StaticPropsType>> => {
6  return {
7    props: {
8      bananer: "I lange baner"
9    },
10    revalidate: 60
11  }
12};
13
14
15export default function EksempelSide(props: InferGetStaticPropsType<typeof getStaticProps>) {
16  return (<pre>
17    {JSON.stringify(props, undefined, 4)}
18  </pre>)
19}

Denne kan for eksempel ligge under pages/index.tsx og da vil det tilsvare forsiden din.

Funksjonen getStaticProps er en spesiell funksjon som NextJs kjører under bygget til prosjektet. Det vil si at når prosjektet bygges til produksjon vil NextJs kalle hver av disse funksjonene (altså alle under /pages) og lagre resultatet. Dette resultatet sendes så videre til JSX-en man definerer som en “default export”. Altså det du finner under “EksempelSide“. Da får man som resultat en ferdig generert statisk side. Denne er lynrask for en bruker å hente og lett for en søkemotor å indeksere.