В скарбничку багів та дитячих хвороб Next.JS на page* роутері

Маємо дуже простий React код:

const { query } = useRouter();
return <>
  {query.id ? 'HELLO': 'ERROR'}
</>

Звичайними словами - якщо в URL є id з якимось значенням - виведи HELLO, якщо немає - виведи ERROR

Тепер питання, що буде виведено на екран протягом наступної секунди, якщо ваш користувач зайде на URL:
/?id=test

Спочатку дайте відповідь собі і напишіть у коментарях, а потім заглядайте:

Спочатку виведеться ERROR
Потім екран оновиться і виведеться HELLO

Це відбувається тому, що в Next.JS router має ще один прапорець - isReady, який потрібно перевіряти перед тим як звертатися до роутера. Поки він не ready - там може не бути тих значень на які ви очікуєте. І це відбувається незважаючи на те, що URL та всі дані в ньому вже існують під час обробки запиту на сервері.

* На щастя, в новому app роутері цю проблему вже вирішили. Для цього знадобилося усього 13 мажорних релізів :)