前言
Next.js 是 React 生态系统中一个强大的框架，它提供了 SSR、静态站点生成等功能，让 React 应用更加优秀。但对于第三方 js 文件，Next.js 在处理上存在一些不便。本文将探究如何在 Next.js 中处理第三方 js 文件。
背景
在 Next.js 应用中，通过两种方式引入第三方 js 文件：
- 通过
<script>标签直接引入 - 使用
import导入方式引入
对于第一种方式，可以在 Next.js 中添加一个自定义 HTML 模板，将 <script> 标签添加到模板中。
对于第二种方式，需要引入一个第三方库，例如 next-script-loader，使 Next.js 能够处理 import 方式引入的 js 文件。
但这些处理方式存在一些问题：自定义 HTML 模板需要部署到每个 Next.js 项目中，而 next-script-loader 依赖于 Webpack，使得 Next.js 相对于其他应用框架变得更加臃肿。
解决办法
我们可以使用自定义路由，在 Next.js 应用中指定 js 文件的 URL 地址，并将该 URL 地址与静态 js 文件进行映射。这样就可以直接访问 js 文件，并在 Next.js 中使用了。
以下是具体步骤：
第一步：创建自定义路由
在 Next.js 应用中，创建 pages/api/scripts/[scriptName].js 文件，并添加以下代码：
-- -------------------- ---- -------
------ -- ---- -----
------ ---- ---- -------
------ - --------------- --------------- - ---- -------
------ ------- -------- --------
---- ---------------
---- ---------------
- -
----- - ---------- - - ----------
----- -------- - ------------------------ ----------------- --------------------
-- -------------------------- -
------ ------------------------ ---------
-
----- ------------ - --------------------------
----------------------------- -------------------
-----------------------
-该路由接受 scriptName 参数，指定需要访问的 js 文件，然后读取 public/scripts 目录下对应的静态 js 文件，并返回给浏览器。
第二步：添加映射关系
在 Next.js 项目的 next.config.js 文件中，添加以下代码：
-- -------------------- ---- -------
-------------- - -
----- ---------- -
------ -
-
------- -----------------------
------------ ---------------------------
--
--
--
--该代码指定了 /scripts 路径下的请求将被转发到自定义路由 /api/scripts/[scriptName]，并将 :scriptName 参数传递到自定义路由中。
第三步：访问静态 js 文件
现在，我们可以在 Next.js 应用中使用以下代码来访问某个静态 js 文件：
<script src="/scripts/example"></script>
其中，example.js 文件需要放置在 Next.js 项目的 public/scripts 目录下。
总结
本文介绍了如何在 Next.js 应用中处理第三方 js 文件。通过使用自定义路由，我们可以将静态 js 文件映射到本地 URL 地址，并在 Next.js 中使用。这种方式相对于其他处理方式更加简单且灵活。
完整示例代码请参考 Github。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64585030968c7c53b0ab5c98