rayan/next.js
1
0
Fork 0
Code Issues Pull Requests Actions 12 Packages Projects Releases Wiki Activity

first commit
Some checks failed
Test examples / Test Examples (20) (push) Has been cancelled
Details
Test examples / Test Examples (22) (push) Has been cancelled
Details
Lock Threads / action (push) Has been cancelled
Details
Trigger Release / start (push) Has been cancelled
Details
Stale issue handler / stale (push) Has been cancelled
Details
Update Font Data / create-pull-request (push) Has been cancelled
Details
build-and-deploy / deploy-target (push) Has been cancelled
Details
build-and-deploy / build (push) Has been cancelled
Details
build-and-deploy / stable - aarch64-unknown-linux-musl - node@16 (push) Has been cancelled
Details
build-and-deploy / stable - x86_64-unknown-linux-musl - node@16 (push) Has been cancelled
Details
build-and-deploy / stable - aarch64-unknown-linux-gnu - node@16 (push) Has been cancelled
Details
build-and-deploy / stable - x86_64-unknown-linux-gnu - node@16 (push) Has been cancelled
Details
build-and-deploy / stable - aarch64-pc-windows-msvc - node@16 (push) Has been cancelled
Details
build-and-deploy / stable - x86_64-pc-windows-msvc - node@16 (push) Has been cancelled
Details
build-and-deploy / stable - aarch64-apple-darwin - node@16 (push) Has been cancelled
Details
build-and-deploy / stable - x86_64-apple-darwin - node@16 (push) Has been cancelled
Details
build-and-deploy / build-wasm (nodejs) (push) Has been cancelled
Details
build-and-deploy / build-wasm (web) (push) Has been cancelled
Details
build-and-deploy / Deploy preview tarball (push) Has been cancelled
Details
build-and-deploy / Potentially publish release (push) Has been cancelled
Details
build-and-deploy / publish-turbopack-npm-packages (push) Has been cancelled
Details
build-and-deploy / Deploy examples (push) Has been cancelled
Details
build-and-deploy / thank you, build (push) Has been cancelled
Details
build-and-deploy / Upload Turbopack Bytesize metrics to Datadog (push) Has been cancelled
Details
Rspack Next.js development integration tests / Rspack integration tests (push) Has been cancelled
Details
Rspack Next.js production integration tests / Rspack integration tests (push) Has been cancelled
Details
Turbopack Next.js development integration tests / Next.js integration tests (push) Has been cancelled
Details
Turbopack Next.js production integration tests / Next.js integration tests (push) Has been cancelled
Details
Update Rspack test manifest / Update and upload Rspack development test manifest (push) Has been cancelled
Details
Update Rspack test manifest / Update and upload Rspack production test manifest (push) Has been cancelled
Details
Upload bundler test manifests to areweturboyet.com / Upload test results (push) Has been cancelled
Details
Update React / create-pull-request (push) Has been cancelled
Details
test-e2e-project-reset-cron / reset-test-project (push) Has been cancelled
Details
Notify about the top 15 issues/PRs/feature requests (most reacted) in the last 90 days / run (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Arian Tron
2026-03-10 19:37:31 +03:30
commit 61f56f997c
27684 changed files with 2784175 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
test/integration/script-loader/base/next.config.js Normal file
View File

@@ -0,0 +1,3 @@
module.exports = {
reactStrictMode: true,
}

23
test/integration/script-loader/base/pages/_app.js Normal file
View File

@@ -0,0 +1,23 @@
import Script from 'next/script'
import '../styles/styles.css'
function MyApp({ Component, pageProps }) {
return (
<>
<Script
id="documentAfterInteractive"
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js?a=documentAfterInteractive"
strategy="afterInteractive"
/>
<Script
id="documentLazyOnload"
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js?a=documentLazyOnload"
strategy="lazyOnload"
/>
<Component {...pageProps} />
</>
)
}
export default MyApp

37
test/integration/script-loader/base/pages/_document.js Normal file
View File

@@ -0,0 +1,37 @@
import * as React from 'react'
import { Main, NextScript, Head, Html } from 'next/document'
import Script from 'next/script'
export default function Document() {
return (
<Html>
<Head>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Voces"
/>
<Script
id="scriptBeforeInteractive"
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js?a=scriptBeforeInteractive"
strategy="beforeInteractive"
></Script>
<Script
id="inline-before"
strategy="beforeInteractive"
dangerouslySetInnerHTML={{
__html: `console.log('inline beforeInteractive')`,
}}
></Script>
</Head>
<body>
<Main />
<NextScript />
<Script
src="https://www.google-analytics.com/analytics.js?a=scriptBeforeInteractive"
strategy="beforeInteractive"
></Script>
<div id="text" />
</body>
</Html>
)
}

22
test/integration/script-loader/base/pages/index.js Normal file
View File

@@ -0,0 +1,22 @@
import Script from 'next/script'
import Link from 'next/link'
const Page = () => {
return (
<div class="container">
<Script
id="scriptAfterInteractive"
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js?a=scriptAfterInteractive"
></Script>
<div>index</div>
<div>
<Link href="/page1">Page1</Link>
</div>
<div>
<Link href="/page5">Page5</Link>
</div>
</div>
)
}
export default Page

21
test/integration/script-loader/base/pages/page1.js Normal file
View File

@@ -0,0 +1,21 @@
import Script from 'next/script'
const Page = () => {
return (
<div class="container">
<div>page1</div>
</div>
)
}
Page.unstable_scriptLoader = () => {
return (
<Script
id="scriptBeforePageRender"
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js?a=scriptBeforePageRender"
strategy="beforePageRender"
></Script>
)
}
export default Page

28
test/integration/script-loader/base/pages/page10.js Normal file
View File

@@ -0,0 +1,28 @@
import Script from 'next/script'
import Link from 'next/link'
const Page = () => {
return (
<div className="container">
<Link href="/page9">Page 9</Link>
<div id="text"></div>
<Script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"
onReady={() => {
window.remoteScriptsOnReadyCalls ??= 0
window.remoteScriptsOnReadyCalls++
}}
/>
<Script
id="i-am-an-inline-script-that-has-on-ready"
dangerouslySetInnerHTML={{ __html: 'console.log("inline script!")' }}
onReady={() => {
window.inlineScriptsOnReadyCalls ??= 0
window.inlineScriptsOnReadyCalls++
}}
/>
</div>
)
}
export default Page

33
test/integration/script-loader/base/pages/page3.js Normal file
View File

@@ -0,0 +1,33 @@
import Script from 'next/script'
const Page = () => {
return (
<div class="container">
<Script id="inline-script">
{`const newDiv = document.createElement('div')
newDiv.id = 'onload-div'
document.querySelector('body').appendChild(newDiv)
`}
</Script>
<Script
id="scriptLazyOnload"
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js?a=scriptLazyOnload"
strategy="lazyOnload"
stylesheets={[
'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css',
]}
></Script>
<Script
src="https://example.com/doesntexist"
strategy="lazyOnload"
onError={(e) => {
console.log('error')
console.log(e)
}}
/>
<div>page3</div>
</div>
)
}
export default Page

49
test/integration/script-loader/base/pages/page4.js Normal file
View File

@@ -0,0 +1,49 @@
/* global _ */
import Script from 'next/script'
import Link from 'next/link'
const url =
'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js'
const Page = () => {
return (
<div class="container">
<div id="onload-div-1">initial</div>
<Link href="/page9">Page 9</Link>
<Script
src={url}
id="script1"
onLoad={() => {
document.getElementById('onload-div-1').textContent += _.repeat(
'a',
3
)
}}
></Script>
<Script
src={url}
id="script2"
onLoad={() => {
// eslint-disable-next-line no-undef
document.getElementById('onload-div-1').textContent += _.repeat(
'b',
3
)
}}
></Script>
<Script
src={url}
id="script3"
onLoad={() => {
// eslint-disable-next-line no-undef
document.getElementById('onload-div-1').textContent += _.repeat(
'c',
3
)
}}
></Script>
</div>
)
}
export default Page

16
test/integration/script-loader/base/pages/page5.js Normal file
View File

@@ -0,0 +1,16 @@
import Link from 'next/link'
import Script from 'next/script'
const Page = () => {
return (
<div class="container">
<Script id="inline-script">{`document.getElementById('text').textContent += 'abc'`}</Script>
<div>page5</div>
<div>
<Link href="/">Index</Link>
</div>
</div>
)
}
export default Page

16
test/integration/script-loader/base/pages/page6.js Normal file
View File

@@ -0,0 +1,16 @@
import Script from 'next/script'
const Page = () => {
return (
<div class="container">
<Script
id="scriptBeforePageRenderOld"
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js?a=scriptBeforePageRender"
strategy="beforeInteractive"
></Script>
<div>page6</div>
</div>
)
}
export default Page

15
test/integration/script-loader/base/pages/page7.js Normal file
View File

@@ -0,0 +1,15 @@
import Script from 'next/script'
const Page = () => {
return (
<div class="container">
<Script
id="beforeInteractiveInlineScript"
strategy="beforeInteractive"
>{`console.log('beforeInteractive inline script run')`}</Script>
<div>page7</div>
</div>
)
}
export default Page

24
test/integration/script-loader/base/pages/page8.js Normal file
View File

@@ -0,0 +1,24 @@
import Script from 'next/script'
import Link from 'next/link'
const url =
'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js'
const Page = () => {
return (
<div class="container">
<Link href="/page9">Page 9</Link>
<div id="text"></div>
<Script
src={url}
id="script1"
onReady={() => {
// eslint-disable-next-line no-undef
document.getElementById('text').textContent += _.repeat('a', 3)
}}
></Script>
</div>
)
}
export default Page

12
test/integration/script-loader/base/pages/page9.js Normal file
View File

@@ -0,0 +1,12 @@
import Link from 'next/link'
const Page = () => {
return (
<>
<Link href="/page4">Page 4</Link>
<Link href="/page8">Page 8</Link>
</>
)
}
export default Page

6
test/integration/script-loader/base/styles/styles.css Normal file
View File

@@ -0,0 +1,6 @@
body {
font-family: 'Arial', sans-serif;
padding: 20px 20px 60px;
max-width: 680px;
margin: 0 auto;
}

5
test/integration/script-loader/partytown-missing/next.config.js Normal file
View File

@@ -0,0 +1,5 @@
module.exports = {
experimental: {
nextScriptWorkers: true,
},
}

15
test/integration/script-loader/partytown-missing/pages/index.js Normal file
View File

@@ -0,0 +1,15 @@
import Script from 'next/script'
const Page = () => {
return (
<div class="container">
<div>Home Page</div>
<Script
src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js"
strategy="worker"
/>
</div>
)
}
export default Page

5
test/integration/script-loader/partytown/next.config.js Normal file
View File

@@ -0,0 +1,5 @@
module.exports = {
experimental: {
nextScriptWorkers: true,
},
}

9
test/integration/script-loader/partytown/package.json Normal file
View File

@@ -0,0 +1,9 @@
{
"name": "partytown",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"@builder.io/partytown": "0.4.2"
}
}

