Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Flush styles effects #39268

Merged
merged 4 commits into from Aug 3, 2022
Merged

Flush styles effects #39268

merged 4 commits into from Aug 3, 2022

Conversation

huozhi
Copy link
Member

@huozhi huozhi commented Aug 2, 2022

Use flush effects to custom apply css-in-js solution to app. Re-introduce flush effects to app-render, and remove default support of styled-jsx in app/. So that users will choose their own css-in-js solution if they need any customization. styled-jsx won't appear in client bundle if you didn't use it.

For now we have to inject the initial styles before </head> to avoid hydration errors. Later on we can remove this once react can handle it.

  • inject styles before end of head element
  • add tests

@ijjk ijjk added created-by: Next.js team PRs by the Next.js team type: next labels Aug 2, 2022
@ijjk
Copy link
Member

ijjk commented Aug 2, 2022

Failing test suites

Commit: d289a2b

pnpm testheadless test/e2e/app-dir/rsc-basic.test.ts

  • app dir - react server components > should render server components correctly
  • app dir - react server components > should support multi-level server component imports
  • app dir - react server components > should resolve different kinds of components correctly
  • app dir - react server components > should be able to navigate between rsc pages
  • app dir - react server components > should handle streaming server components correctly
  • app dir - react server components > should support next/link in server components
  • app dir - react server components > should refresh correctly with next/link
  • app dir - react server components > should suspense next/image in server components
  • app dir - react server components > should handle various kinds of exports correctly
  • app dir - react server components > should support native modules in server component
  • app dir - react server components > should support the re-export syntax in server component
  • app dir - react server components > should support streaming for flight response
  • app dir - react server components > should support partial hydration with inlined server data
Expand output

● app dir - react server components › should render server components correctly

expect(received).toContain(expected) // indexOf

Expected substring: "component:index.server"
Received string:    "<!DOCTYPE html><html><head><style data-next-hide-fouc=\"true\">body{display:none}</style><noscript data-next-hide-fouc=\"true\"><style>body{display:block}</style></noscript><meta charSet=\"utf-8\"/><meta name=\"viewport\" content=\"width=device-width\"/><meta name=\"next-head-count\" content=\"2\"/><noscript data-n-css=\"\"></noscript><link rel=\"preload\" href=\"/_next/static/chunks/fallback/webpack.js?ts=1659476598377\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/fallback/main.js?ts=1659476598377\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/fallback/pages/_app.js?ts=1659476598377\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/fallback/pages/_error.js?ts=1659476598377\" as=\"script\"/><noscript id=\"__next_css__DO_NOT_USE__\"></noscript></head><body><div id=\"__next\"></div><script src=\"/_next/static/chunks/fallback/react-refresh.js?ts=1659476598377\"></script><script id=\"__NEXT_DATA__\" type=\"application/json\">{\"props\":{\"pageProps\":{\"statusCode\":500}},\"page\":\"/_error\",\"query\":{\"__NEXT_PAGE\":\"/\"},\"buildId\":\"development\",\"isFallback\":false,\"err\":{\"name\":\"Error\",\"source\":\"server\",\"message\":\"Module not found: Can't resolve 'styled-components'\\n  1 | import React from 'react'\\n  2 | import { StyleRegistry, createStyleRegistry } from 'styled-jsx'\\n\\u003e 3 | import { ServerStyleSheet, StyleSheetManager } from 'styled-components'\\n  4 | import { useFlushEffects } from 'next/dist/client/components/hooks-client'\\n  5 | import { useState } from 'react'\\n  6 | \\n\\nImport trace for requested module:\\n./node_modules/.pnpm/file+..+next-repo-943017a9e84c897066933c4b836e50e2_2n3glgkt3itk5yrc6p4qjvb37e/node_modules/next/dist/build/webpack/loaders/next-flight-client-entry-loader.js?modules=%2Ftmp%2Fnext-install-d464d3b91d13760c00e78797f2d10eb1aee5374e672416ed9d3b2761d07ec9db%2Fapp%2Froot-style-registry.client.js\\u0026modules=next%2Flink\\u0026modules=next%2Fdist%2Fclient%2Fcomponents%2Fapp-router.client.js\\u0026modules=next%2Fdist%2Fclient%2Fcomponents%2Flayout-router.client.js\\u0026modules=next%2Fdist%2Fclient%2Fcomponents%2Fhot-reloader.client.js\\u0026runtime=nodejs\\u0026ssr=true\\u0026name=app%2Fpage!\\n\\n\\nhttps://nextjs.org/docs/messages/module-not-found\",\"stack\":\"Error: Module not found: Can't resolve 'styled-components'\\n\\u001b[0m \\u001b[90m 1 | \\u001b[39m\\u001b[36mimport\\u001b[39m \\u001b[33mReact\\u001b[39m \\u001b[36mfrom\\u001b[39m \\u001b[32m'react'\\u001b[39m\\u001b[0m\\n\\u001b[0m \\u001b[90m 2 | \\u001b[39m\\u001b[36mimport\\u001b[39m { \\u001b[33mStyleRegistry\\u001b[39m\\u001b[33m,\\u001b[39m createStyleRegistry } \\u001b[36mfrom\\u001b[39m \\u001b[32m'styled-jsx'\\u001b[39m\\u001b[0m\\n\\u001b[0m\\u001b[31m\\u001b[1m\\u003e\\u001b[22m\\u001b[39m\\u001b[90m 3 | \\u001b[39m\\u001b[36mimport\\u001b[39m { \\u001b[33mServerStyleSheet\\u001b[39m\\u001b[33m,\\u001b[39m \\u001b[33mStyleSheetManager\\u001b[39m } \\u001b[36mfrom\\u001b[39m \\u001b[32m'styled-components'\\u001b[39m\\u001b[0m\\n\\u001b[0m \\u001b[90m 4 | \\u001b[39m\\u001b[36mimport\\u001b[39m { useFlushEffects } \\u001b[36mfrom\\u001b[39m \\u001b[32m'next/dist/client/components/hooks-client'\\u001b[39m\\u001b[0m\\n\\u001b[0m \\u001b[90m 5 | \\u001b[39m\\u001b[36mimport\\u001b[39m { useState } \\u001b[36mfrom\\u001b[39m \\u001b[32m'react'\\u001b[39m\\u001b[0m\\n\\u001b[0m \\u001b[90m 6 | \\u001b[39m\\u001b[0m\\n\\nImport trace for requested module:\\n./node_modules/.pnpm/file+..+next-repo-943017a9e84c897066933c4b836e50e2_2n3glgkt3itk5yrc6p4qjvb37e/node_modules/next/dist/build/webpack/loaders/next-flight-client-entry-loader.js?modules=%2Ftmp%2Fnext-install-d464d3b91d13760c00e78797f2d10eb1aee5374e672416ed9d3b2761d07ec9db%2Fapp%2Froot-style-registry.client.js\\u0026modules=next%2Flink\\u0026modules=next%2Fdist%2Fclient%2Fcomponents%2Fapp-router.client.js\\u0026modules=next%2Fdist%2Fclient%2Fcomponents%2Flayout-router.client.js\\u0026modules=next%2Fdist%2Fclient%2Fcomponents%2Fhot-reloader.client.js\\u0026runtime=nodejs\\u0026ssr=true\\u0026name=app%2Fpage!\\n\\n\\nhttps://nextjs.org/docs/messages/module-not-found\\n    at Object.getNotFoundError (/tmp/next-install-d464d3b91d13760c00e78797f2d10eb1aee5374e672416ed9d3b2761d07ec9db/node_modules/.pnpm/file+..+next-repo-943017a9e84c897066933c4b836e50e2_2n3glgkt3itk5yrc6p4qjvb37e/node_modules/next/dist/build/webpack/plugins/wellknown-errors-plugin/parseNotFoundError.js:86:16)\\n    at runMicrotasks (\\u003canonymous\\u003e)\\n    at processTicksAndRejections (node:internal/process/task_queues:96:5)\\n    at runNextTicks (node:internal/process/task_queues:65:3)\\n    at processImmediate (node:internal/timers:437:9)\\n    at async Object.getModuleBuildError (/tmp/next-install-d464d3b91d13760c00e78797f2d10eb1aee5374e672416ed9d3b2761d07ec9db/node_modules/.pnpm/file+..+next-repo-943017a9e84c897066933c4b836e50e2_2n3glgkt3itk5yrc6p4qjvb37e/node_modules/next/dist/build/webpack/plugins/wellknown-errors-plugin/webpackModuleError.js:95:27)\\n    at async /tmp/next-install-d464d3b91d13760c00e78797f2d10eb1aee5374e672416ed9d3b2761d07ec9db/node_modules/.pnpm/file+..+next-repo-943017a9e84c897066933c4b836e50e2_2n3glgkt3itk5yrc6p4qjvb37e/node_modules/next/dist/build/webpack/plugins/wellknown-errors-plugin/index.js:15:49\\n    at async Promise.all (index 0)\\n    at async /tmp/next-install-d464d3b91d13760c00e78797f2d10eb1aee5374e672416ed9d3b2761d07ec9db/node_modules/.pnpm/file+..+next-repo-943017a9e84c897066933c4b836e50e2_2n3glgkt3itk5yrc6p4qjvb37e/node_modules/next/dist/build/webpack/plugins/wellknown-errors-plugin/index.js:13:21\"},\"gip\":true,\"scriptLoader\":[]}</script><script nomodule=\"\" src=\"/_next/static/chunks/polyfills.js?ts=1659476598377\"></script><script src=\"/_next/static/chunks/fallback/webpack.js?ts=1659476598377\"></script><script src=\"/_next/static/chunks/fallback/main.js?ts=1659476598377\"></script><script src=\"/_next/static/chunks/fallback/pages/_app.js?ts=1659476598377\"></script><script src=\"/_next/static/chunks/fallback/pages/_error.js?ts=1659476598377\"></script></body></html>"

  78 |     // TODO: support next/head
  79 |     // expect(homeHTML).toMatch('<meta name="rsc-title" content="index"/>')
> 80 |     expect(homeHTML).toContain('component:index.server')
     |                      ^
  81 |     // TODO: support env
  82 |     // expect(homeHTML).toContain('env:env_var_test')
  83 |     expect(homeHTML).toContain('header:test-util')

  at Object.<anonymous> (e2e/app-dir/rsc-basic.test.ts:80:22)

● app dir - react server components › should support multi-level server component imports

expect(received).toContain(expected) // indexOf

