feat(next15): upgrade to next 15

[adrianflatner]

Next 15 med SSR for ustøttede browsere

For å håndtere browsere som ikke støtter next 15 så har vi kommet fram til følgende løsning

Alle browsere under disse versjonene er ansett som ikke støttet:

const MIN_VERSIONS: { [key: string]: string } = {
    chrome: '60',
    firefox: '55',
    edge: '80',
    safari: '11.1',
}

1. De vil bli refreshet hvert 60' sek ved hjelp av meta-taggen.

{needsRefresh && <meta httpEquiv="refresh" content="60" />}

2. For å sørge for at de får data fra server må fetchQuery bli kalt i getServerSideProps. På den måten kan vi sende med en fallbackData inn i useSwr. Dette gjør at funksjonen ikke lenger trenger å gjøre noe på klientsiden for å vise frem data 🍾

Av en eller annen grunn fungerer det ikke å hente graphql-quieries på som blir generert med yarn generate når man skal bruke de serverside. Dette gjør at jeg måtte lage de selv uten new TypedDocumentString i en egen fil tavla/src/Shared/graphql/ssrQueries.ts. Gjerne se på om det finnes alternative måter å gjøre det på!

Migrerer til next 15

• Bruker next sin guide for å migrere.

[!IMPORTANT]
Må testes godt før merge🧪

Nøkkeleendringer

• React 19 med useActionState
• Async Request API med en del ny syntax
• Strengere og bedre errorhåndtering. Dette gjør at det er en del fixes som må gjøres. Blant annet er det en del ting i designsystemet som ikke støttes lengre.

Håndtering av breaking changes

• Tooltip fra designsystemet har sideeffects som gjør at id-er endrer navn etter content er hentet fra server. Det gir en errormelding i next. Dette håndteres ved å sørge for at Tooltip bare rendres på client. Tooltip wrappes derfor i <ClientOnlyComponent>. Eksempel:

 <ClientOnlyComponent>
                <Tooltip content="Administrer merkelapper" placement="bottom">
                    <IconButton
                        aria-label="Administrer merkelapper"
                        onClick={open}
                    >
                        <ReferenceIcon />
                    </IconButton>
                </Tooltip>
            </ClientOnlyComponent>

• Det samme problemet dukker opp i <TextField>. Her har jeg midlertidig laget et nytt komponent <ClientOnlyTextField> som også er wrappet i <ClientOnlyComponent>.

[!NOTE]
Disse endringene er foreløpige, mens designsystemet ikke støtter denne typen sideeffects. Det at komponentene nå bare lastes på client, gjør at de er treigere ved reload av siden, men prefetches fortsatt ved navigering fra annen side.

[SelmaBergstrand]

Min chromium går bare i hvitt 🤔 mulig det bare er noe galt med min setup hvis det funker for deg

[emilielr]

Jeg har testa og det ser bra ut for meg! Fint om andre tester og da, ganske stor endrings-PR

[SelmaBergstrand]

🥳 🔥 🎆