Блог

Главная - Вопросы по программированию - Как правильно вставить пользовательский JavaScript на страницу публикации в NextJS?

Как правильно вставить пользовательский JavaScript на страницу публикации в NextJS?

#javascript #reactjs #next.js #hot-reload

#javascript #reactjs #next.js #горячая перезагрузка

Вопрос:

Я новичок в NextJS и использую его для создания личного блога. Согласно руководству NextJS, статические ресурсы должны быть помещены в папку /public верхнего уровня. Я могу загружать изображения и .css из папки / public в свои сообщения, но у меня возникают проблемы с вставкой пользовательских JS в мои сообщения. Чтобы быть более точным, я вижу, что скрипты, похоже, вставляются в каждое сообщение, когда я просматриваю страницу, но они не выполняются, пока я вручную не обновлю страницу.

Я создал пользовательский компонент скрипта с помощью src prop для загрузки пользовательского javascript, и я использую его для каждой из моих страниц публикации следующим образом:

         <Layout>
            <Head>
                <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.3.1/build/styles/vs.min.css" />
                <link rel="stylesheet" href="/custom.css" type="text/css" />
            </Head>
            <div className="post-content" dangerouslySetInnerHTML={{ __html: post.content}} />
            <Script src="/highlight.pack.js" />
            <Script src="/init.js" />
        </Layout>

Итак, в приведенном выше примере, если я перемещаюсь по сайту и нажимаю на конкретную ссылку на публикацию, публикация загрузится, но скрипты, которые я включил выше, не будут выполняться (этого не происходит с пользовательским CSS). Если я перезагружу страницу, скрипты будут работать нормально; так что проблема, похоже, заключается в навигации между страницами.

Как я могу это исправить?

Спасибо.