Expected substring: "bar.server.js:"
Received string:    "<!DOCTYPE html><html><head><style data-next-hide-fouc=\"true\">body{display:none}</style><noscript data-next-hide-fouc=\"true\"><style>body{display:block}</style></noscript><meta charSet=\"utf-8\"/><meta name=\"viewport\" content=\"width=device-width\"/><meta name=\"next-head-count\" content=\"2\"/><noscript data-n-css=\"\"></noscript><link rel=\"preload\" href=\"/_next/static/chunks/fallback/webpack.js?ts=1659476601274\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/fallback/main.js?ts=1659476601274\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/fallback/pages/_app.js?ts=1659476601274\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/fallback/pages/_error.js?ts=1659476601274\" as=\"script\"/><noscript id=\"__next_css__DO_NOT_USE__\"></noscript></head><body><div id=\"__next\"></div><script src=\"/_next/static/chunks/fallback/react-refresh.js?ts=1659476601274\"></script><script id=\"__NEXT_DATA__\" type=\"application/json\">{\"props\":{\"pageProps\":{\"statusCode\":500}},\"page\":\"/_error\",\"query\":{},\"buildId\":\"development\",\"isFallback\":false,\"err\":{\"name\":\"Error\",\"source\":\"server\",\"message\":\"Module not found: Can't resolve 'styled-components'\\n  1 | import React from 'react'\\n  2 | import { StyleRegistry, createStyleRegistry } from 'styled-jsx'\\n\\u003e 3 | import { ServerStyleSheet, StyleSheetManager } from 'styled-components'\\n  4 | import { useFlushEffects } from 'next/dist/client/components/hooks-client'\\n  5 | import { useState } from 'react'\\n  6 | \\n\\nImport trace for requested module:\\n./node_modules/.pnpm/file+..+next-repo-943017a9e84c897066933c4b836e50e2_2n3glgkt3itk5yrc6p4qjvb37e/node_modules/next/dist/build/webpack/loaders/next-flight-client-entry-loader.js?modules=%2Ftmp%2Fnext-install-d464d3b91d13760c00e78797f2d10eb1aee5374e672416ed9d3b2761d07ec9db%2Fapp%2Froot-style-registry.client.js\\u0026modules=next%2Flink\\u0026modules=next%2Fdist%2Fclient%2Fcomponents%2Fapp-router.client.js\\u0026modules=next%2Fdist%2Fclient%2Fcomponents%2Flayout-router.client.js\\u0026modules=next%2Fdist%2Fclient%2Fcomponents%2Fhot-reloader.client.js\\u0026runtime=nodejs\\u0026ssr=true\\u0026name=app%2Fpage!\\n\\n\\nhttps://nextjs.org/docs/messages/module-not-found\",\"stack\":\"Error: Module not found: Can't resolve 'styled-components'\\n\\u001b[0m \\u001b[90m 1 | \\u001b[39m\\u001b[36mimport\\u001b[39m \\u001b[33mReact\\u001b[39m \\u001b[36mfrom\\u001b[39m \\u001b[32m'react'\\u001b[39m\\u001b[0m\\n\\u001b[0m \\u001b[90m 2 | \\u001b[39m\\u001b[36mimport\\u001b[39m { \\u001b[33mStyleRegistry\\u001b[39m\\u001b[33m,\\u001b[39m createStyleRegistry } \\u001b[36mfrom\\u001b[39m \\u001b[32m'styled-jsx'\\u001b[39m\\u001b[0m\\n\\u001b[0m\\u001b[31m\\u001b[1m\\u003e\\u001b[22m\\u001b[39m\\u001b[90m 3 | \\u001b[39m\\u001b[36mimport\\u001b[39m { \\u001b[33mServerStyleSheet\\u001b[39m\\u001b[33m,\\u001b[39m \\u001b[33mStyleSheetManager\\u001b[39m } \\u001b[36mfrom\\u001b[39m \\u001b[32m'styled-components'\\u001b[39m\\u001b[0m\\n\\u001b[0m \\u001b[90m 4 | \\u001b[39m\\u001b[36mimport\\u001b[39m { useFlushEffects } \\u001b[36mfrom\\u001b[39m \\u001b[32m'next/dist/client/components/hooks-client'\\u001b[39m\\u001b[0m\\n\\u001b[0m \\u001b[90m 5 | \\u001b[39m\\u001b[36mimport\\u001b[39m { useState } \\u001b[36mfrom\\u001b[39m \\u001b[32m'react'\\u001b[39m\\u001b[0m\\n\\u001b[0m \\u001b[90m 6 | \\u001b[39m\\u001b[0m\\n\\nImport trace for requested module:\\n./node_modules/.pnpm/file+..+next-repo-943017a9e84c897066933c4b836e50e2_2n3glgkt3itk5yrc6p4qjvb37e/node_modules/next/dist/build/webpack/loaders/next-flight-client-entry-loader.js?modules=%2Ftmp%2Fnext-install-d464d3b91d13760c00e78797f2d10eb1aee5374e672416ed9d3b2761d07ec9db%2Fapp%2Froot-style-registry.client.js\\u0026modules=next%2Flink\\u0026modules=next%2Fdist%2Fclient%2Fcomponents%2Fapp-router.client.js\\u0026modules=next%2Fdist%2Fclient%2Fcomponents%2Flayout-router.client.js\\u0026modules=next%2Fdist%2Fclient%2Fcomponents%2Fhot-reloader.client.js\\u0026runtime=nodejs\\u0026ssr=true\\u0026name=app%2Fpage!\\n\\n\\nhttps://nextjs.org/docs/messages/module-not-found\\n    at Object.getNotFoundError (/tmp/next-install-d464d3b91d13760c00e78797f2d10eb1aee5374e672416ed9d3b2761d07ec9db/node_modules/.pnpm/file+..+next-repo-943017a9e84c897066933c4b836e50e2_2n3glgkt3itk5yrc6p4qjvb37e/node_modules/next/dist/build/webpack/plugins/wellknown-errors-plugin/parseNotFoundError.js:86:16)\\n    at runMicrotasks (\\u003canonymous\\u003e)\\n    at processTicksAndRejections (node:internal/process/task_queues:96:5)\\n    at runNextTicks (node:internal/process/task_queues:65:3)\\n    at processImmediate (node:internal/timers:437:9)\\n    at async Object.getModuleBuildError (/tmp/next-install-d464d3b91d13760c00e78797f2d10eb1aee5374e672416ed9d3b2761d07ec9db/node_modules/.pnpm/file+..+next-repo-943017a9e84c897066933c4b836e50e2_2n3glgkt3itk5yrc6p4qjvb37e/node_modules/next/dist/build/webpack/plugins/wellknown-errors-plugin/webpackModuleError.js:95:27)\\n    at async /tmp/next-install-d464d3b91d13760c00e78797f2d10eb1aee5374e672416ed9d3b2761d07ec9db/node_modules/.pnpm/file+..+next-repo-943017a9e84c897066933c4b836e50e2_2n3glgkt3itk5yrc6p4qjvb37e/node_modules/next/dist/build/webpack/plugins/wellknown-errors-plugin/index.js:15:49\\n    at async Promise.all (index 0)\\n    at async /tmp/next-install-d464d3b91d13760c00e78797f2d10eb1aee5374e672416ed9d3b2761d07ec9db/node_modules/.pnpm/file+..+next-repo-943017a9e84c897066933c4b836e50e2_2n3glgkt3itk5yrc6p4qjvb37e/node_modules/next/dist/build/webpack/plugins/wellknown-errors-plugin/index.js:13:21\"},\"gip\":true,\"scriptLoader\":[]}</script><script nomodule=\"\" src=\"/_next/static/chunks/polyfills.js?ts=1659476601274\"></script><script src=\"/_next/static/chunks/fallback/webpack.js?ts=1659476601274\"></script><script src=\"/_next/static/chunks/fallback/main.js?ts=1659476601274\"></script><script src=\"/_next/static/chunks/fallback/pages/_app.js?ts=1659476601274\"></script><script src=\"/_next/static/chunks/fallback/pages/_error.js?ts=1659476601274\"></script></body></html>"

  127 |   it('should support multi-level server component imports', async () => {
  128 |     const html = await renderViaHTTP(next.url, '/multi')
> 129 |     expect(html).toContain('bar.server.js:')
      |                  ^
  130 |     expect(html).toContain('foo.client')
  131 |   })
  132 |

  at Object.<anonymous> (e2e/app-dir/rsc-basic.test.ts:129:18)

● app dir - react server components › should resolve different kinds of components correctly

TypeError: Cannot read properties of null (reading 'matchAll')

  136 |
  137 |     // Should have 5 occurrences of "client_component".
> 138 |     expect(Array.from(main.matchAll(/client_component/g)).length).toBe(5)
      |                            ^
  139 |
  140 |     // Should have 2 occurrences of "shared:server", and 2 occurrences of
  141 |     // "shared:client".

  at Object.<anonymous> (e2e/app-dir/rsc-basic.test.ts:138:28)

● app dir - react server components › should be able to navigate between rsc pages

