fix(homepage): add sizes prop to fill images and fix router.events deprecation
#358 opened on Apr 11, 2026
Repository metrics
- Stars
- (36 stars)
- PR merge metrics
- (PR metrics pending)
Description
Context
After upgrading homepage from Next.js 13.2.3 → 13.5.11 (PR #357), Lighthouse scores regressed:
| Metric | Before | After | Delta |
|---|---|---|---|
| Performance | 48 | 43 | −5 |
| Best Practices | 92 | 83 | −9 |
Root-cause analysis identified two code-level issues as the primary drivers.
Fix 1 — Add sizes prop to all fill images
Next.js ≥ 13.4 emits a console.warn whenever a fill image is missing the sizes prop.
Lighthouse's no-browser-errors audit treats console warnings as a Best Practices failure,
which explains the −9 pt drop from 92 → 83.
Affected files
| File | Issue |
|---|---|
src/components/banner.jsx:11 |
sizes="100vh" is a typo — should be 100vw |
src/components/imageAndText.jsx:11 |
fill with no sizes |
src/components/logo.jsx |
fill with no sizes |
src/components/section.jsx:14 |
fill with no sizes |
src/components/column.jsx:10 |
fill with no sizes |
src/components/cards/defaultCard.jsx:22 |
fill with no sizes |
sizes formula (Bootstrap grid)
Use the Bootstrap breakpoints to compute the right value per component:
(max-width: 576px) 100vw, (max-width: 992px) <sm-cols/12*100>vw, <lg-cols/12*100>vw
For example, imageAndText.jsx uses col-sm-5 col-lg-4:
sizes="(max-width: 576px) 100vw, (max-width: 992px) 42vw, 33vw"
Fix 2 — Replace router.events with asPath effect
_app.jsx:9-17 uses router.events which is deprecated in the Pages Router since Next.js 13.4,
and also has an existing react-hooks/exhaustive-deps lint warning on callback.
Replace with a useEffect keyed on router.asPath:
// Before
const useRouteChangeComplete = (callback) => {
const router = useRouter();
useEffect(() => {
router.events.on('routeChangeComplete', callback);
return () => router.events.off('routeChangeComplete', callback);
}, [router.events]);
};
// After (add useRef to imports)
const useRouteChangeComplete = (callback) => {
const { asPath } = useRouter();
const isMount = useRef(true);
useEffect(() => {
if (isMount.current) { isMount.current = false; return; }
callback(asPath);
}, [asPath, callback]);
};
Acceptance criteria
- No
console.warnfor missingsizesin browser DevTools on the homepage - Lighthouse Best Practices score returns to ≥ 92
- Lighthouse Performance score improves toward the 48 baseline
-
yarn lintpasses with no new warnings