so what is the job of client-only?

What you have to do is use the "use client" directive since next performs server side rendering the document object will not be accessible at first as this only exist in the browser. So you have to check if it is defined so you can wrap that piece of logic in an if statement, or refactor to use use Effect or use Callback. So the code only runs when document is defined.

Prevent you from importing things like fs, db, so on and so forth