page.waitForSelector: Timeout 30000ms exceeded.
=========================== logs ===========================
waiting for selector "#goto-next-link"
============================================================

  322 |     return this.chain(() => {
  323 |       return page
> 324 |         .waitForSelector(selector, { timeout, state: 'attached' })
      |          ^
  325 |         .then(async (el) => {
  326 |           // it seems selenium waits longer and tests rely on this behavior
  327 |           // so we wait for the load event fire before returning

  at lib/browsers/playwright.ts:324:10

● app dir - react server components › should handle streaming server components correctly

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `app dir - react server components should handle streaming server components correctly 1`

Snapshot: "next_streaming_data"
Received: null

  189 |       `document.querySelector('#content').innerText`
  190 |     )
> 191 |     expect(content).toMatchInlineSnapshot('"next_streaming_data"')
      |                     ^
  192 |   })
  193 |
  194 |   it('should support next/link in server components', async () => {

  at Object.<anonymous> (e2e/app-dir/rsc-basic.test.ts:191:21)

● app dir - react server components › should support next/link in server components

expect(received).toContain(expected) // indexOf

Expected substring: "home"
Received string:    ""

  196 |     const linkText = getNodeBySelector(linkHTML, 'body a[href="/root"]').text()
  197 |
> 198 |     expect(linkText).toContain('home')
      |                      ^
  199 |
  200 |     const browser = await webdriver(next.url, '/next-api/link')
  201 |

  at Object.<anonymous> (e2e/app-dir/rsc-basic.test.ts:198:22)

● app dir - react server components › should refresh correctly with next/link

page.waitForSelector: Timeout 30000ms exceeded.
=========================== logs ===========================
waiting for selector "#goto-next-link"
============================================================

  322 |     return this.chain(() => {
  323 |       return page
> 324 |         .waitForSelector(selector, { timeout, state: 'attached' })
      |          ^
  325 |         .then(async (el) => {
  326 |           // it seems selenium waits longer and tests rely on this behavior
  327 |           // so we wait for the load event fire before returning

  at lib/browsers/playwright.ts:324:10

● app dir - react server components › should suspense next/image in server components

expect(received).toContain(expected) // indexOf

Matcher error: received value must not be null nor undefined

Received has value: undefined

  261 |     const imageTag = getNodeBySelector(imageHTML, '#myimg')
  262 |
> 263 |     expect(imageTag.attr('src')).toContain('data:image')
      |                                  ^
  264 |   })
  265 |
  266 |   // TODO: support esm import for RSC

  at Object.<anonymous> (e2e/app-dir/rsc-basic.test.ts:263:34)

● app dir - react server components › should handle various kinds of exports correctly

expect(received).toContain(expected) // indexOf

Expected substring: "abcde"
Received string:    "{\"props\":{\"pageProps\":{\"statusCode\":500}},\"page\":\"/_error\",\"query\":{},\"buildId\":\"development\",\"isFallback\":false,\"err\":{\"name\":\"Error\",\"source\":\"server\",\"message\":\"Module not found: Can't resolve 'styled-components'\\n  1 | import React from 'react'\\n  2 | import { StyleRegistry, createStyleRegistry } from 'styled-jsx'\\n\\u003e 3 | import { ServerStyleSheet, StyleSheetManager } from 'styled-components'\\n  4 | import { useFlushEffects } from 'next/dist/client/components/hooks-client'\\n  5 | import { useState } from 'react'\\n  6 | \\n\\nImport trace for requested module:\\n./node_modules/.pnpm/file+..+next-repo-943017a9e84c897066933c4b836e50e2_2n3glgkt3itk5yrc6p4qjvb37e/node_modules/next/dist/build/webpack/loaders/next-flight-client-entry-loader.js?modules=%2Ftmp%2Fnext-install-d464d3b91d13760c00e78797f2d10eb1aee5374e672416ed9d3b2761d07ec9db%2Fapp%2Froot-style-registry.client.js\\u0026modules=next%2Flink\\u0026modules=next%2Fdist%2Fclient%2Fcomponents%2Fapp-router.client.js\\u0026modules=next%2Fdist%2Fclient%2Fcomponents%2Flayout-router.client.js\\u0026modules=next%2Fdist%2Fclient%2Fcomponents%2Fhot-reloader.client.js\\u0026runtime=nodejs\\u0026ssr=true\\u0026name=app%2Fpage!\\n\\n\\nhttps://nextjs.org/docs/messages/module-not-found\",\"stack\":\"Error: Module not found: Can't resolve 'styled-components'\\n\\u001b[0m \\u001b[90m 1 | \\u001b[39m\\u001b[36mimport\\u001b[39m \\u001b[33mReact\\u001b[39m \\u001b[36mfrom\\u001b[39m \\u001b[32m'react'\\u001b[39m\\u001b[0m\\n\\u001b[0m \\u001b[90m 2 | \\u001b[39m\\u001b[36mimport\\u001b[39m { \\u001b[33mStyleRegistry\\u001b[39m\\u001b[33m,\\u001b[39m createStyleRegistry } \\u001b[36mfrom\\u001b[39m \\u001b[32m'styled-jsx'\\u001b[39m\\u001b[0m\\n\\u001b[0m\\u001b[31m\\u001b[1m\\u003e\\u001b[22m\\u001b[39m\\u001b[90m 3 | \\u001b[39m\\u001b[36mimport\\u001b[39m { \\u001b[33mServerStyleSheet\\u001b[39m\\u001b[33m,\\u001b[39m \\u001b[33mStyleSheetManager\\u001b[39m } \\u001b[36mfrom\\u001b[39m \\u001b[32m'styled-components'\\u001b[39m\\u001b[0m\\n\\u001b[0m \\u001b[90m 4 | \\u001b[39m\\u001b[36mimport\\u001b[39m { useFlushEffects } \\u001b[36mfrom\\u001b[39m \\u001b[32m'next/dist/client/components/hooks-client'\\u001b[39m\\u001b[0m\\n\\u001b[0m \\u001b[90m 5 | \\u001b[39m\\u001b[36mimport\\u001b[39m { useState } \\u001b[36mfrom\\u001b[39m \\u001b[32m'react'\\u001b[39m\\u001b[0m\\n\\u001b[0m \\u001b[90m 6 | \\u001b[39m\\u001b[0m\\n\\nImport trace for requested module:\\n./node_modules/.pnpm/file+..+next-repo-943017a9e84c897066933c4b836e50e2_2n3glgkt3itk5yrc6p4qjvb37e/node_modules/next/dist/build/webpack/loaders/next-flight-client-entry-loader.js?modules=%2Ftmp%2Fnext-install-d464d3b91d13760c00e78797f2d10eb1aee5374e672416ed9d3b2761d07ec9db%2Fapp%2Froot-style-registry.client.js\\u0026modules=next%2Flink\\u0026modules=next%2Fdist%2Fclient%2Fcomponents%2Fapp-router.client.js\\u0026modules=next%2Fdist%2Fclient%2Fcomponents%2Flayout-router.client.js\\u0026modules=next%2Fdist%2Fclient%2Fcomponents%2Fhot-reloader.client.js\\u0026runtime=nodejs\\u0026ssr=true\\u0026name=app%2Fpage!\\n\\n\\nhttps://nextjs.org/docs/messages/module-not-found\\n    at Object.getNotFoundError (/tmp/next-install-d464d3b91d13760c00e78797f2d10eb1aee5374e672416ed9d3b2761d07ec9db/node_modules/.pnpm/file+..+next-repo-943017a9e84c897066933c4b836e50e2_2n3glgkt3itk5yrc6p4qjvb37e/node_modules/next/dist/build/webpack/plugins/wellknown-errors-plugin/parseNotFoundError.js:86:16)\\n    at runMicrotasks (\\u003canonymous\\u003e)\\n    at processTicksAndRejections (node:internal/process/task_queues:96:5)\\n    at runNextTicks (node:internal/process/task_queues:65:3)\\n    at processImmediate (node:internal/timers:437:9)\\n    at async Object.getModuleBuildError (/tmp/next-install-d464d3b91d13760c00e78797f2d10eb1aee5374e672416ed9d3b2761d07ec9db/node_modules/.pnpm/file+..+next-repo-943017a9e84c897066933c4b836e50e2_2n3glgkt3itk5yrc6p4qjvb37e/node_modules/next/dist/build/webpack/plugins/wellknown-errors-plugin/webpackModuleError.js:95:27)\\n    at async /tmp/next-install-d464d3b91d13760c00e78797f2d10eb1aee5374e672416ed9d3b2761d07ec9db/node_modules/.pnpm/file+..+next-repo-943017a9e84c897066933c4b836e50e2_2n3glgkt3itk5yrc6p4qjvb37e/node_modules/next/dist/build/webpack/plugins/wellknown-errors-plugin/index.js:15:49\\n    at async Promise.all (index 0)\\n    at async /tmp/next-install-d464d3b91d13760c00e78797f2d10eb1aee5374e672416ed9d3b2761d07ec9db/node_modules/.pnpm/file+..+next-repo-943017a9e84c897066933c4b836e50e2_2n3glgkt3itk5yrc6p4qjvb37e/node_modules/next/dist/build/webpack/plugins/wellknown-errors-plugin/index.js:13:21\"},\"gip\":true,\"scriptLoader\":[]}"

  291 |     const content = getNodeBySelector(html, 'body').text()
  292 |
> 293 |     expect(content).toContain('abcde')
      |                     ^
  294 |     expect(content).toContain('default-export-arrow.client')
  295 |     expect(content).toContain('named.client')
  296 |

  at Object.<anonymous> (e2e/app-dir/rsc-basic.test.ts:293:21)

● app dir - react server components › should support native modules in server component

expect(received).toContain(expected) // indexOf

Expected substring: "fs: function"
Received string:    "{\"props\":{\"pageProps\":{\"statusCode\":500}},\"page\":\"/_error\",\"query\":{},\"buildId\":\"development\",\"isFallback\":false,\"err\":{\"name\":\"Error\",\"source\":\"server\",\"message\":\"Module not found: Can't resolve 'styled-components'\\n  1 | import React from 'react'\\n  2 | import { StyleRegistry, createStyleRegistry } from 'styled-jsx'\\n\\u003e 3 | import { ServerStyleSheet, StyleSheetManager } from 'styled-components'\\n  4 | import { useFlushEffects } from 'next/dist/client/components/hooks-client'\\n  5 | import { useState } from 'react'\\n  6 | \\n\\nImport trace for requested module:\\n./node_modules/.pnpm/file+..+next-repo-943017a9e84c897066933c4b836e50e2_2n3glgkt3itk5yrc6p4qjvb37e/node_modules/next/dist/build/webpack/loaders/next-flight-client-entry-loader.js?modules=%2Ftmp%2Fnext-install-d464d3b91d13760c00e78797f2d10eb1aee5374e672416ed9d3b2761d07ec9db%2Fapp%2Froot-style-registry.client.js\\u0026modules=next%2Flink\\u0026modules=next%2Fdist%2Fclient%2Fcomponents%2Fapp-router.client.js\\u0026modules=next%2Fdist%2Fclient%2Fcomponents%2Flayout-router.client.js\\u0026modules=next%2Fdist%2Fclient%2Fcomponents%2Fhot-reloader.client.js\\u0026runtime=nodejs\\u0026ssr=true\\u0026name=app%2Fpage!\\n\\n\\nhttps://nextjs.org/docs/messages/module-not-found\",\"stack\":\"Error: Module not found: Can't resolve 'styled-components'\\n\\u001b[0m \\u001b[90m 1 | \\u001b[39m\\u001b[36mimport\\u001b[39m \\u001b[33mReact\\u001b[39m \\u001b[36mfrom\\u001b[39m \\u001b[32m'react'\\u001b[39m\\u001b[0m\\n\\u001b[0m \\u001b[90m 2 | \\u001b[39m\\u001b[36mimport\\u001b[39m { \\u001b[33mStyleRegistry\\u001b[39m\\u001b[33m,\\u001b[39m createStyleRegistry } \\u001b[36mfrom\\u001b[39m \\u001b[32m'styled-jsx'\\u001b[39m\\u001b[0m\\n\\u001b[0m\\u001b[31m\\u001b[1m\\u003e\\u001b[22m\\u001b[39m\\u001b[90m 3 | \\u001b[39m\\u001b[36mimport\\u001b[39m { \\u001b[33mServerStyleSheet\\u001b[39m\\u001b[33m,\\u001b[39m \\u001b[33mStyleSheetManager\\u001b[39m } \\u001b[36mfrom\\u001b[39m \\u001b[32m'styled-components'\\u001b[39m\\u001b[0m\\n\\u001b[0m \\u001b[90m 4 | \\u001b[39m\\u001b[36mimport\\u001b[39m { useFlushEffects } \\u001b[36mfrom\\u001b[39m \\u001b[32m'next/dist/client/components/hooks-client'\\u001b[39m\\u001b[0m\\n\\u001b[0m \\u001b[90m 5 | \\u001b[39m\\u001b[36mimport\\u001b[39m { useState } \\u001b[36mfrom\\u001b[39m \\u001b[32m'react'\\u001b[39m\\u001b[0m\\n\\u001b[0m \\u001b[90m 6 | \\u001b[39m\\u001b[0m\\n\\nImport trace for requested module:\\n./node_modules/.pnpm/file+..+next-repo-943017a9e84c897066933c4b836e50e2_2n3glgkt3itk5yrc6p4qjvb37e/node_modules/next/dist/build/webpack/loaders/next-flight-client-entry-loader.js?modules=%2Ftmp%2Fnext-install-d464d3b91d13760c00e78797f2d10eb1aee5374e672416ed9d3b2761d07ec9db%2Fapp%2Froot-style-registry.client.js\\u0026modules=next%2Flink\\u0026modules=next%2Fdist%2Fclient%2Fcomponents%2Fapp-router.client.js\\u0026modules=next%2Fdist%2Fclient%2Fcomponents%2Flayout-router.client.js\\u0026modules=next%2Fdist%2Fclient%2Fcomponents%2Fhot-reloader.client.js\\u0026runtime=nodejs\\u0026ssr=true\\u0026name=app%2Fpage!\\n\\n\\nhttps://nextjs.org/docs/messages/module-not-found\\n    at Object.getNotFoundError (/tmp/next-install-d464d3b91d13760c00e78797f2d10eb1aee5374e672416ed9d3b2761d07ec9db/node_modules/.pnpm/file+..+next-repo-943017a9e84c897066933c4b836e50e2_2n3glgkt3itk5yrc6p4qjvb37e/node_modules/next/dist/build/webpack/plugins/wellknown-errors-plugin/parseNotFoundError.js:86:16)\\n    at runMicrotasks (\\u003canonymous\\u003e)\\n    at processTicksAndRejections (node:internal/process/task_queues:96:5)\\n    at runNextTicks (node:internal/process/task_queues:65:3)\\n    at processImmediate (node:internal/timers:437:9)\\n    at async Object.getModuleBuildError (/tmp/next-install-d464d3b91d13760c00e78797f2d10eb1aee5374e672416ed9d3b2761d07ec9db/node_modules/.pnpm/file+..+next-repo-943017a9e84c897066933c4b836e50e2_2n3glgkt3itk5yrc6p4qjvb37e/node_modules/next/dist/build/webpack/plugins/wellknown-errors-plugin/webpackModuleError.js:95:27)\\n    at async /tmp/next-install-d464d3b91d13760c00e78797f2d10eb1aee5374e672416ed9d3b2761d07ec9db/node_modules/.pnpm/file+..+next-repo-943017a9e84c897066933c4b836e50e2_2n3glgkt3itk5yrc6p4qjvb37e/node_modules/next/dist/build/webpack/plugins/wellknown-errors-plugin/index.js:15:49\\n    at async Promise.all (index 0)\\n    at async /tmp/next-install-d464d3b91d13760c00e78797f2d10eb1aee5374e672416ed9d3b2761d07ec9db/node_modules/.pnpm/file+..+next-repo-943017a9e84c897066933c4b836e50e2_2n3glgkt3itk5yrc6p4qjvb37e/node_modules/next/dist/build/webpack/plugins/wellknown-errors-plugin/index.js:13:21\"},\"gip\":true,\"scriptLoader\":[]}"

  310 |     const content = getNodeBySelector(html, 'body').text()
  311 |
> 312 |     expect(content).toContain('fs: function')
      |                     ^
  313 |     expect(content).toContain('foo.client')
  314 |   })
  315 |

  at Object.<anonymous> (e2e/app-dir/rsc-basic.test.ts:312:21)

● app dir - react server components › should support the re-export syntax in server component

expect(received).toContain(expected) // indexOf

Expected substring: "bar.server.js:"
Received string:    ""

  318 |     const content = getNodeBySelector(html, '#bar').text()
  319 |
> 320 |     expect(content).toContain('bar.server.js:')
      |                     ^
  321 |   })
  322 |
  323 |   it.skip('should SSR styled-jsx correctly', async () => {

  at Object.<anonymous> (e2e/app-dir/rsc-basic.test.ts:320:21)

● app dir - react server components › should support streaming for flight response

expect(received).toContain(expected) // indexOf

Expected substring: "component:index.server"
Received string:    "J0:\"/_error\"
"

  331 |     await fetchViaHTTP(next.url, '/?__flight__=1').then(async (response) => {
  332 |       const result = await resolveStreamResponse(response)
> 333 |       expect(result).toContain('component:index.server')
      |                      ^
  334 |     })
  335 |   })
  336 |

  at e2e/app-dir/rsc-basic.test.ts:333:22
  at Object.<anonymous> (e2e/app-dir/rsc-basic.test.ts:331:5)

● app dir - react server components › should support partial hydration with inlined server data

expect(received).toBe(expected) // Object.is equality

Expected: true
Received: false

  354 |         })
  355 |
