Project Structure

Example 1: In this example, we will use the Script tag in Next.js. This tag will include external JavaScript.

Javascript

"use client";

import Script from "next/script";

export default function HomePage() {
    return (
        <div>
            <h2>Script tag will be used </h2>
            <Script
                src="https://connect.facebook.net/en_US/sdk.js"
                strategy="lazyOnload"
                onLoad={() =>
                    console.log(`script loaded correctly, window.FB has been populated`)
                }
            />
        </div>
    );
}

Output:

Example 2: In this example, we will use the “error” prop in Next.js

Javascript

"use client";

import Script from "next/script";

export default function HomePage() {
    return (
        <div>
            <h2> Failed in including External Site</h2>
            <Script
                src="https://example.com/script.js"
                onError={(e: Error) => {
                    console.log("Script failed to load", e);
                }}
            />
        </div>
    );
}

Output:

Next.js Components : </h1></div>

Next JS is a React-based web framework that enables developers to build modern, dynamic web applications easily. Vercel developed it, and NextJS introduces a set of conventions and tools that streamline the developer process making it faster and more efficient.

This post will teach us about this project’s <Script> component.

Project Structure

Next.js Components : </h1></div>

Similar Reads