我可以使用 javascript 文件在 nextjs 中生成内联 javascript 吗？答案

【问题标题】：Can I use a javascript file to generate inline javascript within nextjs?我可以使用 javascript 文件在 nextjs 中生成内联 javascript 吗？
【发布时间】：2021-08-02 14:19:17
【问题描述】：

我有一个第 3 方脚本，要求我在加载之前定义一个全局 window.varforthem。为此，我查看了nextJS docs。它以一种 eslint 和其他插件无法工作的方式完成，除了它对于长配置对象的可读性较差。如果我使用像<Script src="/scripts/forthirdparty.js" /> 这样的公用文件夹，它会在页面上被拍打而不会像_next/static 中的其他资产那样进行优化。最重要的是，max-age 标头设置为 0，因此我的 CDN 不会缓存该 misc 文件。有没有更好的方法来处理这个？如果没有，我如何确保我的静态文件获得自定义的最大年龄？

我尝试在下面史蒂夫汤姆林的链接之后的<Head> 标记中使用常规的<script> 与<Script>。

我的内联脚本需要一些服务器配置才能工作，这使得它有点复杂。

// earlier in the method
const conf = `window.config = ${JSON.stringify(pageProps.config)}`;
const { config: pageConfig } = pageProps;

// later on
<Head>
  <script
    dangerouslySetInnerHTML={{
      __html: conf,
    }}
  />
  <script src="/scripts/myfile.js" />
  <script src={pageConfig.third_party_script_url} />
</Head>

当我在 Chrome 中检查 <head> 标记时，一切正常。但是没有任何运行，我得到了错误Did not expect server HTML to contain a <div> in <div>. 在编译第一个加载工作之后。刷新失败。不知道为什么它在服务器上的渲染与客户端不同。

【问题讨论】：

检查一下 - 看看它是否能解决您的问题：stackoverflow.com/questions/55165852/…
最后一部分：stackoverflow.com/a/66777286/11613622
一分钟内完成这一切的酷测试。如果第一个评论不起作用，我可以使用第二个:)
@SteveTomlin 有趣的问题。我现在正在用一些细节更新问题

标签： javascript next.js

【解决方案1】：

在这里为可能没有意识到Next.JS implement external ".js" with <script> 可能出现的一些时间问题的人写一个答案。我的第三方脚本操纵了 DOM。所以有时它会在 React 检测到服务器的 DOM 差异之前/之后这样做。完整的解决方案是为我自己的脚本使用<Head> 中的<script> 标签，这些脚本只是为第三方脚本配置配置。我将第三方<script>s 保留在<Head> 之外，以便在其他所有内容运行后将它们呈现在页面底部。

【讨论】：

时间问题已由新的next/script 组件修复。它确保具有相同策略的脚本按顺序加载（并且beforeInteractive 脚本在afterInteractive 和lazyOnload 脚本之前运行）。因此，您可以刚刚完成 --- <Script src="your script" strategy="beforeInteractive" /><Script src="third party script" /> --- 默认情况下，策略是 afterInteractive，即脚本在客户端注入并在水合后运行。请注意，您必须将next/script 放在next/head 之外。