> 356 |         expect(gotFallback).toBe(true)
      |                             ^
  357 |         expect(gotData).toBe(true)
  358 |         expect(gotInlinedData).toBe(true)
  359 |       }

  at e2e/app-dir/rsc-basic.test.ts:356:29
  at Object.<anonymous> (e2e/app-dir/rsc-basic.test.ts:338:5)

Read more about building and testing Next.js in contributing.md.

@ijjk
Copy link
Member

ijjk commented Aug 2, 2022

Stats from current PR

Default Build (Decrease detected ✓)
General Overall increase ⚠️
vercel/next.js canary huozhi/next.js flush-styles-effects Change
buildDuration 19.4s 19.8s ⚠️ +418ms
buildDurationCached 6.9s 7s ⚠️ +160ms
nodeModulesSize 2.03 GB 2.03 GB ⚠️ +7.19 kB
nextStartRea..uration (ms) 270ms 261ms -9ms
nextDevReadyDuration 289ms 305ms ⚠️ +16ms
Page Load Tests Overall decrease ⚠️
vercel/next.js canary huozhi/next.js flush-styles-effects Change
/ failed reqs 0 0
/ total time (seconds) 7.112 7.228 ⚠️ +0.12
/ avg req/sec 351.53 345.9 ⚠️ -5.63
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 5.758 5.686 -0.07
/error-in-render avg req/sec 434.18 439.66 +5.48
Client Bundles (main, webpack) Overall decrease ✓
vercel/next.js canary huozhi/next.js flush-styles-effects Change
299.HASH.js gzip 179 B 180 B ⚠️ +1 B
framework-HASH.js gzip 42 kB 42 kB
main-HASH.js gzip 30.6 kB 30.6 kB -6 B
webpack-HASH.js gzip 1.54 kB 1.54 kB ⚠️ +1 B
Overall change 74.3 kB 74.3 kB -4 B
Legacy Client Bundles (polyfills)
vercel/next.js canary huozhi/next.js flush-styles-effects Change
polyfills-HASH.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages Overall decrease ✓
vercel/next.js canary huozhi/next.js flush-styles-effects Change
_app-HASH.js gzip 695 B 693 B -2 B
_error-HASH.js gzip 194 B 194 B
amp-HASH.js gzip 490 B 494 B ⚠️ +4 B
css-HASH.js gzip 328 B 328 B
dynamic-HASH.js gzip 2.35 kB 2.35 kB
head-HASH.js gzip 356 B 353 B -3 B
hooks-HASH.js gzip 805 B 805 B
image-HASH.js gzip 4.89 kB 4.89 kB -6 B
index-HASH.js gzip 263 B 263 B
link-HASH.js gzip 2.38 kB 2.38 kB -1 B
routerDirect..HASH.js gzip 321 B 320 B -1 B
script-HASH.js gzip 391 B 392 B ⚠️ +1 B
withRouter-HASH.js gzip 318 B 319 B ⚠️ +1 B
85e02e95b279..7e3.css gzip 107 B 107 B
Overall change 13.9 kB 13.9 kB -7 B
Client Build Manifests Overall decrease ✓
vercel/next.js canary huozhi/next.js flush-styles-effects Change
_buildManifest.js gzip 459 B 458 B -1 B
Overall change 459 B 458 B -1 B
Rendered Page Sizes
vercel/next.js canary huozhi/next.js flush-styles-effects Change
index.html gzip 521 B 522 B ⚠️ +1 B
link.html gzip 536 B 535 B -1 B
withRouter.html gzip 516 B 516 B
Overall change 1.57 kB 1.57 kB
Middleware size Overall decrease ✓
vercel/next.js canary huozhi/next.js flush-styles-effects Change
middleware.js gzip 17.6 kB 17.6 kB -18 B
edge-runtime..pack.js gzip 1.83 kB 1.83 kB
Overall change 19.5 kB 19.4 kB -18 B

Diffs

Diff for middleware.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [826],
   {
-    /***/ 776: /***/ (
+    /***/ 457: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -14,13 +14,13 @@
         /* harmony export */
       });
       /* harmony import */ var next_dist_server_web_adapter__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
-        222
+        35
       );
 
       (0,
       next_dist_server_web_adapter__WEBPACK_IMPORTED_MODULE_0__ /* .enhanceGlobals */.gL)();
 
-      var mod = __webpack_require__(561);
+      var mod = __webpack_require__(429);
       var handler = mod.middleware || mod.default;
 
       if (typeof handler !== "function") {
@@ -46,7 +46,7 @@
       /***/
     },
 
-    /***/ 561: /***/ (
+    /***/ 429: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -58,7 +58,7 @@
         /* harmony export */
       });
       /* harmony import */ var next_server__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
-        335
+        897
       );
       /* harmony import */ var next_server__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/ __webpack_require__.n(
         next_server__WEBPACK_IMPORTED_MODULE_0__
@@ -71,7 +71,7 @@
       /***/
     },
 
-    /***/ 436: /***/ (__unused_webpack_module, exports) => {
+    /***/ 7: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -91,7 +91,7 @@
       /***/
     },
 
-    /***/ 249: /***/ (__unused_webpack_module, exports) => {
+    /***/ 363: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -129,7 +129,7 @@
       /***/
     },
 
-    /***/ 719: /***/ (__unused_webpack_module, exports) => {
+    /***/ 427: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -161,7 +161,7 @@
       /***/
     },
 
-    /***/ 604: /***/ (
+    /***/ 858: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -172,8 +172,8 @@
         value: true
       });
       exports.addLocale = addLocale;
-      var _addPathPrefix = __webpack_require__(341);
-      var _pathHasPrefix = __webpack_require__(919);
+      var _addPathPrefix = __webpack_require__(280);
+      var _pathHasPrefix = __webpack_require__(26);
       function addLocale(path, locale, defaultLocale, ignorePrefix) {
         if (
           locale &&
@@ -193,7 +193,7 @@
       /***/
     },
 
-    /***/ 341: /***/ (
+    /***/ 280: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -204,7 +204,7 @@
         value: true
       });
       exports.addPathPrefix = addPathPrefix;
-      var _parsePath = __webpack_require__(445);
+      var _parsePath = __webpack_require__(747);
       function addPathPrefix(path, prefix) {
         if (!path.startsWith("/") || !prefix) {
           return path;
@@ -216,7 +216,7 @@
       /***/
     },
 
-    /***/ 706: /***/ (
+    /***/ 575: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -227,7 +227,7 @@
         value: true
       });
       exports.addPathSuffix = addPathSuffix;
