High CLS caused by Next.js router navigation due to layout shift between short and long pages

[yanghoxom]

I'm encountering a high Cumulative Layout Shift (CLS) score on my Next.js website, and it seems to be related to how next/router handles client-side navigation.

Since Next.js uses client-side routing with next/router, navigating between pages doesn't trigger a full reload. This creates a problem when switching from a page with short content (where the footer is visible in the first viewport) to a page with longer content (where the footer is pushed far down).

The browser sees this as a significant layout shift — the footer appears in one position initially, then jumps out of view as the longer content loads, which increases the CLS score.

Has anyone faced a similar issue? Is there a best practice or workaround to prevent this CLS increase during navigation?

Thanks in advance!

I used this code to check CLS when navigate

    new PerformanceObserver((entryList) => {
      for (const entry of entryList.getEntries()) {
        console.log('Layout shift:', entry);
      }
    }).observe({ type: 'layout-shift', buffered: true });

and, when I go to long page from short page, I got this

{
    "name": "",
    "entryType": "layout-shift",
    "startTime": 4810.799999999814,
    "duration": 0,
    "value": 0.48425787106446777,
    "hadRecentInput": true,
    "lastInputTime": 4293.700000000186,
    "sources": [
        {
            "previousRect": {
                "x": 0,
                "y": 344,
                "width": 375,
                "height": 209,
                "top": 344,
                "right": 375,
                "bottom": 553,
                "left": 0
            },
            "currentRect": {
                "x": 0,
                "y": 0,
                "width": 0,
                "height": 0,
                "top": 0,
                "right": 0,
                "bottom": 0,
                "left": 0
            }
        },
        {
            "previousRect": {
                "x": 0,
                "y": 520,
                "width": 375,
                "height": 147,
                "top": 520,
                "right": 375,
                "bottom": 667,
                "left": 0
            },
            "currentRect": {
                "x": 0,
                "y": 0,
                "width": 0,
                "height": 0,
                "top": 0,
                "right": 0,
                "bottom": 0,
                "left": 0
            }
        }
    ]
}