szQocks

при изменении зависимостей, создаётся новая функция в useCallback, в котором создаётся ссылка на новый интервал, ссылка на старый интервал - потеряна

если переменную interval заменить на ref, то всё сработает, но лучше бы - логику по интервалу вынести в useEffect, а в handlePlay - менять только флаг стейта

если юзаешь next 13 + с app директорией, забудь про всякие getStaticProps и getServerSideProps

в 13 нексте, там все компоненты по умолчанию - серверные, а в серверных компонентах доступен расширенный fetch через которые и получаешь данные где хочешь + это и есть грубо говоря твои новые getStaticProps и getServerSideProps, и самый прикол в том что и в клиентских и в серверных компонентах на выходе получаешь уже отрисованный html

на уровне app/blog - можешь создать layout.tsx, а все вложенные папки это и будут children которые попадают в этот layout.tsx - типа вложенных страниц, но на самом деле не так, layout.tsx - это просто обёртка

const BlogLayout = ({ children }) => {
    return (
        <section>
            <SomeComponent/>
            {children}
        </section>
    )
};

export default BlogLayout ;

надо убедиться что везде где используется useDispatch и useSelector - это клиентские компоненты

не советую вообще забивать голову этим дерьмом, потому что разбивать серверную логику на 2 сервера - это самое ужасное что может быть, зачем вообще сделали разработчики эту возможность ? - для каких-то наверное нестандартных ситуаций, или где-то отключить кэширования и т.д, если кратко то, сделали скорее всего для гибкости и всё

максимум считаю нормой юзать middleware, для разделение роутов на защищённые и не защищённые