Script component for third-party scripts in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Script component from Next.js.

NextJS

import [1] from 'next/script';

Drag options to blanks, or click blank then click option'

ANextScript

Bscript

CScriptComponent

DScript

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase 'script' instead of 'Script'.

Using incorrect component names like 'ScriptComponent'.

The Next.js Script component is imported as Script with a capital S.

2fill in blank

medium

Complete the code to add a third-party script with the Script component using the src attribute.

NextJS

<Script [1]="https://example.com/script.js" />

Drag options to blanks, or click blank then click option'

Ahref

Blink

Csrc

Dsource

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'href' or 'link' instead of 'src'.

Using 'source' which is not valid here.

The src attribute specifies the URL of the external script to load.

3fill in blank

hard

Fix the error in the code to load a script after the page is interactive using the strategy attribute.

NextJS

<Script src="https://example.com/script.js" strategy=[1] />

Drag options to blanks, or click blank then click option'

A"afterInteractive"

B"beforeInteractive"

C"lazyOnload"

D"immediate"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'lazyOnload' which delays too much.

Using 'beforeInteractive' which loads too early.

The afterInteractive strategy loads the script after the page becomes interactive, which is common for third-party scripts.

4fill in blank

hard

Fill both blanks to add an inline script with the Script component and set it to load before the page is interactive.

NextJS

<Script [1]=[2]>{`console.log('Hello!')`}</Script>

Drag options to blanks, or click blank then click option'

Aid

B"beforeInteractive"

Cstrategy

D"afterInteractive"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'id' instead of 'strategy' for load timing.

Using 'afterInteractive' which loads too late.

Use the strategy prop with value "beforeInteractive" to run inline scripts early.

5fill in blank

hard

Fill all three blanks to add a third-party script with a unique id, load it lazily on page load, and add a custom data attribute.

NextJS

<Script id=[1] src="https://example.com/script.js" strategy=[2] data-custom=[3] />

Drag options to blanks, or click blank then click option'

A"thirdPartyScript"

B"lazyOnload"

C"value123"

D"afterInteractive"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'afterInteractive' instead of 'lazyOnload' for lazy loading.

Not quoting string values for id or data attributes.

Assign a unique id, use lazyOnload strategy to load script lazily, and add a custom data attribute with a string value.