Зачем нужен Next.js, какие способы рендеринга он поддерживает и что произойдёт, если пометить верхний компонент как client component?

Next.js добавляет к React маршрутизацию и серверные возможности; поддерживает статическую, динамическую серверную и клиентскую работу в разных комбинациях.

Директива use client задаёт границу клиентского модуля и его импортируемого поддерева, увеличивая необходимый клиентский код. Она не означает автоматическое отключение предварительного HTML-рендеринга. Серверные компоненты, переданные как children, могут сохранять серверную роль; важно различать импорт и композицию.

Источник: nextjs.org.