Не работает компонент Head в next.js, как решить?

Question

Aqulus @Aqulus

Next.js

Не работает компонент Head в next.js, как решить?

Добрый день. Делаю свой первый проект на next.js и возникла проблема с тем, что не работает компонент . При попытке установить заголовок страницы или любой другой meta-тег, он не появляется в HTML. Есть предположение, что это из-за использования 'use client'; который я использую в компонентах и лаяуте для вызова сессии (использую next-auth).

Вот Layout.tsx:

'use client';

import React from "react";
import {Inter} from "next/font/google";
import {SessionProvider} from "next-auth/react";
import Image from "next/image";
import Link from "next/link";
import LeftMenu from "@/app/components/LeftMenu";

import "./css/globals.css";

const inter = Inter({subsets: ['latin']});

export default function RootLayout({
    children,
    params: {session, ...params}
}: Readonly<{
    children: React.ReactNode;
}>)
{
    return (
        <SessionProvider session={session}>
            <html>
                <body className={inter.className}>
                    <nav className="en-navbar">
                        <div className="en-navbar-fluid">
                            <Link href="/">
                                <div className="en-navLogo">
                                    <Image src="/logo.svg" width={115} height={27} alt="logo" />
                                </div>
                            </Link>

                            <div className="en-navbar-searchBlock">
                                <label>
                                    <input name="search" placeholder="Search..." />
                                </label>
                            </div>
                        </div>
                    </nav>

                    <section className="en-container">
                        <div className="en-container-fluid">
                            <div className="en-leftMenu">
                                <LeftMenu />
                            </div>

                            <div className="en-content">
                                {children}
                            </div>
                        </div>
                    </section>
                </body>
            </html>
        </SessionProvider>
    );
}

Код Page.tsx (главная страница):

'use client';

import useUserData from "@/hooks/useUserData";
import Head from "next/head";

export default function Page()
{
    const user = useUserData();

    return (
        <>
            <Head>
                <title>My page title</title>
            </Head>

            <div className="block">
                <div className="block-container">
                    <div className="block-row">
                        <h1>Здравствуйте, {user?.first_name} {user?.last_name}</h1>
                    </div>
                </div>
            </div>
        </>
    );
}

Use client используется чисто из-за хуков. При их вызове (в компонентах и просто шаблонах) без use client в начале, код начинает ломаться. Т.е. я не могу вызвать сессию никак иначе (ну или просто не додумался).

Устанавливать title через metadata тоже не получается из-за use client, но без него у меня не работают хуки, в которых я вызываю useSession() / useRouter(), вот так вот..

Искал решения в интернете, но, к сожалению, ничего подходящего не нашёл. Скорее всего плохо искал. Подскажите, пожалуйста, в чём может быть проблема?