ocftw/open-star-ter-village

fix(homepage): add sizes prop to fill images and fix router.events deprecation

Open

#358 opened on Apr 11, 2026

View on GitHub
 (1 comment) (0 reactions) (0 assignees)TypeScript (13 forks)github user discovery
enhancementhelp wanted

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.warn for missing sizes in browser DevTools on the homepage
  • Lighthouse Best Practices score returns to ≥ 92
  • Lighthouse Performance score improves toward the 48 baseline
  • yarn lint passes with no new warnings

Contributor guide