15
test/integration/script-loader/partytown/pages/index.js Normal file
View File

@@ -0,0 +1,15 @@
import Script from 'next/script'
const Page = () => {
return (
<div class="container">
<div>Home Page</div>
<Script
src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js"
strategy="worker"
/>
</div>
)
}
export default Page

368
test/integration/script-loader/test/index.test.ts Normal file
View File

@@ -0,0 +1,368 @@
/* eslint-env jest */
import { join } from 'path'
import {
renderViaHTTP,
nextServer,
startApp,
stopApp,
nextBuild,
waitFor,
findPort,
launchApp,
killApp,
} from 'next-test-utils'
import webdriver, { type Playwright } from 'next-webdriver'
import cheerio from 'cheerio'
let appDir = join(__dirname, '../base')
let appWithPartytownMissingDir = join(__dirname, '../partytown-missing')
let server
let appPort
const runTests = (isDev) => {
// TODO: We will refactor the next/script to be strict mode resilient
// Don't skip the test case for development mode (strict mode) once refactoring is finished
it('priority afterInteractive', async () => {
let browser: Playwright
try {
browser = await webdriver(appPort, '/')
await waitFor(1000)
async function test(scriptID: string) {
const script = await browser.elementByCss(`script#${scriptID}`)
const dataAttr = await script.getAttribute('data-nscript')
const endScripts = await browser.elementsByCss(
`#__NEXT_DATA__ ~ script#${scriptID}`
)
// Renders script tag
expect(script).toBeDefined()
expect(dataAttr).toBeDefined()
// Script is inserted at the end
expect(endScripts.length).toBe(1)
}
// afterInteractive script in page
await test('scriptAfterInteractive')
// afterInteractive script in _document
await test('documentAfterInteractive')
} finally {
if (browser) await browser.close()
}
})
it('priority lazyOnload', async () => {
let browser: Playwright
try {
browser = await webdriver(appPort, '/page3')
await browser.waitForElementByCss('#onload-div', { state: 'attached' })
await waitFor(1000)
async function test(scriptId: string, css?: string) {
const script = await browser.elementByCss(`script#${scriptId}`)
const dataAttr = await script.getAttribute('data-nscript')
const endScripts = await browser.elementsByCss(
`#__NEXT_DATA__ ~ #${scriptId}`
)
// Renders script tag
expect(script).toBeDefined()
expect(dataAttr).toBeDefined()
if (css) {
const cssTag = await browser.elementByCss(`link[href="${css}"]`)
expect(cssTag).toBeDefined()
}
// Script is inserted at the end
expect(endScripts.length).toBe(1)
}
// lazyOnload script in page
await test(
'scriptLazyOnload',
'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css'
)
// lazyOnload script in _document
await test('documentLazyOnload')
} finally {
if (browser) await browser.close()
}
})
it('priority beforeInteractive', async () => {
const html = await renderViaHTTP(appPort, '/page1')
const $ = cheerio.load(html)
function test(id) {
const script = $(`#${id}`)
// Renders script tag
expect(script.length).toBe(1)
expect(script.attr('data-nscript')).toBeDefined()
// Script is inserted before NextScripts
let scriptCount
if (process.env.IS_TURBOPACK_TEST) {
// Turbopack generates different script names
if (isDev) {
scriptCount = $(
`#${id} ~ script[src^="/_next/static/chunks/%5Broot-of-the-server%5D__"]`
).length
} else {
// In production mode, content hashes are used
scriptCount = $(
`#${id} ~ script[src^="/_next/static/chunks/"]`
).length
}
} else {
scriptCount = $(
`#${id} ~ script[src^="/_next/static/chunks/main"]`
).length
}
expect(scriptCount).toBeGreaterThan(0)
}
test('scriptBeforeInteractive')
})
// Warning - Will be removed in the next major release
it('priority beforeInteractive - older version', async () => {
const html = await renderViaHTTP(appPort, '/page6')
const $ = cheerio.load(html)
function test(id) {
const script = $(`#${id}`)
// Renders script tag
expect(script.length).toBe(1)
expect(script.attr('data-nscript')).toBeDefined()
// Script is inserted before NextScripts
let scriptCount
if (process.env.IS_TURBOPACK_TEST) {
// Turbopack generates different script names
if (isDev) {
scriptCount = $(
`#${id} ~ script[src^="/_next/static/chunks/%5Broot-of-the-server%5D__"]`
).length
} else {
// In production mode, content hashes are used
scriptCount = $(
`#${id} ~ script[src^="/_next/static/chunks/"]`
).length
}
} else {
scriptCount = $(
`#${id} ~ script[src^="/_next/static/chunks/main"]`
).length
}
expect(scriptCount).toBeGreaterThan(0)
}
test('scriptBeforePageRenderOld')
})
it('priority beforeInteractive on navigate', async () => {
let browser: Playwright
try {
browser = await webdriver(appPort, '/')
// beforeInteractive scripts should load once
let documentBIScripts = await browser.elementsByCss(
'[src$="scriptBeforeInteractive"]'
)
expect(documentBIScripts.length).toBe(2)
await browser.waitForElementByCss('[href="/page1"]').click()
await browser.waitForElementByCss('.container')
// Ensure beforeInteractive script isn't duplicated on navigation
documentBIScripts = await browser.elementsByCss(
'[src$="scriptBeforeInteractive"]'
)
expect(documentBIScripts.length).toBe(2)
} finally {
if (browser) await browser.close()
}
})
it('onload fires correctly', async () => {
let browser: Playwright
try {
browser = await webdriver(appPort, '/page4')
await waitFor(3000)
const text = await browser.elementById('onload-div-1').text()
expect(text).toBe('initialaaabbbccc')
// Navigate to different page and back
await browser.waitForElementByCss('[href="/page9"]').click()
await browser.waitForElementByCss('[href="/page4"]').click()
await browser.waitForElementByCss('#onload-div-1')
const sameText = await browser.elementById('onload-div-1').text()
// onload should only be fired once, not on sequential re-mount
expect(sameText).toBe('initial')
} finally {
if (browser) await browser.close()
}
})
it('priority beforeInteractive with inline script', async () => {
const html = await renderViaHTTP(appPort, '/page5')
const $ = cheerio.load(html)
const script = $('#inline-before')
expect(script.length).toBe(1)
// css bundle is only generated in production, so only perform inline script position check in production
if (!isDev) {
// Script is inserted before CSS
expect(
$(`#inline-before ~ link[href^="/_next/static/"]`).filter(
(i, element) => $(element).attr('href')?.includes('.css')
).length
).toBeGreaterThan(0)
}
})
it('priority beforeInteractive with inline script should execute', async () => {
let browser: Playwright
try {
browser = await webdriver(appPort, '/page7')
await waitFor(1000)
const logs = await browser.log()
// not only should inline script run, but also should only run once
expect(
logs.filter((log) =>
log.message.includes('beforeInteractive inline script run')
).length
).toBe(1)
} finally {
if (browser) await browser.close()
}
})
it('Does not duplicate inline scripts', async () => {
let browser: Playwright
try {
browser = await webdriver(appPort, '/')
// Navigate away and back to page
await browser.waitForElementByCss('[href="/page5"]').click()
await browser.waitForElementByCss('[href="/"]').click()
await browser.waitForElementByCss('[href="/page5"]').click()
await browser.waitForElementByCss('.container')
await waitFor(1000)
const text = await browser.elementById('text').text()
expect(text).toBe('abc')
} finally {
if (browser) await browser.close()
}
})
if (!isDev) {
it('Error message is shown if Partytown is not installed locally', async () => {
const { stdout, stderr } = await nextBuild(
appWithPartytownMissingDir,
[],
{
stdout: true,
stderr: true,
}
)
const output = stdout + stderr
expect(output.replace(/[\n\r]/g, '')).toMatch(
/It looks like you're trying to use Partytown with next\/script but do not have the required package\(s\) installed.Please install Partytown by running:.*?(npm|pnpm|yarn) (install|add) (--save-dev|--dev) @builder.io\/partytownIf you are not trying to use Partytown, please disable the experimental "nextScriptWorkers" flag in next.config.js./
)
})
}
it('onReady fires after load event and then on every subsequent re-mount', async () => {
let browser: Playwright
try {
browser = await webdriver(appPort, '/page8')
const text = await browser.elementById('text').text()
expect(text).toBe('aaa')
// Navigate to different page and back
await browser.waitForElementByCss('[href="/page9"]').click()
await browser.waitForElementByCss('[href="/page8"]').click()
await browser.waitForElementByCss('.container')
const sameText = await browser.elementById('text').text()
expect(sameText).toBe('aaa') // onReady should fire again
} finally {
if (browser) await browser.close()
}
})
// https://github.com/vercel/next.js/issues/39993
it('onReady should only fires once after loaded (issue #39993)', async () => {
let browser: Playwright
try {
browser = await webdriver(appPort, '/page10')
// wait for remote script to be loaded
await waitFor(1000)
expect(await browser.eval(`window.remoteScriptsOnReadyCalls`)).toBe(1)
expect(await browser.eval(`window.inlineScriptsOnReadyCalls`)).toBe(1)
} finally {
if (browser) await browser.close()
}
})
}
describe('Next.js Script - Primary Strategies - Strict Mode', () => {
beforeAll(async () => {
appPort = await findPort()
server = await launchApp(appDir, appPort)
})
afterAll(async () => {
if (server) await killApp(server)
})
runTests(true)
})
describe('Next.js Script - Primary Strategies - Production Mode', () => {
;(process.env.TURBOPACK_DEV ? describe.skip : describe)(
'production mode',
() => {
beforeAll(async () => {
await nextBuild(appDir)
const app = nextServer({
dir: appDir,
dev: false,
quiet: true,
})
server = await startApp(
// @ts-expect-error -- Discovered when converting from JS to TS
app
)
appPort = server.address().port
})
afterAll(async () => {
await stopApp(server)
})
runTests(false)
}
)
})