-      var _parsePath = __webpack_require__(445);
+      var _parsePath = __webpack_require__(747);
       function addPathSuffix(path, suffix) {
         if (!path.startsWith("/") || !suffix) {
           return path;
@@ -239,7 +239,7 @@
       /***/
     },
 
-    /***/ 705: /***/ (
+    /***/ 512: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -250,10 +250,10 @@
         value: true
       });
       exports.formatNextPathnameInfo = formatNextPathnameInfo;
-      var _removeTrailingSlash = __webpack_require__(930);
-      var _addPathPrefix = __webpack_require__(341);
-      var _addPathSuffix = __webpack_require__(706);
-      var _addLocale = __webpack_require__(604);
+      var _removeTrailingSlash = __webpack_require__(106);
+      var _addPathPrefix = __webpack_require__(280);
+      var _addPathSuffix = __webpack_require__(575);
+      var _addLocale = __webpack_require__(858);
       function formatNextPathnameInfo(info) {
         let pathname = (0, _addLocale).addLocale(
           info.pathname,
@@ -281,7 +281,7 @@
       /***/
     },
 
-    /***/ 599: /***/ (
+    /***/ 399: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -292,9 +292,9 @@
         value: true
       });
       exports.getNextPathnameInfo = getNextPathnameInfo;
-      var _normalizeLocalePath = __webpack_require__(719);
-      var _removePathPrefix = __webpack_require__(217);
-      var _pathHasPrefix = __webpack_require__(919);
+      var _normalizeLocalePath = __webpack_require__(427);
+      var _removePathPrefix = __webpack_require__(751);
+      var _pathHasPrefix = __webpack_require__(26);
       function getNextPathnameInfo(pathname, options) {
         var _nextConfig;
         const { basePath, i18n, trailingSlash } =
@@ -344,7 +344,7 @@
       /***/
     },
 
-    /***/ 445: /***/ (__unused_webpack_module, exports) => {
+    /***/ 747: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -378,18 +378,14 @@
       /***/
     },
 
