Насколько ли корректно использовать document.getElementById в Next.js

Доброго времени суток!

Не буду затягивать... Насколько ли корректно использовать такое в Next.js:

document.getElementById('test1').clientHeight

и полученную высоту применять к другим объектам при рендере.

По просьбе выкладываю небольшой пример:

class NavigationMenu extends Component {

    constructor(props) {
        super(props)

        this.state = {
            dimensions: null,
        }
    }

    async componentDidMount() {
        this.setState({
            dimensions: {
                width: document.getElementById('test1').clientWidth,
                height: document.getElementById('test1').clientHeight,
            },
        });


    }

    render() {
        const { dimensions } = this.state;

        let width = 0;
        let height = 0;

        if (dimensions) {
            width = dimensions.width;
            height = dimensions.height + 20;
        }

        return (
            <>
                <div id="test1">
                    ...
                </div>

                <div id="menu" style={{width: width, height: height}}>

                </div>
            </>

        );
    }