Задать вопрос
ms-dred
@ms-dred
Вечно что то не то и что то не так...
nextjs

Как можно обновить head в next.js?

Всем привет, может подскажите решение получше или попроще.
На сайте реализовано отображение страниц в модельном окне, при этом меняется URL и принудительно меняю пока что только title в head
Дело в том что в head есть еще куча всего что лучше бы поменять при открытии модельного окна, есть ли варианты как можно все это упростить и не перебирать каждый элемент.

На странице новости я формирую head отдельным компонентом
post.tsx
const Post = ({ ...props }) => {

        return (
            <>
                <HeadComponent 
                    title={title}
                    description={description}
                    keywords={keywords}
                    image={post.image}
                    ogTitle={ogTitle}
                    ogDescription={ogDescription}
                    ogCreditText={ogCreditText}
                    post={post}
                />
                <div>
                    // Тут сам контент
                </div>
            </>
        )

    }

    export default observer(Post)

HeadComponent.tsx
const HeadComponent = ({ ...props }) => {
        <Head>
            <title>{props.title}</title>
            <meta name="description" content={props.description} />
            // И т.д.
        </Head>
    }


При открытии модельного окна у меня есть все данные для формирования HeadComponent в обработчике при клике по ссылке
const handleClick = useCallback((e) => {

        // Тут переменные со всеми нужными данными

        const head = <HeadComponent 
                    title={title}
                    description={description}
                    keywords={keywords}
                    image={image}
                    ogTitle={ogTitle}
                    ogDescription={ogDescription}
                    ogCreditText={ogCreditText}
                    post={post}
                />

        console.log(head)
        // {$$typeof: Symbol(react.element), type: {…}, key: null, ref: null, props: {…}, …}

        
        window.history.pushState({
            ...window.history.state,
            id: link.getAttribute("data-id"),
        },
            title,
            link.pathname
        )

        context.openModal(true) // открывает модельное окно и там дальше в него подгружаются данные

    }, [])


Я вот чего думаю, можно ли как то пушнуть новый head в документ?
  • Вопрос задан
  • 70 просмотров
7 комментариев
Подписаться 1 Средний 7 комментариев
Решения вопроса 1
Mike_Ro
@Mike_Ro
Python, JS, WordPress, SEO, Bots, Adversting
Я бы использовал существующий компонент Head, вместе с контекстом и состоянием, а так же кастомный HeadProvider:
// _app.js
import {HeadProvider} from './HeadProvider';

function App({Component, pageProps}) {
    return (
        <HeadProvider>
            <Component {...pageProps} />
        </HeadProvider>
    );
}

// HeadProvider.js
import React, {createContext, useContext, useState} from 'react';

const HeadContext = createContext();
export const useHead = () => useContext(HeadContext);

export function HeadProvider({children}) {
    const [headData, setHeadData] = useState({
        title: 'Init title',
        description: 'Init description',
        keywords: 'Init keywords'
    });

    return (
        <HeadContext.Provider value={{headData, setHeadData}}>
            {children}
        </HeadContext.Provider>
    );
}

// MyBestHead.js
import Head from 'next/head';
import {useHead} from './HeadProvider';

export function MyBestHead() {
    const {headData} = useHead();

    return (
        <Head>
            <title>{headData.title}</title>
            <meta name="description" content={headData.description}/>
            {/* more head items */}
        </Head>
    );
}

// MyComponent.js
import React, {useCallback} from 'react';
import {useHead} from './HeadProvider';

export function MyComponent() {
    const {setHeadData} = useHead();

    const handleClick = useCallback(() => {
        setHeadData({
            title: 'New title',
            description: 'New description',
            keywords: 'New keywords'
        });
    }, [setHeadData]);

    return (
        <button onClick={handleClick}>Update Head Data</button>
    );
}
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик, Стажер (React)
T-PASS • Москва
от 40 000 до 50 000 ₽
Node.js разработчик (senior)
OWNR SOLUTIONS • Нижний Новгород
от 250 000 до 330 000 ₽
QA Engineer Auto/Manual (senior)
Платформа • Москва
До 250 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Нужны лиды на сайт
27 апр. 2024, в 13:49
300000 руб./за проект
Доработка проекта Django
27 апр. 2024, в 13:30
30000 руб./за проект
Нарисовать баннер в современном стиле
27 апр. 2024, в 13:22
600 руб./за проект
Ещё заказы