-    /***/ 919: /***/ (
-      __unused_webpack_module,
-      exports,
-      __webpack_require__
-    ) => {
+    /***/ 26: /***/ (__unused_webpack_module, exports, __webpack_require__) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
       exports.pathHasPrefix = pathHasPrefix;
-      var _parsePath = __webpack_require__(445);
+      var _parsePath = __webpack_require__(747);
       function pathHasPrefix(path, prefix) {
         if (typeof path !== "string") {
           return false;
@@ -401,7 +397,7 @@
       /***/
     },
 
-    /***/ 142: /***/ (__unused_webpack_module, exports) => {
+    /***/ 753: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -420,7 +416,7 @@
       /***/
     },
 
-    /***/ 217: /***/ (
+    /***/ 751: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -431,7 +427,7 @@
         value: true
       });
       exports.removePathPrefix = removePathPrefix;
-      var _pathHasPrefix = __webpack_require__(919);
+      var _pathHasPrefix = __webpack_require__(26);
       function removePathPrefix(path, prefix) {
         if ((0, _pathHasPrefix).pathHasPrefix(path, prefix)) {
           const withoutPrefix = path.slice(prefix.length);
@@ -445,7 +441,7 @@
       /***/
     },
 
-    /***/ 930: /***/ (__unused_webpack_module, exports) => {
+    /***/ 106: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -459,7 +455,7 @@
       /***/
     },
 
-    /***/ 748: /***/ module => {
+    /***/ 54: /***/ module => {
       var __dirname = "/";
       (() => {
         "use strict";
@@ -587,7 +583,7 @@
       /***/
     },
 
-    /***/ 491: /***/ (module, exports, __webpack_require__) => {
+    /***/ 826: /***/ (module, exports, __webpack_require__) => {
       var __dirname = "/";
       var __WEBPACK_AMD_DEFINE_RESULT__;
       (() => {
@@ -1429,11 +1425,7 @@
       /***/
     },
 
-    /***/ 222: /***/ (
-      __unused_webpack_module,
-      exports,
-      __webpack_require__
-    ) => {
+    /***/ 35: /***/ (__unused_webpack_module, exports, __webpack_require__) => {
       "use strict";
       var __webpack_unused_export__;
 
@@ -1443,13 +1435,13 @@
       exports.VL = adapter;
       exports.OT = blockUnallowedResponse;
       exports.gL = enhanceGlobals;
-      var _error = __webpack_require__(626);
-      var _utils = __webpack_require__(20);
-      var _fetchEvent = __webpack_require__(575);
-      var _request = __webpack_require__(989);
-      var _response = __webpack_require__(690);
-      var _relativizeUrl = __webpack_require__(142);
-      var _nextUrl = __webpack_require__(685);
+      var _error = __webpack_require__(182);
+      var _utils = __webpack_require__(93);
+      var _fetchEvent = __webpack_require__(339);
+      var _request = __webpack_require__(67);
+      var _response = __webpack_require__(367);
+      var _relativizeUrl = __webpack_require__(753);
+      var _nextUrl = __webpack_require__(322);
       async function adapter(params) {
         const requestUrl = new _nextUrl.NextURL(params.request.url, {
           headers: params.request.headers,
@@ -1660,7 +1652,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 626: /***/ (__unused_webpack_module, exports) => {
+    /***/ 182: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -1701,7 +1693,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 685: /***/ (
+    /***/ 322: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -1711,10 +1703,10 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
-      var _detectDomainLocale = __webpack_require__(249);
-      var _formatNextPathnameInfo = __webpack_require__(705);
-      var _getHostname = __webpack_require__(436);
-      var _getNextPathnameInfo = __webpack_require__(599);
+      var _detectDomainLocale = __webpack_require__(363);
+      var _formatNextPathnameInfo = __webpack_require__(512);
+      var _getHostname = __webpack_require__(7);
+      var _getNextPathnameInfo = __webpack_require__(399);
       const Internal = Symbol("NextURLInternal");
       class NextURL {
         constructor(input, baseOrOpts, opts) {
@@ -1935,7 +1927,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 114: /***/ (
+    /***/ 256: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -1945,7 +1937,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
-      var _cookie = _interopRequireDefault(__webpack_require__(748));
+      var _cookie = _interopRequireDefault(__webpack_require__(54));
       function _interopRequireDefault(obj) {
         return obj && obj.__esModule
           ? obj
@@ -2080,7 +2072,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 575: /***/ (
+    /***/ 339: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -2091,7 +2083,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
         value: true
       });
       exports.waitUntilSymbol = void 0;
-      var _error = __webpack_require__(626);
+      var _error = __webpack_require__(182);
       const responseSymbol = Symbol("response");
       const passThroughSymbol = Symbol("passThrough");
       const waitUntilSymbol = Symbol("waitUntil");
@@ -2144,21 +2136,17 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 989: /***/ (
-      __unused_webpack_module,
-      exports,
-      __webpack_require__
-    ) => {
+    /***/ 67: /***/ (__unused_webpack_module, exports, __webpack_require__) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
       exports.INTERNALS = void 0;
-      var _nextUrl = __webpack_require__(685);
-      var _utils = __webpack_require__(20);
-      var _error = __webpack_require__(626);
-      var _cookies = __webpack_require__(114);
+      var _nextUrl = __webpack_require__(322);
+      var _utils = __webpack_require__(93);
+      var _error = __webpack_require__(182);
+      var _cookies = __webpack_require__(256);
       const INTERNALS = Symbol("internal request");
       exports.INTERNALS = INTERNALS;
       class NextRequest extends Request {
@@ -2231,7 +2219,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 690: /***/ (
+    /***/ 367: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -2241,9 +2229,9 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
-      var _nextUrl = __webpack_require__(685);
-      var _utils = __webpack_require__(20);
-      var _cookies = __webpack_require__(114);
+      var _nextUrl = __webpack_require__(322);
+      var _utils = __webpack_require__(93);
+      var _cookies = __webpack_require__(256);
       const INTERNALS = Symbol("internal response");
       const REDIRECTS = new Set([301, 302, 303, 307, 308]);
       class NextResponse extends Response {
@@ -2333,7 +2321,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 240: /***/ (
+    /***/ 932: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -2347,7 +2335,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       __webpack_unused_export__ = isBot;
       exports.Nf = userAgentFromString;
       exports.WE = userAgent;
-      var _uaParserJs = _interopRequireDefault(__webpack_require__(491));
+      var _uaParserJs = _interopRequireDefault(__webpack_require__(826));
       function _interopRequireDefault(obj) {
         return obj && obj.__esModule
           ? obj
@@ -2375,7 +2363,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 20: /***/ (__unused_webpack_module, exports) => {
+    /***/ 93: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -2490,17 +2478,17 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 335: /***/ (
+    /***/ 897: /***/ (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) => {
       module.exports = {
-        NextRequest: __webpack_require__(989).NextRequest,
-        NextResponse: __webpack_require__(690).NextResponse,
-        userAgentFromString: __webpack_require__(240) /* .userAgentFromString */
+        NextRequest: __webpack_require__(67).NextRequest,
+        NextResponse: __webpack_require__(367).NextResponse,
+        userAgentFromString: __webpack_require__(932) /* .userAgentFromString */
           .Nf,
-        userAgent: __webpack_require__(240) /* .userAgent */.WE,
+        userAgent: __webpack_require__(932) /* .userAgent */.WE,
         // eslint-disable-next-line no-undef
         URLPattern: URLPattern
       };
@@ -2512,7 +2500,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
     // webpackRuntimeModules
     /******/ var __webpack_exec__ = moduleId =>
       __webpack_require__((__webpack_require__.s = moduleId));
-    /******/ var __webpack_exports__ = __webpack_exec__(776);
+    /******/ var __webpack_exports__ = __webpack_exec__(457);
     /******/ (_ENTRIES =
       typeof _ENTRIES === "undefined"
         ? {}
Diff for _buildManifest.js
@@ -1,25 +1,25 @@
 self.__BUILD_MANIFEST = {
   __rewrites: { beforeFiles: [], afterFiles: [], fallback: [] },
-  "/": ["static\u002Fchunks\u002Fpages\u002Findex-006025f296d93d1f.js"],
-  "/_error": ["static\u002Fchunks\u002Fpages\u002F_error-ec6f2dc249481230.js"],
-  "/amp": ["static\u002Fchunks\u002Fpages\u002Famp-a515134c4ff69648.js"],
+  "/": ["static\u002Fchunks\u002Fpages\u002Findex-1ecb7a225a122304.js"],
+  "/_error": ["static\u002Fchunks\u002Fpages\u002F_error-7c674188292aca70.js"],
+  "/amp": ["static\u002Fchunks\u002Fpages\u002Famp-c6502e31560a4966.js"],
   "/css": [
     "static\u002Fcss\u002F94fdbc56eafa2039.css",
-    "static\u002Fchunks\u002Fpages\u002Fcss-68d7610c482ac563.js"
+    "static\u002Fchunks\u002Fpages\u002Fcss-100e45427e857c65.js"
   ],
   "/dynamic": [
-    "static\u002Fchunks\u002Fpages\u002Fdynamic-12c77e7e12b2697b.js"
+    "static\u002Fchunks\u002Fpages\u002Fdynamic-6edce550d40dd020.js"
   ],
-  "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-c040cbe8d466bcb1.js"],
-  "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-691547ee2366d57c.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-b3973b2227cdca9d.js"],
-  "/link": ["static\u002Fchunks\u002Fpages\u002Flink-30bd80832e028943.js"],
+  "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-d456b89ea2e58ccb.js"],
+  "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-0b406ece32365f1b.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-25c5af811580029a.js"],
+  "/link": ["static\u002Fchunks\u002Fpages\u002Flink-4a5cdf2ef75013db.js"],
   "/routerDirect": [
-    "static\u002Fchunks\u002Fpages\u002FrouterDirect-d20c1124d8fb8f57.js"
+    "static\u002Fchunks\u002Fpages\u002FrouterDirect-3e618ba7c6256721.js"
   ],
-  "/script": ["static\u002Fchunks\u002Fpages\u002Fscript-c3bfac97d4fbba00.js"],
+  "/script": ["static\u002Fchunks\u002Fpages\u002Fscript-d318755acc6c0b22.js"],
   "/withRouter": [
-    "static\u002Fchunks\u002Fpages\u002FwithRouter-d6891bab587638a3.js"
+    "static\u002Fchunks\u002Fpages\u002FwithRouter-dee19dca16003991.js"
   ],
   sortedPages: [
     "\u002F",
Diff for _app-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [888],
   {
-    /***/ 3479: /***/ function(
+    /***/ 122: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/_app",
         function() {
-          return __webpack_require__(5909);
+          return __webpack_require__(777);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 5909: /***/ function(
+    /***/ 777: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -35,7 +35,7 @@
         .Z;
       var _createSuper = __webpack_require__(6320) /* ["default"] */.Z;
       var _runtimeJs = /*#__PURE__*/ _interopRequireDefault(
-        __webpack_require__(739)
+        __webpack_require__(3994)
       );
       Object.defineProperty(exports, "__esModule", {
         value: true
@@ -57,7 +57,7 @@
       var _interop_require_default = __webpack_require__(4507) /* ["default"] */
         .Z;
       var _react = _interop_require_default(__webpack_require__(9496));
-      var _utils = __webpack_require__(2973);
+      var _utils = __webpack_require__(6326);
       function appGetInitialProps(_) {
         return _appGetInitialProps.apply(this, arguments);
       }
@@ -126,7 +126,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 179], function() {
-      return __webpack_exec__(3479), __webpack_exec__(3668);
+      return __webpack_exec__(122), __webpack_exec__(7489);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for _error-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [820],
   {
-    /***/ 2929: /***/ function(
+    /***/ 3560: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/_error",
         function() {
-          return __webpack_require__(9103);
+          return __webpack_require__(2509);
         }
       ]);
       if (false) {
@@ -24,7 +24,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [888, 774, 179], function() {
-      return __webpack_exec__(2929);
+      return __webpack_exec__(3560);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for amp-HASH.js
@@ -1,17 +1,17 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [216],
   {
-    /***/ 94: /***/ function(
+    /***/ 7941: /***/ function(
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(2562);
+      module.exports = __webpack_require__(6824);
 
       /***/
     },
 
-    /***/ 9028: /***/ function(
+    /***/ 8958: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -19,7 +19,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/amp",
         function() {
-          return __webpack_require__(6385);
+          return __webpack_require__(9302);
         }
       ]);
       if (false) {
@@ -28,7 +28,7 @@
       /***/
     },
 
-    /***/ 2562: /***/ function(module, exports, __webpack_require__) {
+    /***/ 6824: /***/ function(module, exports, __webpack_require__) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -38,8 +38,8 @@
       var _interop_require_default = __webpack_require__(4507) /* ["default"] */
         .Z;
       var _react = _interop_require_default(__webpack_require__(9496));
-      var _ampContext = __webpack_require__(2556);
-      var _ampMode = __webpack_require__(7853);
+      var _ampContext = __webpack_require__(5789);
+      var _ampMode = __webpack_require__(9208);
       function useAmp() {
         // Don't assign the context value to a variable to save bytes
         return (0, _ampMode).isInAmpMode(
@@ -61,7 +61,7 @@
       /***/
     },
 
-    /***/ 6385: /***/ function(
+    /***/ 9302: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -78,7 +78,7 @@
         /* harmony export */
       });
       /* harmony import */ var next_amp__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
-        94
+        7941
       );
       /* harmony import */ var next_amp__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/ __webpack_require__.n(
         next_amp__WEBPACK_IMPORTED_MODULE_0__
@@ -102,7 +102,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [888, 774, 179], function() {
-      return __webpack_exec__(9028);
+      return __webpack_exec__(8958);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for css-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [706],
   {
-    /***/ 8281: /***/ function(
+    /***/ 9557: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/css",
         function() {
-          return __webpack_require__(4347);
+          return __webpack_require__(79);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 4347: /***/ function(
+    /***/ 79: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -29,7 +29,7 @@
         4637
       );
       /* harmony import */ var _css_module_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
-        4542
+        2054
       );
       /* harmony import */ var _css_module_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/ __webpack_require__.n(
         _css_module_css__WEBPACK_IMPORTED_MODULE_1__
@@ -48,7 +48,7 @@
       /***/
     },
 
-    /***/ 4542: /***/ function(module) {
+    /***/ 2054: /***/ function(module) {
       // extracted by mini-css-extract-plugin
       module.exports = { helloWorld: "css_helloWorld__qqNwY" };
 
@@ -61,7 +61,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function() {
-      return __webpack_exec__(8281);
+      return __webpack_exec__(9557);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for dynamic-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [739],
   {
-    /***/ 2744: /***/ function(
+    /***/ 5695: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/dynamic",
         function() {
-          return __webpack_require__(5547);
+          return __webpack_require__(9525);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 3005: /***/ function(module, exports, __webpack_require__) {
+    /***/ 6014: /***/ function(module, exports, __webpack_require__) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -34,7 +34,7 @@
       var _interop_require_default = __webpack_require__(4507) /* ["default"] */
         .Z;
       var _react = _interop_require_default(__webpack_require__(9496));
-      var _loadable = _interop_require_default(__webpack_require__(9675));
+      var _loadable = _interop_require_default(__webpack_require__(7679));
       function dynamic(dynamicOptions, options) {
         var loadableFn = _loadable.default;
         var loadableOptions = {
@@ -130,7 +130,7 @@
       /***/
     },
 
-    /***/ 577: /***/ function(
+    /***/ 8416: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -152,7 +152,7 @@
       /***/
     },
 
-    /***/ 9675: /***/ function(
+    /***/ 7679: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -172,7 +172,7 @@
       var _interop_require_default = __webpack_require__(4507) /* ["default"] */
         .Z;
       var _react = _interop_require_default(__webpack_require__(9496));
-      var _loadableContext = __webpack_require__(577);
+      var _loadableContext = __webpack_require__(8416);
       var useSyncExternalStore = (false ? 0 : __webpack_require__(4241))
         .useSyncExternalStore;
       var ALL_INITIALIZERS = [];
@@ -486,7 +486,7 @@
       /***/
     },
 
-    /***/ 5547: /***/ function(
+    /***/ 9525: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -503,7 +503,7 @@
         4637
       );
       /* harmony import */ var next_dynamic__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
-        1605
+        2123
       );
       /* harmony import */ var next_dynamic__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/ __webpack_require__.n(
         next_dynamic__WEBPACK_IMPORTED_MODULE_1__
@@ -512,13 +512,13 @@
       var DynamicHello = next_dynamic__WEBPACK_IMPORTED_MODULE_1___default()(
         function() {
           return __webpack_require__
-            .e(/* import() */ 299)
-            .then(__webpack_require__.bind(__webpack_require__, 5299));
+            .e(/* import() */ 128)
+            .then(__webpack_require__.bind(__webpack_require__, 5128));
         },
         {
           loadableGenerated: {
             webpack: function() {
-              return [/*require.resolve*/ 5299];
+              return [/*require.resolve*/ 5128];
             }
           }
         }
@@ -548,12 +548,12 @@
       /***/
     },
 
-    /***/ 1605: /***/ function(
+    /***/ 2123: /***/ function(
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(3005);
+      module.exports = __webpack_require__(6014);
 
       /***/
     },
@@ -655,7 +655,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function() {
-      return __webpack_exec__(2744);
+      return __webpack_exec__(5695);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for head-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [645],
   {
-    /***/ 4337: /***/ function(
+    /***/ 7148: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/head",
         function() {
-          return __webpack_require__(9288);
+          return __webpack_require__(7481);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 9288: /***/ function(
+    /***/ 7481: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -35,7 +35,7 @@
         4637
       );
       /* harmony import */ var next_head__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
-        8915
+        4616
       );
       /* harmony import */ var next_head__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/ __webpack_require__.n(
         next_head__WEBPACK_IMPORTED_MODULE_1__
@@ -71,12 +71,12 @@
       /***/
     },
 
-    /***/ 8915: /***/ function(
+    /***/ 4616: /***/ function(
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(681);
+      module.exports = __webpack_require__(4790);
 
       /***/
     }
@@ -87,7 +87,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function() {
-      return __webpack_exec__(4337);
+      return __webpack_exec__(7148);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for hooks-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [757],
   {
-    /***/ 4853: /***/ function(
+    /***/ 3515: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/hooks",
         function() {
-          return __webpack_require__(8367);
+          return __webpack_require__(1253);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 8367: /***/ function(
+    /***/ 1253: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -132,7 +132,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function() {
-      return __webpack_exec__(4853);
+      return __webpack_exec__(3515);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for image-HASH.js
@@ -26,7 +26,7 @@
       /***/
     },
 
-    /***/ 7570: /***/ function(
+    /***/ 1487: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -34,7 +34,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function() {
-          return __webpack_require__(1576);
+          return __webpack_require__(4789);
         }
       ]);
       if (false) {
@@ -43,7 +43,7 @@
       /***/
     },
 
-    /***/ 8976: /***/ function(module, exports, __webpack_require__) {
+    /***/ 361: /***/ function(module, exports, __webpack_require__) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -66,12 +66,12 @@
         4719
       ) /* ["default"] */.Z;
       var _react = _interop_require_wildcard(__webpack_require__(9496));
-      var _head = _interop_require_default(__webpack_require__(681));
-      var _imageConfig = __webpack_require__(5282);
-      var _useIntersection = __webpack_require__(227);
-      var _imageConfigContext = __webpack_require__(8584);
-      var _utils = __webpack_require__(2973);
-      var _normalizeTrailingSlash = __webpack_require__(3892);
+      var _head = _interop_require_default(__webpack_require__(4790));
+      var _imageConfig = __webpack_require__(5676);
+      var _useIntersection = __webpack_require__(5668);
+      var _imageConfigContext = __webpack_require__(76);
+      var _utils = __webpack_require__(6326);
+      var _normalizeTrailingSlash = __webpack_require__(7600);
       function Image(_param) {
         var src = _param.src,
           sizes = _param.sizes,
@@ -937,7 +937,7 @@
       /***/
     },
 
-    /***/ 227: /***/ function(module, exports, __webpack_require__) {
+    /***/ 5668: /***/ function(module, exports, __webpack_require__) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -949,7 +949,7 @@
       });
       exports.useIntersection = useIntersection;
       var _react = __webpack_require__(9496);
-      var _requestIdleCallback = __webpack_require__(5757);
+      var _requestIdleCallback = __webpack_require__(5617);
       var hasIntersectionObserver = typeof IntersectionObserver === "function";
       function useIntersection(param) {
         var rootRef = param.rootRef,
@@ -1082,7 +1082,7 @@
       /***/
     },
 
-    /***/ 1576: /***/ function(
+    /***/ 4789: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -1103,8 +1103,8 @@
 
       // EXTERNAL MODULE: ./node_modules/.pnpm/react@17.0.2/node_modules/react/jsx-runtime.js
       var jsx_runtime = __webpack_require__(4637);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_sfoxds7t5ydpegc3knd667wn6m/node_modules/next/image.js
-      var next_image = __webpack_require__(8114);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_sfoxds7t5ydpegc3knd667wn6m/node_modules/next/image.js
+      var next_image = __webpack_require__(4033);
       var image_default = /*#__PURE__*/ __webpack_require__.n(next_image); // CONCATENATED MODULE: ./pages/nextjs.png
       /* harmony default export */ var nextjs = {
         src: "/_next/static/media/nextjs.cae0b805.png",
@@ -1132,12 +1132,12 @@
       /***/
     },
 
-    /***/ 8114: /***/ function(
+    /***/ 4033: /***/ function(
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(8976);
+      module.exports = __webpack_require__(361);
 
       /***/
     }
@@ -1148,7 +1148,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function() {
-      return __webpack_exec__(7570);
+      return __webpack_exec__(1487);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for index-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [405],
   {
-    /***/ 4786: /***/ function(
+    /***/ 6967: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/",
         function() {
-          return __webpack_require__(5355);
+          return __webpack_require__(3973);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 5355: /***/ function(
+    /***/ 3973: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -46,7 +46,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [888, 774, 179], function() {
-      return __webpack_exec__(4786);
+      return __webpack_exec__(6967);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for link-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [644],
   {
-    /***/ 2783: /***/ function(
+    /***/ 9367: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/link",
         function() {
-          return __webpack_require__(4917);
+          return __webpack_require__(1849);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 8494: /***/ function(module, exports) {
+    /***/ 1908: /***/ function(module, exports) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -54,7 +54,7 @@
       /***/
     },
 
-    /***/ 861: /***/ function(module, exports, __webpack_require__) {
+    /***/ 882: /***/ function(module, exports, __webpack_require__) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -72,13 +72,13 @@
         4719
       ) /* ["default"] */.Z;
       var _react = _interop_require_default(__webpack_require__(9496));
-      var _router = __webpack_require__(7733);
-      var _addLocale = __webpack_require__(6049);
-      var _routerContext = __webpack_require__(2488);
-      var _appRouterContext = __webpack_require__(1849);
-      var _useIntersection = __webpack_require__(227);
-      var _getDomainLocale = __webpack_require__(8494);
-      var _addBasePath = __webpack_require__(5090);
+      var _router = __webpack_require__(8340);
+      var _addLocale = __webpack_require__(9465);
+      var _routerContext = __webpack_require__(1349);
+      var _appRouterContext = __webpack_require__(3407);
+      var _useIntersection = __webpack_require__(5668);
+      var _getDomainLocale = __webpack_require__(1908);
+      var _addBasePath = __webpack_require__(8126);
       // @ts-ignore useTransition exist
       var hasUseTransition =
         typeof _react.default.useTransition !== "undefined";
@@ -433,7 +433,7 @@
       /***/
     },
 
-    /***/ 227: /***/ function(module, exports, __webpack_require__) {
+    /***/ 5668: /***/ function(module, exports, __webpack_require__) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -445,7 +445,7 @@
       });
       exports.useIntersection = useIntersection;
       var _react = __webpack_require__(9496);
-      var _requestIdleCallback = __webpack_require__(5757);
+      var _requestIdleCallback = __webpack_require__(5617);
       var hasIntersectionObserver = typeof IntersectionObserver === "function";
       function useIntersection(param) {
         var rootRef = param.rootRef,
@@ -578,7 +578,7 @@
       /***/
     },
 
-    /***/ 1849: /***/ function(
+    /***/ 3407: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -604,7 +604,7 @@
       /***/
     },
 
-    /***/ 4917: /***/ function(
+    /***/ 1849: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -621,7 +621,7 @@
         4637
       );
       /* harmony import */ var next_link__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
-        8168
+        8728
       );
       /* harmony import */ var next_link__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/ __webpack_require__.n(
         next_link__WEBPACK_IMPORTED_MODULE_1__
@@ -652,12 +652,12 @@
       /***/
     },
 
-    /***/ 8168: /***/ function(
+    /***/ 8728: /***/ function(
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(861);
+      module.exports = __webpack_require__(882);
 
       /***/
     }
@@ -668,7 +668,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function() {
-      return __webpack_exec__(2783);
+      return __webpack_exec__(9367);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for routerDirect-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [58],
   {
-    /***/ 5863: /***/ function(
+    /***/ 4538: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/routerDirect",
         function() {
-          return __webpack_require__(7585);
+          return __webpack_require__(7451);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 7585: /***/ function(
+    /***/ 7451: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -35,7 +35,7 @@
         4637
       );
       /* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
-        9393
+        7084
       );
       /* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/ __webpack_require__.n(
         next_router__WEBPACK_IMPORTED_MODULE_1__
@@ -56,12 +56,12 @@
       /***/
     },
 
-    /***/ 9393: /***/ function(
+    /***/ 7084: /***/ function(
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(3668);
+      module.exports = __webpack_require__(7489);
 
       /***/
     }
@@ -72,7 +72,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function() {
-      return __webpack_exec__(5863);
+      return __webpack_exec__(4538);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for script-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [797],
   {
-    /***/ 581: /***/ function(
+    /***/ 2644: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/script",
         function() {
-          return __webpack_require__(6723);
+          return __webpack_require__(5292);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 6723: /***/ function(
+    /***/ 5292: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -35,7 +35,7 @@
         4637
       );
       /* harmony import */ var next_script__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
-        2311
+        7635
       );
       /* harmony import */ var next_script__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/ __webpack_require__.n(
         next_script__WEBPACK_IMPORTED_MODULE_1__
@@ -70,12 +70,12 @@
       /***/
     },
 
-    /***/ 2311: /***/ function(
+    /***/ 7635: /***/ function(
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(3948);
+      module.exports = __webpack_require__(3951);
 
       /***/
     }
@@ -86,7 +86,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function() {
-      return __webpack_exec__(581);
+      return __webpack_exec__(2644);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for withRouter-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [807],
   {
-    /***/ 4573: /***/ function(
+    /***/ 5577: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/withRouter",
         function() {
-          return __webpack_require__(667);
+          return __webpack_require__(2161);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 667: /***/ function(
+    /***/ 2161: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -35,7 +35,7 @@
         4637
       );
       /* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
-        9393
+        7084
       );
       /* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/ __webpack_require__.n(
         next_router__WEBPACK_IMPORTED_MODULE_1__
@@ -54,12 +54,12 @@
       /***/
     },
 
-    /***/ 9393: /***/ function(
+    /***/ 7084: /***/ function(
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(3668);
+      module.exports = __webpack_require__(7489);
 
       /***/
     }
@@ -70,7 +70,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function() {
-      return __webpack_exec__(4573);
+      return __webpack_exec__(5577);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for 299.HASH.js
@@ -1,8 +1,8 @@
 "use strict";
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
-  [299],
+  [128],
   {
-    /***/ 5299: /***/ function(
+    /***/ 5128: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
Diff for framework-HASH.js
@@ -19,7 +19,7 @@
  Modernizr 3.0.0pre (Custom Build) | MIT
 */
       var aa = __webpack_require__(9496),
-        m = __webpack_require__(9260),
+        m = __webpack_require__(2048),
         r = __webpack_require__(8051);
       function y(a) {
         for (
@@ -7895,7 +7895,7 @@
        * This source code is licensed under the MIT license found in the
        * LICENSE file in the root directory of this source tree.
        */
-      __webpack_require__(9260);
+      __webpack_require__(2048);
       var f = __webpack_require__(9496),
         g = 60103;
       exports.Fragment = 60107;
@@ -7948,7 +7948,7 @@
        * This source code is licensed under the MIT license found in the
        * LICENSE file in the root directory of this source tree.
        */
-      var l = __webpack_require__(9260),
+      var l = __webpack_require__(2048),
         n = 60103,
         p = 60106;
       exports.Fragment = 60107;
Diff for main-HASH.js

Diff too large to display

Diff for webpack-HASH.js
@@ -159,7 +159,7 @@
     /******/ __webpack_require__.u = function(chunkId) {
       /******/ // return url for filenames based on template
       /******/ return (
-        "static/chunks/" + chunkId + "." + "06a0ec22d4e398e5" + ".js"
+        "static/chunks/" + chunkId + "." + "e030bda2b87fb167" + ".js"
       );
       /******/
     };
Diff for index.html
@@ -11,23 +11,23 @@
       src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-eac555bfdd3554da.js"
+      src="/_next/static/chunks/webpack-7d45352f17e74673.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/framework-8755e6e713f733ae.js"
+      src="/_next/static/chunks/framework-044d557c64574856.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-e09493f4c2a3b20a.js"
+      src="/_next/static/chunks/main-acee257740c0521c.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/_app-ddcfea9321109dae.js"
+      src="/_next/static/chunks/pages/_app-97d65338c5bb5e9b.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/index-006025f296d93d1f.js"
+      src="/_next/static/chunks/pages/index-1ecb7a225a122304.js"
       defer=""
     ></script>
     <script src="/_next/static/BUILD_ID/_buildManifest.js" defer=""></script>
Diff for link.html
@@ -11,23 +11,23 @@
       src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-eac555bfdd3554da.js"
+      src="/_next/static/chunks/webpack-7d45352f17e74673.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/framework-8755e6e713f733ae.js"
+      src="/_next/static/chunks/framework-044d557c64574856.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-e09493f4c2a3b20a.js"
+      src="/_next/static/chunks/main-acee257740c0521c.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/_app-ddcfea9321109dae.js"
+      src="/_next/static/chunks/pages/_app-97d65338c5bb5e9b.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/link-30bd80832e028943.js"
+      src="/_next/static/chunks/pages/link-4a5cdf2ef75013db.js"
       defer=""
     ></script>
     <script src="/_next/static/BUILD_ID/_buildManifest.js" defer=""></script>
Diff for withRouter.html
@@ -11,23 +11,23 @@
       src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-eac555bfdd3554da.js"
+      src="/_next/static/chunks/webpack-7d45352f17e74673.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/framework-8755e6e713f733ae.js"
+      src="/_next/static/chunks/framework-044d557c64574856.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-e09493f4c2a3b20a.js"
+      src="/_next/static/chunks/main-acee257740c0521c.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/_app-ddcfea9321109dae.js"
+      src="/_next/static/chunks/pages/_app-97d65338c5bb5e9b.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/withRouter-d6891bab587638a3.js"
+      src="/_next/static/chunks/pages/withRouter-dee19dca16003991.js"
       defer=""
     ></script>
     <script src="/_next/static/BUILD_ID/_buildManifest.js" defer=""></script>

Default Build with SWC (Decrease detected ✓)
General Overall increase ⚠️
vercel/next.js canary huozhi/next.js flush-styles-effects Change
buildDuration 20.6s 22s ⚠️ +1.4s
buildDurationCached 7.2s 6.6s -547ms
nodeModulesSize 2.03 GB 2.03 GB ⚠️ +7.19 kB
nextStartRea..uration (ms) 283ms 259ms -24ms
nextDevReadyDuration 308ms 292ms -16ms
Page Load Tests Overall decrease ⚠️
vercel/next.js canary huozhi/next.js flush-styles-effects Change
/ failed reqs 0 0
/ total time (seconds) 7.021 7.248 ⚠️ +0.23
/ avg req/sec 356.07 344.9 ⚠️ -11.17
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 5.9 5.825 -0.08
/error-in-render avg req/sec 423.7 429.2 +5.5
Client Bundles (main, webpack) Overall decrease ✓
vercel/next.js canary huozhi/next.js flush-styles-effects Change
299.HASH.js gzip 178 B 179 B ⚠️ +1 B
framework-HASH.js gzip 42.5 kB 42.5 kB
main-HASH.js gzip 30.7 kB 30.7 kB -9 B
webpack-HASH.js gzip 1.53 kB 1.53 kB ⚠️ +1 B
Overall change 75 kB 74.9 kB -7 B
Legacy Client Bundles (polyfills)
vercel/next.js canary huozhi/next.js flush-styles-effects Change
polyfills-HASH.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages Overall decrease ✓
vercel/next.js canary huozhi/next.js flush-styles-effects Change
_app-HASH.js gzip 692 B 689 B -3 B
_error-HASH.js gzip 187 B 188 B ⚠️ +1 B
amp-HASH.js gzip 488 B 492 B ⚠️ +4 B
css-HASH.js gzip 329 B 330 B ⚠️ +1 B
dynamic-HASH.js gzip 2.53 kB 2.53 kB
head-HASH.js gzip 361 B 358 B -3 B
hooks-HASH.js gzip 794 B 794 B
image-HASH.js gzip 4.87 kB 4.87 kB -3 B
index-HASH.js gzip 263 B 263 B
link-HASH.js gzip 2.41 kB 2.41 kB
routerDirect..HASH.js gzip 321 B 318 B -3 B
script-HASH.js gzip 395 B 396 B ⚠️ +1 B
withRouter-HASH.js gzip 315 B 316 B ⚠️ +1 B
85e02e95b279..7e3.css gzip 107 B 107 B
Overall change 14.1 kB 14.1 kB -4 B
Client Build Manifests
vercel/next.js canary huozhi/next.js flush-styles-effects Change
_buildManifest.js gzip 457 B 457 B
Overall change 457 B 457 B
Rendered Page Sizes
vercel/next.js canary huozhi/next.js flush-styles-effects Change
index.html gzip 523 B 523 B
link.html gzip 537 B 536 B -1 B
withRouter.html gzip 517 B 518 B ⚠️ +1 B
Overall change 1.58 kB 1.58 kB
Middleware size Overall decrease ✓
vercel/next.js canary huozhi/next.js flush-styles-effects Change
middleware.js gzip 17.6 kB 17.6 kB -18 B
edge-runtime..pack.js gzip 1.83 kB 1.83 kB
Overall change 19.5 kB 19.4 kB -18 B

Diffs

Diff for middleware.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [826],
   {
-    /***/ 776: /***/ (
+    /***/ 457: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -14,13 +14,13 @@
         /* harmony export */
       });
       /* harmony import */ var next_dist_server_web_adapter__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
-        222
+        35
       );
 
       (0,
       next_dist_server_web_adapter__WEBPACK_IMPORTED_MODULE_0__ /* .enhanceGlobals */.gL)();
 
-      var mod = __webpack_require__(561);
+      var mod = __webpack_require__(429);
       var handler = mod.middleware || mod.default;
 
       if (typeof handler !== "function") {
@@ -46,7 +46,7 @@
       /***/
     },
 
-    /***/ 561: /***/ (
+    /***/ 429: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -58,7 +58,7 @@
         /* harmony export */
       });
       /* harmony import */ var next_server__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
-        335
+        897
       );
       /* harmony import */ var next_server__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/ __webpack_require__.n(
         next_server__WEBPACK_IMPORTED_MODULE_0__
@@ -71,7 +71,7 @@
       /***/
     },
 
-    /***/ 436: /***/ (__unused_webpack_module, exports) => {
+    /***/ 7: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -91,7 +91,7 @@
       /***/
     },
 
-    /***/ 249: /***/ (__unused_webpack_module, exports) => {
+    /***/ 363: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -129,7 +129,7 @@
       /***/
     },
 
-    /***/ 719: /***/ (__unused_webpack_module, exports) => {
+    /***/ 427: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -161,7 +161,7 @@
       /***/
     },
 
-    /***/ 604: /***/ (
+    /***/ 858: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -172,8 +172,8 @@
         value: true
       });
       exports.addLocale = addLocale;
-      var _addPathPrefix = __webpack_require__(341);
-      var _pathHasPrefix = __webpack_require__(919);
+      var _addPathPrefix = __webpack_require__(280);
+      var _pathHasPrefix = __webpack_require__(26);
       function addLocale(path, locale, defaultLocale, ignorePrefix) {
         if (
           locale &&
@@ -193,7 +193,7 @@
       /***/
     },
 
-    /***/ 341: /***/ (
+    /***/ 280: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -204,7 +204,7 @@
         value: true
       });
       exports.addPathPrefix = addPathPrefix;
-      var _parsePath = __webpack_require__(445);
+      var _parsePath = __webpack_require__(747);
       function addPathPrefix(path, prefix) {
         if (!path.startsWith("/") || !prefix) {
           return path;
@@ -216,7 +216,7 @@
       /***/
     },
 
-    /***/ 706: /***/ (
+    /***/ 575: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -227,7 +227,7 @@
         value: true
       });
       exports.addPathSuffix = addPathSuffix;
-      var _parsePath = __webpack_require__(445);
+      var _parsePath = __webpack_require__(747);
       function addPathSuffix(path, suffix) {
         if (!path.startsWith("/") || !suffix) {
           return path;
@@ -239,7 +239,7 @@
       /***/
     },
 
-    /***/ 705: /***/ (
+    /***/ 512: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -250,10 +250,10 @@
         value: true
       });
       exports.formatNextPathnameInfo = formatNextPathnameInfo;
-      var _removeTrailingSlash = __webpack_require__(930);
-      var _addPathPrefix = __webpack_require__(341);
-      var _addPathSuffix = __webpack_require__(706);
-      var _addLocale = __webpack_require__(604);
+      var _removeTrailingSlash = __webpack_require__(106);
+      var _addPathPrefix = __webpack_require__(280);
+      var _addPathSuffix = __webpack_require__(575);
+      var _addLocale = __webpack_require__(858);
       function formatNextPathnameInfo(info) {
         let pathname = (0, _addLocale).addLocale(
           info.pathname,
@@ -281,7 +281,7 @@
       /***/
     },
 
-    /***/ 599: /***/ (
+    /***/ 399: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -292,9 +292,9 @@
         value: true
       });
       exports.getNextPathnameInfo = getNextPathnameInfo;
-      var _normalizeLocalePath = __webpack_require__(719);
-      var _removePathPrefix = __webpack_require__(217);
-      var _pathHasPrefix = __webpack_require__(919);
+      var _normalizeLocalePath = __webpack_require__(427);
+      var _removePathPrefix = __webpack_require__(751);
+      var _pathHasPrefix = __webpack_require__(26);
       function getNextPathnameInfo(pathname, options) {
         var _nextConfig;
         const { basePath, i18n, trailingSlash } =
@@ -344,7 +344,7 @@
       /***/
     },
 
-    /***/ 445: /***/ (__unused_webpack_module, exports) => {
+    /***/ 747: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -378,18 +378,14 @@
       /***/
     },
 
-    /***/ 919: /***/ (
-      __unused_webpack_module,
-      exports,
-      __webpack_require__
-    ) => {
+    /***/ 26: /***/ (__unused_webpack_module, exports, __webpack_require__) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
       exports.pathHasPrefix = pathHasPrefix;
-      var _pars
Post job cleanup.
[command]/usr/bin/git version
git version 2.37.1
Temporarily overriding HOME='/home/runner/work/_temp/c82ca786-4ac0-40f3-8720-31c052b9c482' before making global git config changes
Adding repository directory to the temporary git global config as a safe directory
[command]/usr/bin/git config --global --add safe.directory /home/runner/work/next.js/next.js
[command]/usr/bin/git config --local --name-only --get-regexp core\.sshCommand
[command]/usr/bin/git submodule foreach --recursive git config --local --name-only --get-regexp 'core\.sshCommand' && git config --local --unset-all 'core.sshCommand' || :
[command]/usr/bin/git config --local --name-only --get-regexp http\.https\:\/\/github\.com\/\.extraheader
http.https://github.com/.extraheader
[command]/usr/bin/git config --local --unset-all http.https://github.com/.extraheader
[command]/usr/bin/git submodule foreach --recursive git config --local --name-only --get-regexp 'http\.https\:\/\/github\.com\/\.extraheader' && git config --local --unset-all 'http.https://github.com/.extraheader' || :
Cleaning up orphan processes
Commit: e70f80b03bd107d257f8bc11b5f20e740ca29f71

change cond

inject initial styles to end of head, add test

revert pnpm lock
@huozhi huozhi marked this pull request as ready for review August 3, 2022 12:13
@kodiakhq kodiakhq bot merged commit 4d0783d into vercel:canary Aug 3, 2022
@huozhi huozhi deleted the flush-styles-effects branch August 3, 2022 16:50
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Sep 3, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants