Migrate nextjs from 13 to 16#1445
Conversation
useOptimistic requires a Suspense boundary and async transition context which caused React internal errors after upgrading to Next.js 14. useState is the correct primitive for storing async fetched search suggestions.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
AliKdhim87
force-pushed
the
migrate-nextjs-from-13-to-16
branch
from
413b4a1 to
1f0ff0f
Compare
AliKdhim87
force-pushed
the
migrate-nextjs-from-13-to-16
branch
from
04b8cb3 to
82ae234
Compare
AliKdhim87
force-pushed
the
migrate-nextjs-from-13-to-16
branch
from
82ae234 to
12a67a4
Compare
AliKdhim87
force-pushed
the
migrate-nextjs-from-13-to-16
branch
from
12a67a4 to
c79a4b1
Compare
Codecov Report❌ Patch coverage is
🚀 New features to boost your workflow:
|
AliKdhim87
force-pushed
the
migrate-nextjs-from-13-to-16
branch
from
c79a4b1 to
83999b0
Compare
AliKdhim87
force-pushed
the
migrate-nextjs-from-13-to-16
branch
from
83999b0 to
f127f77
Compare
There was a problem hiding this comment.
Moet er ergens nog een comment of wat documentatie of een tech debt issue wat deze patch doet en hoe je 'm moet onderhouden voor nieuwe versies van de open-forms-sdk?
There was a problem hiding this comment.
Ik heb all deze comment https://github.com/frameless/strapi/blob/migrate-nextjs-from-13-to-16/patches/%40open-formulieren__sdk%403.4.2.patch#L11 toegevoed. Moet ik nog ergens ook een issue aanmaken?
| @@ -1,3 +1,5 @@ | |||
| 'use client'; | |||
There was a problem hiding this comment.
Die use client is wel een beetje jammer, kunnen we niet zonder?
There was a problem hiding this comment.
De componenten Breadcrumb en Navigation worden nu aan de server-side in plaats van aan de client-side weergegeven, waarbij de mobiele versie via CSS in plaats van JavaScript wordt afgehandeld.
| loading="eager" | ||
| // Preserve aspect ratio when resizing via CSS (Next.js 16) | ||
| // https://nextjs.org/docs/app/api-reference/components/image | ||
| style={{ height: 'auto' }} |
There was a problem hiding this comment.
Is dit niet een CSP issue? Kan dit niet beter via .css?
| className={'utrecht-image utrecht-image--banner'} | ||
| // Preserve aspect ratio when resizing via CSS (Next.js 16) | ||
| // https://nextjs.org/docs/app/api-reference/components/image | ||
| style={{ height: 'auto', width: '100%' }} |
There was a problem hiding this comment.
Kan dit niet beter via de CSS van de component?
| @@ -75,13 +75,15 @@ | |||
| "@utrecht/multiline-data-css": "2.0.1", | |||
| "@utrecht/spotlight-section-css": "2.0.1", | |||
| "@utrecht/textbox-css": "3.0.1", | |||
There was a problem hiding this comment.
Het valt me op dat er een aantal @utrecht/ componenten bij devDependencies staan, maar eigenlijk moeten die bij dependencies
There was a problem hiding this comment.
These packages contain only SCSS/CSS source files. They are consumed via @use in SCSS at build time:
apps/pdc-frontend/src/components/OpenFormsEmbed/OpenFormsEmbed.scss
@use "~@utrecht/multiline-data-css/src/mixin" as multiline-data;
@use "~@utrecht/form-label-css/src/mixin" as form-label;
@use "~@utrecht/textbox-css/src/mixin" as textbox;
@use "~@utrecht/spotlight-section-css/src/mixin" as spotlight-section; Next.js compiles SCSS during next build and outputs plain CSS into .next/static/css/. Once built, the npm packages are no longer needed, the compiled CSS is what gets served to users. The packages never ship to or run in the browser.
| "codegen:docker": "graphql-codegen", | ||
| "clean": "rimraf build .next", | ||
| "build": "next build", | ||
| "build": "next build --webpack", |
There was a problem hiding this comment.
😭 webpack
Wat zou er moeten gebeuren om van --webpack af te komen? Een idee om een tech debt issue aan te maken?
There was a problem hiding this comment.
Ik heb het opgelost en nu gebruiken we alleen Turbopack!
AliKdhim87
force-pushed
the
migrate-nextjs-from-13-to-16
branch
from
cc44ce8 to
04bc01e
Compare
…d Breadcrumb
Navigation:
- Remove useScreenSize hook and mobileBreakpoint prop; render both desktop
list and mobile toggle always, controlled by CSS media query at 960px
- Use display:contents wrapper divs to avoid conflicts with Utrecht's own
display:flex on ButtonGroup elements
- Fix NavigationList silently dropping its own className when a className
prop was passed via ...restProps spread
- Fix utrecht-navigation__toggle-button--start-end (negative-margin icon
alignment) being placed on a display:contents wrapper where it had no effect
- Fix border tokens not applying on mobile by scoping border declarations
inside breakpoint("md")
- Fix :has() padding-inline-end rule by moving it from
.utrecht-navigation--mobile to .utrecht-navigation scoped to max-width:959px
- Fix NavigationLink :focus color being white; switch from
--utrecht-navigation-link-focus-color to --utrecht-navigation-link-focus-visible-color
to match the yellow focus-visible background
- Remove dynamic/ssr:false wrappers in pdc-frontend and vth-frontend;
remove mobileBreakpoint={961/998} from both layout files and Header
- Update tests: remove useScreenSize mock and screen-size assertions;
scope focus-trap assertions to within(dialog) to avoid duplicate text matches
Breadcrumb:
- Remove useScreenSize hook and breakpoint prop; render both mobile back-link
view and full breadcrumb always when backLink is provided, toggled by CSS
at min-width:361px using display:contents/none
- Remove dynamic/ssr:false wrappers in pdc-frontend and vth-frontend
NavigationList:
- Add padding-inline-start:1ch default indentation to sub-lists via
--utrecht-navigation-list-sub-list-padding-inline-start token
pdc-frontend:
- Fix --utrecht-page-padding-inline-start/end resetting to 0px in production
builds; raise specificity of .utrecht-pdc-theme to .utrecht-theme.utrecht-pdc-theme
so it always overrides @utrecht/design-tokens regardless of CSS chunk order
2 participants
UI improvements
Before:
Screen.Recording.2026-05-20.at.14.48.17.mov
After:
Screen.Recording.2026-05-20.at.14.48.39.mov
Before:
After: