Next.js如何引入外部js文件

xiupf
1,754 阅读1分钟

在 Next.js 中引入外部 JavaScript 文件有多种方式，取决于你的需求和使用场景。以下是几种常见的方法：

1. 使用 <script> 标签在 pages/_document.js 中引入

这是引入全局 JavaScript 文件的一种方法，可以在 _document.js 中添加外部脚本。这个方法适用于需要在所有页面中加载的外部脚本。

创建 _document.js

在 pages 目录下创建一个 _document.js 文件（如果还没有的话）。

// pages/_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
    render() {
        return (
            <Html>
                <Head>
                    <script src="https://example.com/external.js"></script>
                </Head>
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        );
    }
}

export default MyDocument;

2. 使用 <script> 标签在页面或组件中引入

如果你只需要在特定页面或组件中引入外部 JavaScript 文件，可以在 useEffect Hook 中动态添加脚本标签。

在页面或组件中引入

import { useEffect } from 'react';

const Page = () => {
    useEffect(() => {
        const script = document.createElement('script');
        script.src = 'https://example.com/external.js';
        script.async = true;
        document.body.appendChild(script);

        return () => {
            document.body.removeChild(script);
        };
    }, []);

    return (
        <div>
            <h1>Hello, World!</h1>
        </div>
    );
};

export default Page;

3. 使用 next/script 组件

Next.js 提供了一个内置的 Script 组件，用于优化和控制脚本的加载方式。这是推荐的方法，因为它可以确保脚本加载的顺序和性能优化。

使用 next/script 组件

import Script from 'next/script';

const Page = () => {
    return (
        <div>
            <h1>Hello, World!</h1>
            <Script
                src="https://example.com/external.js"
                strategy="lazyOnload" // 延迟加载脚本直到页面加载完成
                onLoad={() => {
                    console.log('Script loaded!');
                }}
            />
        </div>
    );
};

export default Page;

4. 在 next.config.js 中配置

如果你有多个页面需要引入外部 JavaScript 文件，可以在 next.config.js 中进行全局配置。

// next.config.js
module.exports = {
    reactStrictMode: true,
    webpack: (config) => {
        config.module.rules.push({
            test: /\.js$/,
            use: ['script-loader']
        });

        return config;
    }
};

总结

  • 全局引入：使用 _document.js 中的 <script> 标签。
  • 特定页面或组件：在 useEffect 中动态添加脚本标签。
  • 推荐方法：使用 Next.js 内置的 Script 组件进行优化加载。
  • 全局配置：通过 next.config.js 进行配置（需要配置 webpack 规则）。

根据你的具体需求选择合适的方法来引入外部 JavaScript 文件。

avatar
文章
阅读
粉丝