About Page
++ + ← Go Back + +
+
+
+
+
+ )
+}
diff --git a/examples/with-playwright/pages/index.js b/examples/with-playwright/pages/index.js
new file mode 100644
index 000000000000..25a4a7917178
--- /dev/null
+++ b/examples/with-playwright/pages/index.js
@@ -0,0 +1,77 @@
+import Head from 'next/head'
+import Image from 'next/image'
+import Link from 'next/link'
+import styles from '../styles/Home.module.css'
+
+export default function Home() {
+ return (
+
+
+ Create Next App
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/examples/with-playwright/playwright.config.ts b/examples/with-playwright/playwright.config.ts
new file mode 100644
index 000000000000..3254888985fa
--- /dev/null
+++ b/examples/with-playwright/playwright.config.ts
@@ -0,0 +1,67 @@
+import { PlaywrightTestConfig, devices } from '@playwright/test'
+import path from 'path'
+
+// Reference: https://playwright.dev/docs/test-configuration
+const config: PlaywrightTestConfig = {
+ // Timeout per test
+ timeout: 30 * 1000,
+ // Test directory
+ testDir: path.join(__dirname, 'e2e'),
+ // If a test fails, retry it additional 2 times
+ retries: 2,
+ // Artifacts folder where screenshots, videos, and traces are stored.
+ outputDir: 'test-results/',
+
+ // Run your local dev server before starting the tests:
+ // https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests
+ webServer: {
+ command: 'npm run dev',
+ port: 3000,
+ timeout: 120 * 1000,
+ reuseExistingServer: !process.env.CI,
+ },
+
+ use: {
+ // Retry a test if its failing with enabled tracing. This allows you to analyse the DOM, console logs, network traffic etc.
+ // More information: https://playwright.dev/docs/trace-viewer
+ trace: 'retry-with-trace',
+
+ // All available context options: https://playwright.dev/docs/api/class-browser#browser-new-context
+ // contextOptions: {
+ // ignoreHTTPSErrors: true,
+ // },
+ },
+
+ projects: [
+ {
+ name: 'Desktop Chrome',
+ use: {
+ ...devices['Desktop Chrome'],
+ },
+ },
+ // {
+ // name: 'Desktop Firefox',
+ // use: {
+ // ...devices['Desktop Firefox'],
+ // },
+ // },
+ // {
+ // name: 'Desktop Safari',
+ // use: {
+ // ...devices['Desktop Safari'],
+ // },
+ // },
+ // Test against mobile viewports.
+ {
+ name: 'Mobile Chrome',
+ use: {
+ ...devices['Pixel 5'],
+ },
+ },
+ {
+ name: 'Mobile Safari',
+ use: devices['iPhone 12'],
+ },
+ ],
+}
+export default config
diff --git a/examples/with-playwright/public/favicon.ico b/examples/with-playwright/public/favicon.ico
new file mode 100644
index 000000000000..718d6fea4835
Binary files /dev/null and b/examples/with-playwright/public/favicon.ico differ
diff --git a/examples/with-playwright/public/vercel.svg b/examples/with-playwright/public/vercel.svg
new file mode 100644
index 000000000000..fbf0e25a651c
--- /dev/null
+++ b/examples/with-playwright/public/vercel.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/examples/with-playwright/styles/Home.module.css b/examples/with-playwright/styles/Home.module.css
new file mode 100644
index 000000000000..35454bb74819
--- /dev/null
+++ b/examples/with-playwright/styles/Home.module.css
@@ -0,0 +1,121 @@
+.container {
+ min-height: 100vh;
+ padding: 0 0.5rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+}
+
+.main {
+ padding: 5rem 0;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+.footer {
+ width: 100%;
+ height: 100px;
+ border-top: 1px solid #eaeaea;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.footer a {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-grow: 1;
+}
+
+.title a {
+ color: #0070f3;
+ text-decoration: none;
+}
+
+.title a:hover,
+.title a:focus,
+.title a:active {
+ text-decoration: underline;
+}
+
+.title {
+ margin: 0;
+ line-height: 1.15;
+ font-size: 4rem;
+}
+
+.title,
+.description {
+ text-align: center;
+}
+
+.description {
+ line-height: 1.5;
+ font-size: 1.5rem;
+}
+
+.code {
+ background: #fafafa;
+ border-radius: 5px;
+ padding: 0.75rem;
+ font-size: 1.1rem;
+ font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
+ Bitstream Vera Sans Mono, Courier New, monospace;
+}
+
+.grid {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-wrap: wrap;
+ max-width: 800px;
+ margin-top: 3rem;
+}
+
+.card {
+ margin: 1rem;
+ padding: 1.5rem;
+ text-align: left;
+ color: inherit;
+ text-decoration: none;
+ border: 1px solid #eaeaea;
+ border-radius: 10px;
+ transition: color 0.15s ease, border-color 0.15s ease;
+ width: 45%;
+}
+
+.card:hover,
+.card:focus,
+.card:active {
+ color: #0070f3;
+ border-color: #0070f3;
+}
+
+.card h2 {
+ margin: 0 0 1rem 0;
+ font-size: 1.5rem;
+}
+
+.card p {
+ margin: 0;
+ font-size: 1.25rem;
+ line-height: 1.5;
+}
+
+.logo {
+ height: 1em;
+ margin-left: 0.5rem;
+}
+
+@media (max-width: 600px) {
+ .grid {
+ width: 100%;
+ flex-direction: column;
+ }
+}
diff --git a/examples/with-playwright/styles/globals.css b/examples/with-playwright/styles/globals.css
new file mode 100644
index 000000000000..e5e2dcc23baf
--- /dev/null
+++ b/examples/with-playwright/styles/globals.css
@@ -0,0 +1,16 @@
+html,
+body {
+ padding: 0;
+ margin: 0;
+ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+ Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+}
+
+a {
+ color: inherit;
+ text-decoration: none;
+}
+
+* {
+ box-sizing: border-box;
+}
diff --git a/examples/with-supertokens/.env b/examples/with-supertokens/.env
new file mode 100644
index 000000000000..9a88ce3f1b01
--- /dev/null
+++ b/examples/with-supertokens/.env
@@ -0,0 +1,14 @@
+# These are all working development keys.
+# IMPORTANT: You can use them during development, but for production use,
+# make sure to change them to keys issued for your app.
+
+GOOGLE_CLIENT_ID=1060725074195-kmeum4crr01uirfl2op9kd5acmi9jutn.apps.googleusercontent.com
+GOOGLE_CLIENT_SECRET=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
+
+GITHUB_CLIENT_ID=467101b197249757c71f
+GITHUB_CLIENT_SECRET=e97051221f4b6426e8fe8d51486396703012f5bd
+
+APPLE_CLIENT_ID=4398792-io.supertokens.example.service
+APPLE_KEY_ID=7M48Y4RYDL
+APPLE_TEAM_ID=YWQCXGJRJL
+APPLE_PRIVATE_KEY=-----BEGIN PRIVATE KEY-----\nMIGTAgEAMBMGByqGSM49AgEGCCqGSM49AwEHBHkwdwIBAQQgu8gXs+XYkqXD6Ala9Sf/iJXzhbwcoG5dMh1OonpdJUmgCgYIKoZIzj0DAQehRANCAASfrvlFbFCYqn3I2zeknYXLwtH30JuOKestDbSfZYxZNMqhF/OzdZFTV0zc5u5s3eN+oCWbnvl0hM+9IW0UlkdA\n-----END PRIVATE KEY-----
\ No newline at end of file
diff --git a/examples/with-supertokens/README.md b/examples/with-supertokens/README.md
index dc143596c6ff..31f3c4660c62 100644
--- a/examples/with-supertokens/README.md
+++ b/examples/with-supertokens/README.md
@@ -18,4 +18,5 @@ yarn create next-app --example with-supertokens with-supertokens-app
## Notes
-Take a look at [SuperTokens documentation](https://supertokens.io/docs/community/introduction).
+- Take a look at [SuperTokens documentation](https://supertokens.io/docs/community/introduction).
+- We have provided development OAuth keys for the various in build third party providers in the `.env` file. Feel free to use them for development purposes, but **please create your own keys for production use**.
diff --git a/examples/with-supertokens/config/backendConfig.js b/examples/with-supertokens/config/backendConfig.js
index 20b91ff544ac..64b10c7b62e8 100644
--- a/examples/with-supertokens/config/backendConfig.js
+++ b/examples/with-supertokens/config/backendConfig.js
@@ -15,18 +15,21 @@ export let backendConfig = () => {
// We have provided you with development keys which you can use for testing.
// IMPORTANT: Please replace them with your own OAuth keys for production use.
ThirdPartyEmailPasswordNode.Google({
- clientId:
- '1060725074195-kmeum4crr01uirfl2op9kd5acmi9jutn.apps.googleusercontent.com',
- clientSecret: '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',
+ clientId: process.env.GOOGLE_CLIENT_ID,
+ clientSecret: process.env.GOOGLE_CLIENT_SECRET,
}),
ThirdPartyEmailPasswordNode.Github({
- clientId: '467101b197249757c71f',
- clientSecret: 'e97051221f4b6426e8fe8d51486396703012f5bd',
+ clientId: process.env.GITHUB_CLIENT_ID,
+ clientSecret: process.env.GITHUB_CLIENT_SECRET,
+ }),
+ ThirdPartyEmailPasswordNode.Apple({
+ clientId: process.env.APPLE_CLIENT_ID,
+ clientSecret: {
+ keyId: process.env.APPLE_KEY_ID,
+ privateKey: process.env.APPLE_PRIVATE_KEY.replace(/\\n/g, '\n'),
+ teamId: process.env.APPLE_TEAM_ID,
+ },
}),
- // ThirdPartyEmailPasswordNode.Facebook({
- // clientSecret: process.env.FACEBOOK_CLIENT_SECRET || 'PLACEHOLDER',
- // clientId: process.env.FACEBOOK_CLIENT_ID || 'PLACEHOLDER',
- // }),
],
}),
SessionNode.init(),
diff --git a/examples/with-supertokens/config/frontendConfig.js b/examples/with-supertokens/config/frontendConfig.js
index 7ddfe54ed931..365deafb01c3 100644
--- a/examples/with-supertokens/config/frontendConfig.js
+++ b/examples/with-supertokens/config/frontendConfig.js
@@ -14,6 +14,7 @@ export let frontendConfig = () => {
providers: [
ThirdPartyEmailPasswordReact.Google.init(),
ThirdPartyEmailPasswordReact.Github.init(),
+ ThirdPartyEmailPasswordReact.Apple.init(),
],
},
}),
diff --git a/examples/with-supertokens/package.json b/examples/with-supertokens/package.json
index b8b60ba71617..74f8e063c6c1 100644
--- a/examples/with-supertokens/package.json
+++ b/examples/with-supertokens/package.json
@@ -10,7 +10,7 @@
"react": "17.0.1",
"react-dom": "17.0.1",
"supertokens-auth-react": "^0.17.0",
- "supertokens-node": "^8.0.0"
+ "supertokens-node": "^8.1.0"
},
"devDependencies": {
"eslint-config-next": "11.0.1"
diff --git a/lerna.json b/lerna.json
index 1ddbc442dafd..2f4f45f2751d 100644
--- a/lerna.json
+++ b/lerna.json
@@ -17,5 +17,5 @@
"registry": "https://registry.npmjs.org/"
}
},
- "version": "12.0.4-canary.8"
+ "version": "12.0.4-canary.12"
}
diff --git a/packages/create-next-app/package.json b/packages/create-next-app/package.json
index 4951f8508421..33358f4e1b01 100644
--- a/packages/create-next-app/package.json
+++ b/packages/create-next-app/package.json
@@ -1,6 +1,6 @@
{
"name": "create-next-app",
- "version": "12.0.4-canary.8",
+ "version": "12.0.4-canary.12",
"keywords": [
"react",
"next",
diff --git a/packages/eslint-config-next/package.json b/packages/eslint-config-next/package.json
index 1184ad5a01d8..c2fb09df93c8 100644
--- a/packages/eslint-config-next/package.json
+++ b/packages/eslint-config-next/package.json
@@ -1,6 +1,6 @@
{
"name": "eslint-config-next",
- "version": "12.0.4-canary.8",
+ "version": "12.0.4-canary.12",
"description": "ESLint configuration used by NextJS.",
"main": "index.js",
"license": "MIT",
@@ -9,7 +9,7 @@
"directory": "packages/eslint-config-next"
},
"dependencies": {
- "@next/eslint-plugin-next": "12.0.4-canary.8",
+ "@next/eslint-plugin-next": "12.0.4-canary.12",
"@rushstack/eslint-patch": "^1.0.8",
"@typescript-eslint/parser": "^5.0.0",
"eslint-import-resolver-node": "^0.3.4",
diff --git a/packages/eslint-plugin-next/lib/rules/no-server-import-in-page.js b/packages/eslint-plugin-next/lib/rules/no-server-import-in-page.js
new file mode 100644
index 000000000000..da3f59eeec13
--- /dev/null
+++ b/packages/eslint-plugin-next/lib/rules/no-server-import-in-page.js
@@ -0,0 +1,37 @@
+const path = require('path')
+
+module.exports = {
+ meta: {
+ docs: {
+ description:
+ 'Disallow importing next/server outside of pages/_middleware.js',
+ recommended: true,
+ url: 'https://nextjs.org/docs/messages/no-server-import-in-page',
+ },
+ },
+ create: function (context) {
+ return {
+ ImportDeclaration(node) {
+ if (node.source.value !== 'next/server') {
+ return
+ }
+
+ const paths = context.getFilename().split('pages')
+ const page = paths[paths.length - 1]
+
+ if (
+ !page ||
+ page.startsWith(`${path.sep}_middleware`) ||
+ page.startsWith(`${path.posix.sep}_middleware`)
+ ) {
+ return
+ }
+
+ context.report({
+ node,
+ message: `next/server should not be imported outside of pages/_middleware.js. See https://nextjs.org/docs/messages/no-server-import-in-page.`,
+ })
+ },
+ }
+ },
+}
diff --git a/packages/eslint-plugin-next/package.json b/packages/eslint-plugin-next/package.json
index 3dc1b0583b95..2fcf2899a007 100644
--- a/packages/eslint-plugin-next/package.json
+++ b/packages/eslint-plugin-next/package.json
@@ -1,6 +1,6 @@
{
"name": "@next/eslint-plugin-next",
- "version": "12.0.4-canary.8",
+ "version": "12.0.4-canary.12",
"description": "ESLint plugin for NextJS.",
"main": "lib/index.js",
"license": "MIT",
diff --git a/packages/next-bundle-analyzer/package.json b/packages/next-bundle-analyzer/package.json
index 3e691185242d..97065f20d6dc 100644
--- a/packages/next-bundle-analyzer/package.json
+++ b/packages/next-bundle-analyzer/package.json
@@ -1,6 +1,6 @@
{
"name": "@next/bundle-analyzer",
- "version": "12.0.4-canary.8",
+ "version": "12.0.4-canary.12",
"main": "index.js",
"license": "MIT",
"repository": {
diff --git a/packages/next-codemod/package.json b/packages/next-codemod/package.json
index 4ec73510645d..68f15ae0f641 100644
--- a/packages/next-codemod/package.json
+++ b/packages/next-codemod/package.json
@@ -1,6 +1,6 @@
{
"name": "@next/codemod",
- "version": "12.0.4-canary.8",
+ "version": "12.0.4-canary.12",
"license": "MIT",
"dependencies": {
"chalk": "4.1.0",
diff --git a/packages/next-env/package.json b/packages/next-env/package.json
index c3b5330214d4..68a052e3d16b 100644
--- a/packages/next-env/package.json
+++ b/packages/next-env/package.json
@@ -1,6 +1,6 @@
{
"name": "@next/env",
- "version": "12.0.4-canary.8",
+ "version": "12.0.4-canary.12",
"keywords": [
"react",
"next",
diff --git a/packages/next-mdx/package.json b/packages/next-mdx/package.json
index edf8c6de1258..220d37df00c3 100644
--- a/packages/next-mdx/package.json
+++ b/packages/next-mdx/package.json
@@ -1,6 +1,6 @@
{
"name": "@next/mdx",
- "version": "12.0.4-canary.8",
+ "version": "12.0.4-canary.12",
"main": "index.js",
"license": "MIT",
"repository": {
diff --git a/packages/next-plugin-storybook/package.json b/packages/next-plugin-storybook/package.json
index aac9ae64aa36..155a375c5e64 100644
--- a/packages/next-plugin-storybook/package.json
+++ b/packages/next-plugin-storybook/package.json
@@ -1,6 +1,6 @@
{
"name": "@next/plugin-storybook",
- "version": "12.0.4-canary.8",
+ "version": "12.0.4-canary.12",
"repository": {
"url": "vercel/next.js",
"directory": "packages/next-plugin-storybook"
diff --git a/packages/next-polyfill-module/package.json b/packages/next-polyfill-module/package.json
index 6ff0dce0cb34..ac689d847c40 100644
--- a/packages/next-polyfill-module/package.json
+++ b/packages/next-polyfill-module/package.json
@@ -1,6 +1,6 @@
{
"name": "@next/polyfill-module",
- "version": "12.0.4-canary.8",
+ "version": "12.0.4-canary.12",
"description": "A standard library polyfill for ES Modules supporting browsers (Edge 16+, Firefox 60+, Chrome 61+, Safari 10.1+)",
"main": "dist/polyfill-module.js",
"license": "MIT",
diff --git a/packages/next-polyfill-nomodule/package.json b/packages/next-polyfill-nomodule/package.json
index 8b6d01b4b667..fe653e4f22a8 100644
--- a/packages/next-polyfill-nomodule/package.json
+++ b/packages/next-polyfill-nomodule/package.json
@@ -1,6 +1,6 @@
{
"name": "@next/polyfill-nomodule",
- "version": "12.0.4-canary.8",
+ "version": "12.0.4-canary.12",
"description": "A polyfill for non-dead, nomodule browsers.",
"main": "dist/polyfill-nomodule.js",
"license": "MIT",
diff --git a/packages/next/build/entries.ts b/packages/next/build/entries.ts
index e2c478c0e834..3c4feca3e299 100644
--- a/packages/next/build/entries.ts
+++ b/packages/next/build/entries.ts
@@ -268,6 +268,7 @@ export function finalizeEntrypoint({
type: 'assign',
},
runtime: MIDDLEWARE_SSR_RUNTIME_WEBPACK,
+ asyncChunks: false,
...entry,
}
return ssrMiddlewareEntry
diff --git a/packages/next/build/jest/jest.ts b/packages/next/build/jest/jest.ts
index b4a098c6ec6b..644d5cd115e1 100644
--- a/packages/next/build/jest/jest.ts
+++ b/packages/next/build/jest/jest.ts
@@ -2,7 +2,7 @@ import { loadEnvConfig } from '@next/env'
import { resolve, join } from 'path'
import loadConfig from '../../server/config'
import { PHASE_TEST } from '../../shared/lib/constants'
-// import loadJsConfig from '../load-jsconfig'
+import loadJsConfig from '../load-jsconfig'
import * as Log from '../output/log'
async function getConfig(dir: string) {
@@ -51,7 +51,7 @@ export default function nextJest(options: { dir?: string } = {}) {
// Will be called and awaited by Jest
return async () => {
let nextConfig
- let paths
+ let jsConfig
let resolvedBaseUrl
let isEsmProject = false
if (options.dir) {
@@ -62,9 +62,9 @@ export default function nextJest(options: { dir?: string } = {}) {
nextConfig = await getConfig(resolvedDir)
loadEnvConfig(resolvedDir, false, Log)
// TODO: revisit when bug in SWC is fixed that strips `.css`
- // const result = await loadJsConfig(resolvedDir, nextConfig)
- // paths = result?.jsConfig?.compilerOptions?.paths
- // resolvedBaseUrl = result.resolvedBaseUrl
+ const result = await loadJsConfig(resolvedDir, nextConfig)
+ jsConfig = result.jsConfig
+ resolvedBaseUrl = result.resolvedBaseUrl
}
// Ensure provided async config is supported
const resolvedJestConfig =
@@ -107,10 +107,9 @@ export default function nextJest(options: { dir?: string } = {}) {
'^.+\\.(js|jsx|ts|tsx)$': [
require.resolve('../swc/jest-transformer'),
{
- styledComponents:
- nextConfig && nextConfig.experimental.styledComponents,
- paths,
- resolvedBaseUrl: resolvedBaseUrl,
+ nextConfig,
+ jsConfig,
+ resolvedBaseUrl,
isEsmProject,
},
],
diff --git a/packages/next/build/swc/Cargo.lock b/packages/next/build/swc/Cargo.lock
index 1592d50470bd..f333b56c7337 100644
--- a/packages/next/build/swc/Cargo.lock
+++ b/packages/next/build/swc/Cargo.lock
@@ -105,6 +105,18 @@ dependencies = [
"syn",
]
+[[package]]
+name = "auto_impl"
+version = "0.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7862e21c893d65a1650125d157eaeec691439379a1cee17ee49031b79236ada4"
+dependencies = [
+ "proc-macro-error",
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
[[package]]
name = "autocfg"
version = "0.1.7"
@@ -1627,9 +1639,9 @@ checksum = "6446ced80d6c486436db5c078dde11a9f73d42b57fb273121e160b84f63d894c"
[[package]]
name = "styled_components"
-version = "0.1.0"
+version = "0.2.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3bead63e50d51304ddf1f938513b5fec3dc66c57b0b742db6e4748ba61192fd5"
+checksum = "80be3206e0bfb4137e355c3370913169c03a656578b8d24583248e4503a8d50b"
dependencies = [
"Inflector",
"once_cell",
@@ -1643,9 +1655,9 @@ dependencies = [
[[package]]
name = "swc"
-version = "0.83.2"
+version = "0.85.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3b0ccb2669a3ed7f2db0b0bd7ae7cd10f6aed4ece385a031a1b078484bcb384e"
+checksum = "fe58bc90f561ccca81f4e8098c4387252c7c19d1673ecdfa0986a60446162848"
dependencies = [
"ahash",
"anyhow",
@@ -1692,9 +1704,9 @@ dependencies = [
[[package]]
name = "swc_bundler"
-version = "0.80.0"
+version = "0.82.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "91ec07321d14896d4de4b83af50fa65f1438180f69af056108c060e764ee32e3"
+checksum = "ccdb0cf4e0f26c0fe35e0ee06a14a17cfee9bd257da07815de2d2a7123e7e00b"
dependencies = [
"ahash",
"anyhow",
@@ -1719,14 +1731,16 @@ dependencies = [
"swc_ecma_transforms_optimization",
"swc_ecma_utils",
"swc_ecma_visit",
+ "swc_fast_graph",
+ "swc_graph_analyzer",
"tracing",
]
[[package]]
name = "swc_common"
-version = "0.14.5"
+version = "0.14.6"
source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2cc7f3a65556dcd305165d2d03068cc114df917435fe4d5220584c21a4d9684d"
+checksum = "1b4bae4ba78f7e0f82b85e1cb4b331ccc4473f1db38464ef4b9f13c8ac21e2dd"
dependencies = [
"ahash",
"ast_node",
@@ -1753,9 +1767,9 @@ dependencies = [
[[package]]
name = "swc_css"
-version = "0.20.0"
+version = "0.31.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "343b1a900015f36a115c1983cfceb5ba67d5fbf68c1c870176fd93dfe1414e1e"
+checksum = "706a6a61731552fc0adfa367acd26c1095e4af4d4cda2d1a8f9bbb9fb3edb27e"
dependencies = [
"swc_css_ast",
"swc_css_codegen",
@@ -1766,9 +1780,9 @@ dependencies = [
[[package]]
name = "swc_css_ast"
-version = "0.18.1"
+version = "0.29.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "254dd2d74d661928ccb9e459f17e0ec4c1629ec5fd9bae12e35105d825293610"
+checksum = "ecc5971c63c5ef848d7d6c9cb6d8da69b8fb2e98bf56266895367bea44f3e56b"
dependencies = [
"is-macro",
"serde",
@@ -1779,11 +1793,11 @@ dependencies = [
[[package]]
name = "swc_css_codegen"
-version = "0.18.0"
+version = "0.29.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "07e332f6d436ba6e8b4828a95aedb99d1c8099ad3f244ef6851891b03393ec1e"
+checksum = "708b3a52cfbf52edf4df499a17c8887a0a4c9632654a8d9e60a3e7172afb60ab"
dependencies = [
- "auto_impl",
+ "auto_impl 0.4.1",
"bitflags",
"swc_atoms",
"swc_common",
@@ -1806,9 +1820,9 @@ dependencies = [
[[package]]
name = "swc_css_parser"
-version = "0.20.0"
+version = "0.31.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c78469210fd16c8d6324179e5b365f6f700aa6a1cf3ca83fcc3958093c301d55"
+checksum = "79630423c25828a8ea5c1aba90687c3f4ef48ddcb31f9c97299e4c8ff0321c7b"
dependencies = [
"bitflags",
"lexical",
@@ -1820,9 +1834,9 @@ dependencies = [
[[package]]
name = "swc_css_utils"
-version = "0.15.0"
+version = "0.26.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "cdb75da62762e1b52bb8eda64c1d65e08ab74b5cf0fe17567bf1e18c5ce36e52"
+checksum = "bf42c983650eaa74303c92643f1c64212f66c92a5c4194f0071cfad2e90876d1"
dependencies = [
"swc_atoms",
"swc_common",
@@ -1832,9 +1846,9 @@ dependencies = [
[[package]]
name = "swc_css_visit"
-version = "0.17.0"
+version = "0.28.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "75a495b2287829d1721fb328a9667f38db020655f6fc61c712cb42a6650a4fbd"
+checksum = "397018fa9ec794307aafb56d8934c7abb8287cfe4ebf2842a1e3b7ff5b8974a8"
dependencies = [
"swc_atoms",
"swc_common",
@@ -1844,9 +1858,9 @@ dependencies = [
[[package]]
name = "swc_ecma_ast"
-version = "0.57.0"
+version = "0.58.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8b5299a017039d8c6a6aba0ed6aca8bdb9863d113d26af3d7ad54ada5f23281c"
+checksum = "3aca91ea5f5bc51155c1f86e83fa7483821c13d3719488ab75d99e2638b0ac22"
dependencies = [
"is-macro",
"num-bigint",
@@ -1858,9 +1872,9 @@ dependencies = [
[[package]]
name = "swc_ecma_codegen"
-version = "0.79.0"
+version = "0.80.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7ef0433372312eda24f69e4718b725de6e9ccfebe7ae8191d904a8b9e4a3670d"
+checksum = "0c00f3932d286865ae2784cd4da1926d7668032b156360831103fc2a24c5ff18"
dependencies = [
"bitflags",
"memchr",
@@ -1890,9 +1904,9 @@ dependencies = [
[[package]]
name = "swc_ecma_ext_transforms"
-version = "0.37.0"
+version = "0.38.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "02351bfbc674fd588c8b40f0b578adf1d34048a5c25d5bf551839d8ceb7be14d"
+checksum = "8e98c2e40c3b106c89d87a107b1af561a171c9f819ab3e1dd101fe6d129b67e2"
dependencies = [
"phf",
"swc_atoms",
@@ -1905,9 +1919,9 @@ dependencies = [
[[package]]
name = "swc_ecma_loader"
-version = "0.24.1"
+version = "0.24.2"
source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "208bdfe23426471c1214bca0023b561eb8bd127393842d9597cfcb8abe8e2fc0"
+checksum = "68b375e795ace0dcbdb528dc2fadd1666f44a5c212415ae4e01b8f7e379e7ca0"
dependencies = [
"ahash",
"anyhow",
@@ -1921,16 +1935,14 @@ dependencies = [
"serde_json",
"swc_atoms",
"swc_common",
- "swc_ecma_ast",
- "swc_ecma_visit",
"tracing",
]
[[package]]
name = "swc_ecma_minifier"
-version = "0.49.1"
+version = "0.51.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "aa0c081b2196816e9589fcf1ef85047cbae49664d0b1a88c8adfd94eb42bd4ec"
+checksum = "a7fbd027af67de996ed8730195067df8e830d67c11fbdca050689718e3baa3b6"
dependencies = [
"ahash",
"indexmap",
@@ -1956,9 +1968,9 @@ dependencies = [
[[package]]
name = "swc_ecma_parser"
-version = "0.77.0"
+version = "0.78.2"
source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a526a6dfb2146ea6337853dac7bd23e049fe9e8a9336d0a2ea8d748aa95a04be"
+checksum = "d3084ccfdbfaa87f6d8777ba05120058fcd3d7d9ae0261a782db5d38a7a70fc2"
dependencies = [
"either",
"enum_kind",
@@ -1977,9 +1989,9 @@ dependencies = [
[[package]]
name = "swc_ecma_preset_env"
-version = "0.64.0"
+version = "0.66.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ccdb2668c07a70beb4a0ab9003ee88dc7f8da6e8c0faf47b501b1925077b9711"
+checksum = "5ebfebde76a89d4ee64c76bb511bf5c924c366912b4611ec09483d580892eaa1"
dependencies = [
"ahash",
"dashmap",
@@ -2001,9 +2013,9 @@ dependencies = [
[[package]]
name = "swc_ecma_transforms"
-version = "0.93.0"
+version = "0.95.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "458bee9140196391eb44920c9bd4f5552e0ead3f542702984f5cd6922eda527c"
+checksum = "05b0a841f223cea0c5832a5431cd7b71a5c3ecfd81259608016e92479f359542"
dependencies = [
"swc_atoms",
"swc_common",
@@ -2023,9 +2035,9 @@ dependencies = [
[[package]]
name = "swc_ecma_transforms_base"
-version = "0.43.1"
+version = "0.44.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ec6efd25b5816a7a1481e4f6e95381157260cf2e3f167cabf7d5be6160ba9491"
+checksum = "9d9d453fc5025563ea75c2a40154cef06583d44e41df22284286719c4f1c52b4"
dependencies = [
"once_cell",
"phf",
@@ -2043,9 +2055,9 @@ dependencies = [
[[package]]
name = "swc_ecma_transforms_classes"
-version = "0.29.0"
+version = "0.30.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b91ed59e16a892088dc688895163971924db87eba05f3bd26782d6f4f7f10c2f"
+checksum = "07a73afb9f2760dab0a7a23181691cb0b785058e3fcf75e8da25fed45208ec84"
dependencies = [
"swc_atoms",
"swc_common",
@@ -2057,9 +2069,9 @@ dependencies = [
[[package]]
name = "swc_ecma_transforms_compat"
-version = "0.50.5"
+version = "0.52.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c2b0a85c7e3f09413f869d6d15803c03dc520c3d99f5ecc2371f90524b0fddff"
+checksum = "9bb2417c22c5b47bc6c5ae04d658857cafcc10fb30b8377b0818d0ebf25e15e3"
dependencies = [
"ahash",
"arrayvec",
@@ -2094,9 +2106,9 @@ dependencies = [
[[package]]
name = "swc_ecma_transforms_module"
-version = "0.56.2"
+version = "0.58.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "09ea4a52af186a13ad1317abfe985c89a7cbbc2922b2a780e2ad14f4644f59c6"
+checksum = "e2caeabc77971a09246634ce954450b7088645eba46d98461cfa580533e01af5"
dependencies = [
"Inflector",
"ahash",
@@ -2116,9 +2128,9 @@ dependencies = [
[[package]]
name = "swc_ecma_transforms_optimization"
-version = "0.63.0"
+version = "0.65.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "81dbb2e2ad03aa5e76932d767e7ca81469eb11780cd497bc74f03a7b726fb0f7"
+checksum = "0fceea7548e8dd9bfea423d4ebbe6a444696fd0a7c1e19be7685bdb93d0a16f9"
dependencies = [
"ahash",
"dashmap",
@@ -2140,9 +2152,9 @@ dependencies = [
[[package]]
name = "swc_ecma_transforms_proposal"
-version = "0.56.0"
+version = "0.58.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e0d5a54177c17ba9736ac65878fa677e17867de7b8e90dbe27c13e7cf5ff7aa3"
+checksum = "265ed86ce755fe0506ac95b457de609c3d06151fa9bac4da1bbf4d139d8439c5"
dependencies = [
"either",
"serde",
@@ -2160,9 +2172,9 @@ dependencies = [
[[package]]
name = "swc_ecma_transforms_react"
-version = "0.58.0"
+version = "0.60.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "262b788279078e7d521052e7b14f00a6d2c10aba436c7cde65618b979354dbb7"
+checksum = "83095530b047a35e98395abc6fe6aa00a1a76b7d54d36d563bdc9c4239bb78fd"
dependencies = [
"ahash",
"base64 0.13.0",
@@ -2185,9 +2197,9 @@ dependencies = [
[[package]]
name = "swc_ecma_transforms_testing"
-version = "0.44.0"
+version = "0.45.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b6242dc8f9a0d38ed105e93961b8d960297bcd725740d460676d431360a32cbc"
+checksum = "df96aa471719eb2541ee02a6a0b5d388d37ccc8f075ae16377314f4eaff80693"
dependencies = [
"ansi_term",
"anyhow",
@@ -2208,9 +2220,9 @@ dependencies = [
[[package]]
name = "swc_ecma_transforms_typescript"
-version = "0.59.0"
+version = "0.61.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "77be2906b25d4a50dedf1151c3d062a34e86fa41cc7e890295af2e8eebd10eb9"
+checksum = "64681fa9ed7c5b6bbce3be142ab25ca089aaf86c7ae14403fbf7845d77a28281"
dependencies = [
"serde",
"swc_atoms",
@@ -2225,9 +2237,9 @@ dependencies = [
[[package]]
name = "swc_ecma_utils"
-version = "0.51.0"
+version = "0.52.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "11dd67f85fe25b7aa4899ecc63191f50bc9c3bb13ccb8d4aa99800119eb3ff09"
+checksum = "bc871840407f0303e0b93e0a2517d885892e1da8a11a0e344ca06b70b4ecd68f"
dependencies = [
"once_cell",
"rayon",
@@ -2240,9 +2252,9 @@ dependencies = [
[[package]]
name = "swc_ecma_visit"
-version = "0.43.0"
+version = "0.44.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "45a31547556529dd5310219ace29d2c9c3b9316466d0e489ddaa59f1173c9a06"
+checksum = "4406ee81ef55497c0f9c24cd37080228b5b70d8a847aa7181f9ca3c532e39439"
dependencies = [
"num-bigint",
"swc_atoms",
@@ -2253,9 +2265,9 @@ dependencies = [
[[package]]
name = "swc_ecmascript"
-version = "0.85.0"
+version = "0.87.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "baa1b467fae5dc365f1bd533543160bec39beabfe04731213c9cb4dcbdae99f9"
+checksum = "9e766b0ce800f14c983fdeb2d6fb81880e341321841afd4ad1469d9f2ac79ecd"
dependencies = [
"swc_ecma_ast",
"swc_ecma_codegen",
@@ -2278,6 +2290,31 @@ dependencies = [
"syn",
]
+[[package]]
+name = "swc_fast_graph"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "216c58d35aaef9ba671166bae0e6137e6b652d5f6db1b1e9db728f8ef6fe3336"
+dependencies = [
+ "ahash",
+ "indexmap",
+ "petgraph",
+ "swc_common",
+]
+
+[[package]]
+name = "swc_graph_analyzer"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8f1092de242225a32932e6922bc4cac9b4f5557c967bc3a36eb63b563f301c31"
+dependencies = [
+ "ahash",
+ "auto_impl 0.5.0",
+ "petgraph",
+ "swc_fast_graph",
+ "tracing",
+]
+
[[package]]
name = "swc_macros_common"
version = "0.3.3"
@@ -2301,9 +2338,9 @@ dependencies = [
[[package]]
name = "swc_stylis"
-version = "0.17.0"
+version = "0.28.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "abaecce4623daa113dde2447251665636301e97c8e65d73dce76ede432ad5ce5"
+checksum = "55dc9ebf2ab47eba62cc4299370f29107bd7e77b7f15bd4b9616d728c4e4b3dd"
dependencies = [
"swc_atoms",
"swc_common",
diff --git a/packages/next/build/swc/Cargo.toml b/packages/next/build/swc/Cargo.toml
index ff0467aeb206..b34972a65b4a 100644
--- a/packages/next/build/swc/Cargo.toml
+++ b/packages/next/build/swc/Cargo.toml
@@ -23,24 +23,24 @@ retain_mut = "0.1.3"
rustc-hash = "1.1.0"
serde = "1"
serde_json = "1"
-styled_components = "0.1.0"
-swc = "0.83.1"
+styled_components = "0.2.0"
+swc = "0.85.0"
swc_atoms = "0.2.7"
-swc_bundler = { version = "0.80.0", features = ["concurrent"] }
+swc_bundler = { version = "0.82.0", features = ["concurrent"] }
swc_common = {version = "0.14.2", features = ["concurrent", "sourcemap"]}
-swc_css = "0.20.0"
-swc_ecma_loader = { version = "0.24.0", features = ["node", "lru"] }
-swc_ecma_preset_env = "0.64.0"
-swc_ecmascript = { version = "0.85.0", features = ["codegen", "minifier", "optimization", "parser", "react", "transforms", "typescript", "utils", "visit"] }
+swc_css = "0.31.0"
+swc_ecma_loader = { version = "0.24.2", features = ["node", "lru"] }
+swc_ecma_preset_env = "0.66.0"
+swc_ecmascript = { version = "0.87.0", features = ["codegen", "minifier", "optimization", "parser", "react", "transforms", "typescript", "utils", "visit"] }
swc_node_base = "0.5.1"
-swc_stylis = "0.17.0"
+swc_stylis = "0.28.0"
tracing = {version = "0.1.28", features = ["release_max_level_off"]}
[build-dependencies]
napi-build = "1"
[dev-dependencies]
-swc_ecma_transforms_testing = "0.44.0"
+swc_ecma_transforms_testing = "0.45.0"
testing = "0.15.1"
walkdir = "2.3.2"
diff --git a/packages/next/build/swc/jest-transformer.js b/packages/next/build/swc/jest-transformer.js
index 72dfc686f393..b58b9a102fc7 100644
--- a/packages/next/build/swc/jest-transformer.js
+++ b/packages/next/build/swc/jest-transformer.js
@@ -48,9 +48,9 @@ module.exports = {
isServer:
jestConfig.testEnvironment && jestConfig.testEnvironment === 'node',
filename,
- styledComponents: inputOptions.styledComponents,
- paths: inputOptions.paths,
- baseUrl: inputOptions.resolvedBaseUrl,
+ nextConfig: inputOptions.nextConfig,
+ jsConfig: inputOptions.jsConfig,
+ resolvedBaseUrl: inputOptions.resolvedBaseUrl,
esm:
isSupportEsm &&
isEsm(Boolean(inputOptions.isEsmProject), filename, jestConfig),
diff --git a/packages/next/build/swc/options.js b/packages/next/build/swc/options.js
index ea0254653665..1475914d1927 100644
--- a/packages/next/build/swc/options.js
+++ b/packages/next/build/swc/options.js
@@ -6,30 +6,36 @@ function getBaseSWCOptions({
development,
hasReactRefresh,
globalWindow,
- styledComponents,
- paths,
- baseUrl,
+ nextConfig,
+ resolvedBaseUrl,
+ jsConfig,
}) {
const isTSFile = filename.endsWith('.ts')
const isTypeScript = isTSFile || filename.endsWith('.tsx')
-
+ const paths = jsConfig?.compilerOptions?.paths
+ const enableDecorators = Boolean(
+ jsConfig?.compilerOptions?.experimentalDecorators
+ )
return {
jsc: {
- ...(baseUrl && paths
+ ...(resolvedBaseUrl && paths
? {
- baseUrl,
+ baseUrl: resolvedBaseUrl,
paths,
}
: {}),
parser: {
syntax: isTypeScript ? 'typescript' : 'ecmascript',
dynamicImport: true,
+ decorators: enableDecorators,
// Exclude regular TypeScript files from React transformation to prevent e.g. generic parameters and angle-bracket type assertion from being interpreted as JSX tags.
[isTypeScript ? 'tsx' : 'jsx']: isTSFile ? false : true,
},
transform: {
+ legacyDecorator: enableDecorators,
react: {
+ importSource: jsConfig?.compilerOptions?.jsxImportSource || 'react',
runtime: 'automatic',
pragma: 'React.createElement',
pragmaFrag: 'React.Fragment',
@@ -44,6 +50,10 @@ function getBaseSWCOptions({
typeofs: {
window: globalWindow ? 'object' : 'undefined',
},
+ envs: {
+ NODE_ENV: development ? '"development"' : '"production"',
+ },
+ // TODO: handle process.browser to match babel replacing as well
},
},
regenerator: {
@@ -51,7 +61,7 @@ function getBaseSWCOptions({
},
},
},
- styledComponents: styledComponents
+ styledComponents: nextConfig?.experimental?.styledComponents
? {
displayName: Boolean(development),
}
@@ -63,18 +73,19 @@ export function getJestSWCOptions({
isServer,
filename,
esm,
- styledComponents,
- paths,
- baseUrl,
+ nextConfig,
+ jsConfig,
+ // This is not passed yet as "paths" resolving needs a test first
+ // resolvedBaseUrl,
}) {
let baseOptions = getBaseSWCOptions({
filename,
development: false,
hasReactRefresh: false,
globalWindow: !isServer,
- styledComponents,
- paths,
- baseUrl,
+ nextConfig,
+ jsConfig,
+ // resolvedBaseUrl,
})
const isNextDist = nextDistPath.test(filename)
@@ -102,14 +113,19 @@ export function getLoaderSWCOptions({
pagesDir,
isPageFile,
hasReactRefresh,
- styledComponents,
+ nextConfig,
+ jsConfig,
+ // This is not passed yet as "paths" resolving is handled by webpack currently.
+ // resolvedBaseUrl,
}) {
let baseOptions = getBaseSWCOptions({
filename,
development,
globalWindow: !isServer,
hasReactRefresh,
- styledComponents,
+ nextConfig,
+ jsConfig,
+ // resolvedBaseUrl,
})
const isNextDist = nextDistPath.test(filename)
diff --git a/packages/next/build/swc/src/bundle/mod.rs b/packages/next/build/swc/src/bundle/mod.rs
index ca458582b1a2..8cff14010eaa 100644
--- a/packages/next/build/swc/src/bundle/mod.rs
+++ b/packages/next/build/swc/src/bundle/mod.rs
@@ -18,7 +18,7 @@ use swc_common::{
};
use swc_ecma_loader::{
resolvers::{lru::CachingResolver, node::NodeModulesResolver},
- NODE_BUILTINS,
+ TargetEnv, NODE_BUILTINS,
};
use swc_ecmascript::{
ast::*,
diff --git a/packages/next/build/swc/src/styled_jsx/transform_css.rs b/packages/next/build/swc/src/styled_jsx/transform_css.rs
index 229d0b0fb966..897324d63496 100644
--- a/packages/next/build/swc/src/styled_jsx/transform_css.rs
+++ b/packages/next/build/swc/src/styled_jsx/transform_css.rs
@@ -52,7 +52,8 @@ pub fn transform_css(
}
};
// ? Do we need to support optionally prefixing?
- ss.visit_mut_with(&mut prefixer());
+ ss.visit_mut_with(&mut FixedPrefixer);
+ ss.visit_mut_with(&mut CssFixer);
ss.visit_mut_with(&mut Namespacer {
class_name: match class_name {
Some(s) => s.clone(),
@@ -121,6 +122,38 @@ fn read_number(s: &str) -> (usize, usize) {
unreachable!("read_number(`{}`) is invalid because it is empty", s)
}
+/// Applies `prefixer`, but this avoids bug of `swc_stylis::prefixer()`.
+///
+/// TODO(kdy1): Remove this when we upgrade crates related to css. (The crate
+/// update is blocked by `ComplexSelectorChildren` issue)
+struct FixedPrefixer;
+
+impl VisitMut for FixedPrefixer {
+ fn visit_mut_style_rule(&mut self, n: &mut StyleRule) {
+ n.visit_mut_with(&mut prefixer());
+ }
+}
+
+/// This fixes invalid css.
+struct CssFixer;
+
+impl VisitMut for CssFixer {
+ fn visit_mut_media_query(&mut self, q: &mut MediaQuery) {
+ q.visit_mut_children_with(self);
+
+ match q {
+ MediaQuery::Text(q) => {
+ if q.raw.starts_with("__styled-jsx-placeholder-") {
+ // TODO(kdy1): Remove this once we have CST for media query.
+ // We need good error recovery for media queries to handle this.
+ q.raw = format!("({})", &q.value).into();
+ }
+ }
+ _ => {}
+ }
+ }
+}
+
struct Namespacer {
class_name: String,
is_global: bool,
@@ -167,7 +200,7 @@ impl Namespacer {
front_tokens.extend(block_tokens);
args.tokens = front_tokens;
let complex_selectors = panic::catch_unwind(|| {
- let x: Vec+ Welcome to Next.js! +
+ +
+ Get started by editing{' '}
+ pages/index.js
+
+
+
+
+ About Page →
+Playwright will test if this link is working.
+ + + + +Documentation →
+Find in-depth information about Next.js features and API.
+ + + +Learn →
+Learn about Next.js in an interactive course with quizzes!
+ + + +Examples →
+Discover and deploy boilerplate example Next.js projects.
+ + + +Deploy →
++ Instantly deploy your Next.js site to a public URL with Vercel. +
+ +
+
+
+)
diff --git a/packages/next/build/swc/tests/fixture/styled-jsx/issue-30480/output.js b/packages/next/build/swc/tests/fixture/styled-jsx/issue-30480/output.js
new file mode 100644
index 000000000000..892df0b6ee3b
--- /dev/null
+++ b/packages/next/build/swc/tests/fixture/styled-jsx/issue-30480/output.js
@@ -0,0 +1,16 @@
+import _JSXStyle from "styled-jsx/style";
+export default (({ breakPoint })=>
+
+ <_JSXStyle id={"6b843a9852a4be26"} dynamic={[
+ breakPoint
+ ]}>{`@media (${breakPoint}) {}`}
+
+
+);
diff --git a/packages/next/build/swc/tests/fixture/styled-jsx/issue-30570/input.js b/packages/next/build/swc/tests/fixture/styled-jsx/issue-30570/input.js
new file mode 100644
index 000000000000..a16b3561d6be
--- /dev/null
+++ b/packages/next/build/swc/tests/fixture/styled-jsx/issue-30570/input.js
@@ -0,0 +1,15 @@
+export default function IndexPage() {
+ return (
+
+
+ );
+ }
\ No newline at end of file
diff --git a/packages/next/build/swc/tests/fixture/styled-jsx/issue-30570/output.js b/packages/next/build/swc/tests/fixture/styled-jsx/issue-30570/output.js
new file mode 100644
index 000000000000..4f5180f25d51
--- /dev/null
+++ b/packages/next/build/swc/tests/fixture/styled-jsx/issue-30570/output.js
@@ -0,0 +1,12 @@
+import _JSXStyle from "styled-jsx/style";
+export default function IndexPage() {
+ return Hello World.
+ + +
+
+
;
+};
diff --git a/packages/next/build/swc/tests/fixture/styled-jsx/tpl-placeholder-1-as-property/output.js b/packages/next/build/swc/tests/fixture/styled-jsx/tpl-placeholder-1-as-property/output.js
index 61bce54c19e2..ceb0d1816bfe 100644
--- a/packages/next/build/swc/tests/fixture/styled-jsx/tpl-placeholder-1-as-property/output.js
+++ b/packages/next/build/swc/tests/fixture/styled-jsx/tpl-placeholder-1-as-property/output.js
@@ -21,7 +21,8 @@ export default class {
<_JSXStyle id={"8c1103276226be14"} dynamic={[
inputSize ? "height: calc(2 * var(--a)) !important;" : ""
- ]}>{`@media only screen {a.__jsx-style-dynamic-selector {${inputSize ? "height: calc(2 * var(--a)) !important;" : ""} }}`}
+ ]}>{`@media only screen {a.__jsx-style-dynamic-selector {${inputSize ? "height: calc(2 * var(--a)) !important;" : ""}
+ }}`}
;
}
diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index d4c0becc1db8..f25337ef17cb 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -321,6 +321,10 @@ export default async function getBaseWebpackConfig(
runWebpackSpan: Span
}
): PromiseHello World.
+ + + + <_JSXStyle id={"bbdada4ef17d18ef"}>{"@supports (display:flex) {h1 {color:hotpink}}"} + +(filename: P) -> io::Result Test Test Test
+ Hello
+
+ )
+}
diff --git a/test/development/basic/theme-ui/theme.js b/test/development/basic/theme-ui/theme.js
new file mode 100644
index 000000000000..7b12cbd96544
--- /dev/null
+++ b/test/development/basic/theme-ui/theme.js
@@ -0,0 +1,13 @@
+// example theme.js
+export default {
+ fonts: {
+ body: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
+ heading: '"Avenir Next", sans-serif',
+ monospace: 'Menlo, monospace',
+ },
+ colors: {
+ text: '#000',
+ background: '#fff',
+ primary: '#33e',
+ },
+}
diff --git a/test/integration/i18n-support/test/index.test.js b/test/integration/i18n-support/test/index.test.js
index 8212a6bb0827..87190ab5877d 100644
--- a/test/integration/i18n-support/test/index.test.js
+++ b/test/integration/i18n-support/test/index.test.js
@@ -431,7 +431,6 @@ describe('i18n Support', () => {
expect(res.status).toBe(404)
const $ = cheerio.load(await res.text())
const props = JSON.parse($('#props').text())
- console.log(props)
expect($('#not-found').text().length > 0).toBe(true)
expect(props).toEqual({
is404: true,
diff --git a/test/integration/middleware/core/pages/interface/_middleware.js b/test/integration/middleware/core/pages/interface/_middleware.js
index d20893a42782..b59a76d9eef4 100644
--- a/test/integration/middleware/core/pages/interface/_middleware.js
+++ b/test/integration/middleware/core/pages/interface/_middleware.js
@@ -13,6 +13,24 @@ export async function middleware(request) {
})
}
+ if (url.pathname.endsWith('/fetchURL')) {
+ const response = {}
+ try {
+ await fetch(new URL('http://localhost'))
+ } catch (err) {
+ response.error = {
+ name: err.name,
+ message: err.message,
+ }
+ } finally {
+ return new NextResponse(JSON.stringify(response), {
+ headers: {
+ 'content-type': 'application/json; charset=utf-8',
+ },
+ })
+ }
+ }
+
if (url.pathname.endsWith('/webcrypto')) {
const response = {}
try {
diff --git a/test/integration/middleware/core/pages/responses/deep/_middleware.js b/test/integration/middleware/core/pages/responses/deep/_middleware.js
index 1e9a129cc9bb..37d9dbe0521b 100644
--- a/test/integration/middleware/core/pages/responses/deep/_middleware.js
+++ b/test/integration/middleware/core/pages/responses/deep/_middleware.js
@@ -1,6 +1,9 @@
import { NextResponse } from 'next/server'
export async function middleware(request, _event) {
+ if (request.nextUrl.searchParams.get('deep-intercept') === 'true') {
+ return new NextResponse('intercepted!')
+ }
const next = NextResponse.next()
next.headers.set('x-deep-header', 'valid')
next.headers.append('x-append-me', 'deep')
diff --git a/test/integration/middleware/core/test/index.test.js b/test/integration/middleware/core/test/index.test.js
index 19fd085cc2cf..c92a60b8627f 100644
--- a/test/integration/middleware/core/test/index.test.js
+++ b/test/integration/middleware/core/test/index.test.js
@@ -156,6 +156,16 @@ function rewriteTests(locale = '') {
expect($('.title').text()).toBe('About Page')
})
+ it(`${locale} should rewrite when not using localhost`, async () => {
+ const res = await fetchViaHTTP(
+ `http://localtest.me:${context.appPort}`,
+ `${locale}/rewrites/rewrite-me-without-hard-navigation`
+ )
+ const html = await res.text()
+ const $ = cheerio.load(html)
+ expect($('.title').text()).toBe('About Page')
+ })
+
it(`${locale} should rewrite to Vercel`, async () => {
const res = await fetchViaHTTP(
context.appPort,
@@ -341,6 +351,14 @@ function responseTests(locale = '') {
'foo=oatmeal',
])
})
+
+ it(`${locale} should be intercepted by deep middleware`, async () => {
+ const res = await fetchViaHTTP(
+ context.appPort,
+ `${locale}/responses/deep?deep-intercept=true`
+ )
+ expect(await res.text()).toBe('intercepted!')
+ })
}
function interfaceTests(locale = '') {
@@ -356,6 +374,13 @@ function interfaceTests(locale = '') {
expect('error' in response).toBe(false)
})
+ it(`${locale} fetch accepts a URL instance`, async () => {
+ const res = await fetchViaHTTP(context.appPort, '/interface/fetchURL')
+ const response = await res.json()
+ expect('error' in response).toBe(true)
+ expect(response.error.name).not.toBe('TypeError')
+ })
+
it(`${locale} should validate request url parameters from a static route`, async () => {
const res = await fetchViaHTTP(
context.appPort,
diff --git a/test/integration/non-standard-node-env-warning/test/index.test.js b/test/integration/non-standard-node-env-warning/test/index.test.js
index 09c3097dfbc0..5a27946ea175 100644
--- a/test/integration/non-standard-node-env-warning/test/index.test.js
+++ b/test/integration/non-standard-node-env-warning/test/index.test.js
@@ -1,5 +1,6 @@
/* eslint-env jest */
-
+import glob from 'glob'
+import fs from 'fs-extra'
import { join } from 'path'
import {
findPort,
@@ -7,6 +8,7 @@ import {
killApp,
waitFor,
initNextServerScript,
+ nextBuild,
} from 'next-test-utils'
const appDir = join(__dirname, '..')
@@ -77,6 +79,29 @@ describe('Non-Standard NODE_ENV', () => {
expect(output).not.toContain(warningText)
})
+ it('should still DCE NODE_ENV specific code', async () => {
+ await nextBuild(appDir, undefined, {
+ env: {
+ NODE_ENV: 'test',
+ },
+ })
+
+ const staticFiles = glob.sync('**/*.js', {
+ cwd: join(appDir, '.next/static'),
+ })
+ expect(staticFiles.length).toBeGreaterThan(0)
+
+ for (const file of staticFiles) {
+ const content = await fs.readFile(
+ join(appDir, '.next/static', file),
+ 'utf8'
+ )
+ if (content.match(/cannot find module/i)) {
+ throw new Error(`${file} contains module not found error`)
+ }
+ }
+ })
+
it('should show the warning with NODE_ENV set to invalid value', async () => {
let output = ''
diff --git a/test/integration/react-18/app/components/dynamic-hello.js b/test/integration/react-18/app/components/dynamic-hello.js
index 594812b5e216..61d0ecaea9b8 100644
--- a/test/integration/react-18/app/components/dynamic-hello.js
+++ b/test/integration/react-18/app/components/dynamic-hello.js
@@ -4,7 +4,7 @@ import dynamic from 'next/dynamic'
let ssr
const suspense = false
-const Hello = dynamic(() => import(/* webpackMode: "eager" */ './hello'), {
+const Hello = dynamic(() => import('./hello'), {
ssr,
suspense,
})
diff --git a/test/integration/react-streaming-and-server-components/test/index.test.js b/test/integration/react-streaming-and-server-components/test/index.test.js
index 05b7218ccc5d..d0d26c4671a1 100644
--- a/test/integration/react-streaming-and-server-components/test/index.test.js
+++ b/test/integration/react-streaming-and-server-components/test/index.test.js
@@ -162,8 +162,7 @@ describe('concurrentFeatures - dev', () => {
await killApp(context.server)
})
- // TODO: re-enabled test when update webpack with chunkLoading support
- it.skip('should support React.lazy and dynamic imports', async () => {
+ it('should support React.lazy and dynamic imports', async () => {
const html = await renderViaHTTP(context.appPort, '/dynamic-imports')
expect(html).toContain('loading...')
diff --git a/test/lib/next-test-utils.js b/test/lib/next-test-utils.js
index 99a5b66ce382..b834a802eb47 100644
--- a/test/lib/next-test-utils.js
+++ b/test/lib/next-test-utils.js
@@ -129,10 +129,10 @@ export function runNextCommand(argv, options = {}) {
// Let Next.js decide the environment
const env = {
...process.env,
- ...options.env,
NODE_ENV: '',
__NEXT_TEST_MODE: 'true',
NEXT_PRIVATE_OUTPUT_TRACE_ROOT: path.join(__dirname, '../../'),
+ ...options.env,
}
return new Promise((resolve, reject) => {
diff --git a/test/production/required-server-files-i18n.test.ts b/test/production/required-server-files-i18n.test.ts
new file mode 100644
index 000000000000..6285ccfb69a7
--- /dev/null
+++ b/test/production/required-server-files-i18n.test.ts
@@ -0,0 +1,721 @@
+import glob from 'glob'
+import fs from 'fs-extra'
+import cheerio from 'cheerio'
+import { join } from 'path'
+import { createNext, FileRef } from 'e2e-utils'
+import { NextInstance } from 'test/lib/next-modes/base'
+import {
+ check,
+ fetchViaHTTP,
+ findPort,
+ initNextServerScript,
+ killApp,
+ renderViaHTTP,
+} from 'next-test-utils'
+
+describe('should set-up next', () => {
+ let next: NextInstance
+ let server
+ let appPort
+ let errors = []
+ let requiredFilesManifest
+
+ beforeAll(async () => {
+ next = await createNext({
+ files: {
+ pages: new FileRef(join(__dirname, 'required-server-files/pages')),
+ lib: new FileRef(join(__dirname, 'required-server-files/lib')),
+ 'data.txt': new FileRef(
+ join(__dirname, 'required-server-files/data.txt')
+ ),
+ },
+ nextConfig: {
+ i18n: {
+ locales: ['en', 'fr'],
+ defaultLocale: 'en',
+ },
+ eslint: {
+ ignoreDuringBuilds: true,
+ },
+ experimental: {
+ outputStandalone: true,
+ },
+ async rewrites() {
+ return [
+ {
+ source: '/some-catch-all/:path*',
+ destination: '/',
+ },
+ {
+ source: '/to-dynamic/:path',
+ destination: '/dynamic/:path',
+ },
+ ]
+ },
+ },
+ })
+ await next.stop()
+
+ requiredFilesManifest = JSON.parse(
+ await next.readFile('.next/required-server-files.json')
+ )
+ await fs.move(
+ join(next.testDir, '.next/standalone'),
+ join(next.testDir, 'standalone')
+ )
+ for (const file of await fs.readdir(next.testDir)) {
+ if (file !== 'standalone') {
+ await fs.remove(join(next.testDir, file))
+ console.log('removed', file)
+ }
+ }
+ const files = glob.sync('**/*', {
+ cwd: join(next.testDir, 'standalone/.next/server/pages'),
+ dot: true,
+ })
+
+ console.error({ files })
+
+ for (const file of files) {
+ if (file.endsWith('.json') || file.endsWith('.html')) {
+ await fs.remove(join(next.testDir, '.next/server', file))
+ }
+ }
+
+ const testServer = join(next.testDir, 'standalone/server.js')
+ await fs.writeFile(
+ testServer,
+ (await fs.readFile(testServer, 'utf8'))
+ .replace('console.error(err)', `console.error('top-level', err)`)
+ .replace('conf:', 'minimalMode: true,conf:')
+ )
+ appPort = await findPort()
+ server = await initNextServerScript(
+ testServer,
+ /Listening on/,
+ {
+ ...process.env,
+ PORT: appPort,
+ },
+ undefined,
+ {
+ cwd: next.testDir,
+ onStderr(msg) {
+ if (msg.includes('top-level')) {
+ errors.push(msg)
+ }
+ },
+ }
+ )
+ })
+ afterAll(async () => {
+ await next.destroy()
+ if (server) await killApp(server)
+ })
+
+ it('should output required-server-files manifest correctly', async () => {
+ expect(requiredFilesManifest.version).toBe(1)
+ expect(Array.isArray(requiredFilesManifest.files)).toBe(true)
+ expect(Array.isArray(requiredFilesManifest.ignore)).toBe(true)
+ expect(requiredFilesManifest.files.length).toBeGreaterThan(0)
+ expect(requiredFilesManifest.ignore.length).toBeGreaterThan(0)
+ expect(typeof requiredFilesManifest.config.configFile).toBe('undefined')
+ expect(typeof requiredFilesManifest.config.trailingSlash).toBe('boolean')
+ expect(typeof requiredFilesManifest.appDir).toBe('string')
+ })
+
+ it('should set correct SWR headers with notFound gsp', async () => {
+ await next.patchFile('standalone/data.txt', 'show')
+
+ const res = await fetchViaHTTP(appPort, '/gsp', undefined, {
+ redirect: 'manual ',
+ })
+ expect(res.status).toBe(200)
+ expect(res.headers.get('cache-control')).toBe(
+ 's-maxage=1, stale-while-revalidate'
+ )
+
+ await next.patchFile('standalone/data.txt', 'hide')
+
+ const res2 = await fetchViaHTTP(appPort, '/gsp', undefined, {
+ redirect: 'manual ',
+ })
+ expect(res2.status).toBe(404)
+ expect(res2.headers.get('cache-control')).toBe(
+ 's-maxage=1, stale-while-revalidate'
+ )
+ })
+
+ it('should set correct SWR headers with notFound gssp', async () => {
+ await next.patchFile('standalone/data.txt', 'show')
+
+ const res = await fetchViaHTTP(appPort, '/gssp', undefined, {
+ redirect: 'manual ',
+ })
+ expect(res.status).toBe(200)
+ expect(res.headers.get('cache-control')).toBe(
+ 's-maxage=1, stale-while-revalidate'
+ )
+
+ await next.patchFile('standalone/data.txt', 'hide')
+
+ const res2 = await fetchViaHTTP(appPort, '/gssp', undefined, {
+ redirect: 'manual ',
+ })
+ expect(res2.status).toBe(404)
+ expect(res2.headers.get('cache-control')).toBe(
+ 's-maxage=1, stale-while-revalidate'
+ )
+ })
+
+ it('should render SSR page correctly', async () => {
+ const html = await renderViaHTTP(appPort, '/')
+ const $ = cheerio.load(html)
+ const data = JSON.parse($('#props').text())
+
+ expect($('#index').text()).toBe('index page')
+ expect(data.hello).toBe('world')
+
+ const html2 = await renderViaHTTP(appPort, '/')
+ const $2 = cheerio.load(html2)
+ const data2 = JSON.parse($2('#props').text())
+
+ expect($2('#index').text()).toBe('index page')
+ expect(isNaN(data2.random)).toBe(false)
+ expect(data2.random).not.toBe(data.random)
+ })
+
+ it('should render dynamic SSR page correctly', async () => {
+ const html = await renderViaHTTP(appPort, '/dynamic/first')
+ const $ = cheerio.load(html)
+ const data = JSON.parse($('#props').text())
+
+ expect($('#dynamic').text()).toBe('dynamic page')
+ expect($('#slug').text()).toBe('first')
+ expect(data.hello).toBe('world')
+
+ const html2 = await renderViaHTTP(appPort, '/dynamic/second')
+ const $2 = cheerio.load(html2)
+ const data2 = JSON.parse($2('#props').text())
+
+ expect($2('#dynamic').text()).toBe('dynamic page')
+ expect($2('#slug').text()).toBe('second')
+ expect(isNaN(data2.random)).toBe(false)
+ expect(data2.random).not.toBe(data.random)
+ })
+
+ it('should render fallback page correctly', async () => {
+ const html = await renderViaHTTP(appPort, '/fallback/first')
+ const $ = cheerio.load(html)
+ const data = JSON.parse($('#props').text())
+
+ expect($('#fallback').text()).toBe('fallback page')
+ expect($('#slug').text()).toBe('first')
+ expect(data.hello).toBe('world')
+
+ const html2 = await renderViaHTTP(appPort, '/fallback/first')
+ const $2 = cheerio.load(html2)
+ const data2 = JSON.parse($2('#props').text())
+
+ expect($2('#fallback').text()).toBe('fallback page')
+ expect($2('#slug').text()).toBe('first')
+ expect(isNaN(data2.random)).toBe(false)
+ expect(data2.random).not.toBe(data.random)
+
+ const html3 = await renderViaHTTP(appPort, '/fallback/second')
+ const $3 = cheerio.load(html3)
+ const data3 = JSON.parse($3('#props').text())
+
+ expect($3('#fallback').text()).toBe('fallback page')
+ expect($3('#slug').text()).toBe('second')
+ expect(isNaN(data3.random)).toBe(false)
+
+ const { pageProps: data4 } = JSON.parse(
+ await renderViaHTTP(
+ appPort,
+ `/_next/data/${next.buildId}/en/fallback/third.json`
+ )
+ )
+ expect(data4.hello).toBe('world')
+ expect(data4.slug).toBe('third')
+ })
+
+ it('should render SSR page correctly with x-matched-path', async () => {
+ const html = await renderViaHTTP(appPort, '/some-other-path', undefined, {
+ headers: {
+ 'x-matched-path': '/',
+ },
+ })
+ const $ = cheerio.load(html)
+ const data = JSON.parse($('#props').text())
+
+ expect($('#index').text()).toBe('index page')
+ expect(data.hello).toBe('world')
+
+ const html2 = await renderViaHTTP(appPort, '/some-other-path', undefined, {
+ headers: {
+ 'x-matched-path': '/',
+ },
+ })
+ const $2 = cheerio.load(html2)
+ const data2 = JSON.parse($2('#props').text())
+
+ expect($2('#index').text()).toBe('index page')
+ expect(isNaN(data2.random)).toBe(false)
+ expect(data2.random).not.toBe(data.random)
+ })
+
+ it('should render dynamic SSR page correctly with x-matched-path', async () => {
+ const html = await renderViaHTTP(appPort, '/some-other-path', undefined, {
+ headers: {
+ 'x-matched-path': '/dynamic/[slug]?slug=first',
+ },
+ })
+ const $ = cheerio.load(html)
+ const data = JSON.parse($('#props').text())
+
+ expect($('#dynamic').text()).toBe('dynamic page')
+ expect($('#slug').text()).toBe('first')
+ expect(data.hello).toBe('world')
+
+ const html2 = await renderViaHTTP(appPort, '/some-other-path', undefined, {
+ headers: {
+ 'x-matched-path': '/dynamic/[slug]?slug=second',
+ },
+ })
+ const $2 = cheerio.load(html2)
+ const data2 = JSON.parse($2('#props').text())
+
+ expect($2('#dynamic').text()).toBe('dynamic page')
+ expect($2('#slug').text()).toBe('second')
+ expect(isNaN(data2.random)).toBe(false)
+ expect(data2.random).not.toBe(data.random)
+
+ const html3 = await renderViaHTTP(appPort, '/some-other-path', undefined, {
+ headers: {
+ 'x-matched-path': '/dynamic/[slug]?slug=%5Bslug%5D.json',
+ 'x-now-route-matches': '1=second&slug=second',
+ },
+ })
+ const $3 = cheerio.load(html3)
+ const data3 = JSON.parse($3('#props').text())
+
+ expect($3('#dynamic').text()).toBe('dynamic page')
+ expect($3('#slug').text()).toBe('second')
+ expect(isNaN(data3.random)).toBe(false)
+ expect(data3.random).not.toBe(data.random)
+ })
+
+ it('should render fallback page correctly with x-matched-path and routes-matches', async () => {
+ const html = await renderViaHTTP(appPort, '/fallback/first', undefined, {
+ headers: {
+ 'x-matched-path': '/fallback/first',
+ 'x-now-route-matches': '1=first',
+ },
+ })
+ const $ = cheerio.load(html)
+ const data = JSON.parse($('#props').text())
+
+ expect($('#fallback').text()).toBe('fallback page')
+ expect($('#slug').text()).toBe('first')
+ expect(data.hello).toBe('world')
+
+ const html2 = await renderViaHTTP(appPort, `/fallback/[slug]`, undefined, {
+ headers: {
+ 'x-matched-path': '/fallback/[slug]',
+ 'x-now-route-matches': '1=second',
+ },
+ })
+ const $2 = cheerio.load(html2)
+ const data2 = JSON.parse($2('#props').text())
+
+ expect($2('#fallback').text()).toBe('fallback page')
+ expect($2('#slug').text()).toBe('second')
+ expect(isNaN(data2.random)).toBe(false)
+ expect(data2.random).not.toBe(data.random)
+ })
+
+ it('should return data correctly with x-matched-path', async () => {
+ const res = await fetchViaHTTP(
+ appPort,
+ `/_next/data/${next.buildId}/en/dynamic/first.json`,
+ undefined,
+ {
+ headers: {
+ 'x-matched-path': '/dynamic/[slug]?slug=first',
+ },
+ }
+ )
+
+ const { pageProps: data } = await res.json()
+
+ expect(data.slug).toBe('first')
+ expect(data.hello).toBe('world')
+
+ const res2 = await fetchViaHTTP(
+ appPort,
+ `/_next/data/${next.buildId}/en/fallback/[slug].json`,
+ undefined,
+ {
+ headers: {
+ 'x-matched-path': `/_next/data/${next.buildId}/en/fallback/[slug].json`,
+ 'x-now-route-matches': '1=second',
+ },
+ }
+ )
+
+ const { pageProps: data2 } = await res2.json()
+
+ expect(data2.slug).toBe('second')
+ expect(data2.hello).toBe('world')
+ })
+
+ it('should render fallback optional catch-all route correctly with x-matched-path and routes-matches', async () => {
+ const html = await renderViaHTTP(
+ appPort,
+ '/catch-all/[[...rest]]',
+ undefined,
+ {
+ headers: {
+ 'x-matched-path': '/catch-all/[[...rest]]',
+ 'x-now-route-matches': '',
+ },
+ }
+ )
+ const $ = cheerio.load(html)
+ const data = JSON.parse($('#props').text())
+
+ expect($('#catch-all').text()).toBe('optional catch-all page')
+ expect(data.params).toEqual({})
+ expect(data.hello).toBe('world')
+
+ const html2 = await renderViaHTTP(
+ appPort,
+ '/catch-all/[[...rest]]',
+ undefined,
+ {
+ headers: {
+ 'x-matched-path': '/catch-all/[[...rest]]',
+ 'x-now-route-matches': '1=hello&catchAll=hello',
+ },
+ }
+ )
+ const $2 = cheerio.load(html2)
+ const data2 = JSON.parse($2('#props').text())
+
+ expect($2('#catch-all').text()).toBe('optional catch-all page')
+ expect(data2.params).toEqual({ rest: ['hello'] })
+ expect(isNaN(data2.random)).toBe(false)
+ expect(data2.random).not.toBe(data.random)
+
+ const html3 = await renderViaHTTP(
+ appPort,
+ '/catch-all/[[..rest]]',
+ undefined,
+ {
+ headers: {
+ 'x-matched-path': '/catch-all/[[...rest]]',
+ 'x-now-route-matches': '1=hello/world&catchAll=hello/world',
+ },
+ }
+ )
+ const $3 = cheerio.load(html3)
+ const data3 = JSON.parse($3('#props').text())
+
+ expect($3('#catch-all').text()).toBe('optional catch-all page')
+ expect(data3.params).toEqual({ rest: ['hello', 'world'] })
+ expect(isNaN(data3.random)).toBe(false)
+ expect(data3.random).not.toBe(data.random)
+ })
+
+ it('should return data correctly with x-matched-path for optional catch-all route', async () => {
+ const res = await fetchViaHTTP(
+ appPort,
+ `/_next/data/${next.buildId}/en/catch-all.json`,
+ undefined,
+ {
+ headers: {
+ 'x-matched-path': '/en/catch-all/[[...rest]]',
+ },
+ }
+ )
+
+ const { pageProps: data } = await res.json()
+
+ expect(data.params).toEqual({})
+ expect(data.hello).toBe('world')
+
+ const res2 = await fetchViaHTTP(
+ appPort,
+ `/_next/data/${next.buildId}/en/catch-all/[[...rest]].json`,
+ undefined,
+ {
+ headers: {
+ 'x-matched-path': `/_next/data/${next.buildId}/en/catch-all/[[...rest]].json`,
+ 'x-now-route-matches': '1=hello&rest=hello',
+ },
+ }
+ )
+
+ const { pageProps: data2 } = await res2.json()
+
+ expect(data2.params).toEqual({ rest: ['hello'] })
+ expect(data2.hello).toBe('world')
+
+ const res3 = await fetchViaHTTP(
+ appPort,
+ `/_next/data/${next.buildId}/en/catch-all/[[...rest]].json`,
+ undefined,
+ {
+ headers: {
+ 'x-matched-path': `/_next/data/${next.buildId}/en/catch-all/[[...rest]].json`,
+ 'x-now-route-matches': '1=hello/world&rest=hello/world',
+ },
+ }
+ )
+
+ const { pageProps: data3 } = await res3.json()
+
+ expect(data3.params).toEqual({ rest: ['hello', 'world'] })
+ expect(data3.hello).toBe('world')
+ })
+
+ it('should not apply trailingSlash redirect', async () => {
+ for (const path of [
+ '/',
+ '/dynamic/another/',
+ '/dynamic/another',
+ '/fallback/first/',
+ '/fallback/first',
+ '/fallback/another/',
+ '/fallback/another',
+ ]) {
+ const res = await fetchViaHTTP(appPort, path, undefined, {
+ redirect: 'manual',
+ })
+
+ expect(res.status).toBe(200)
+ }
+ })
+
+ it('should normalize catch-all rewrite query values correctly', async () => {
+ const html = await renderViaHTTP(
+ appPort,
+ '/some-catch-all/hello/world',
+ {
+ path: 'hello/world',
+ },
+ {
+ headers: {
+ 'x-matched-path': '/',
+ },
+ }
+ )
+ const $ = cheerio.load(html)
+ expect(JSON.parse($('#router').text()).query.path).toEqual([
+ 'hello',
+ 'world',
+ ])
+ })
+
+ it('should handle bad request correctly with rewrite', async () => {
+ const res = await fetchViaHTTP(
+ appPort,
+ '/to-dynamic/%c0.%c0.',
+ '?path=%c0.%c0.',
+ {
+ headers: {
+ 'x-matched-path': '/dynamic/[slug]',
+ },
+ }
+ )
+ expect(res.status).toBe(400)
+ expect(await res.text()).toContain('Bad Request')
+ })
+
+ it('should bubble error correctly for gip page', async () => {
+ errors = []
+ const res = await fetchViaHTTP(appPort, '/errors/gip', { crash: '1' })
+ expect(res.status).toBe(500)
+ expect(await res.text()).toBe('internal server error')
+
+ await check(
+ () => (errors[0].includes('gip hit an oops') ? 'success' : errors[0]),
+ 'success'
+ )
+ })
+
+ it('should bubble error correctly for gssp page', async () => {
+ errors = []
+ const res = await fetchViaHTTP(appPort, '/errors/gssp', { crash: '1' })
+ expect(res.status).toBe(500)
+ expect(await res.text()).toBe('internal server error')
+ await check(
+ () => (errors[0].includes('gssp hit an oops') ? 'success' : errors[0]),
+ 'success'
+ )
+ })
+
+ it('should bubble error correctly for gsp page', async () => {
+ errors = []
+ const res = await fetchViaHTTP(appPort, '/errors/gsp/crash')
+ expect(res.status).toBe(500)
+ expect(await res.text()).toBe('internal server error')
+ await check(
+ () => (errors[0].includes('gsp hit an oops') ? 'success' : errors[0]),
+ 'success'
+ )
+ })
+
+ it('should bubble error correctly for API page', async () => {
+ errors = []
+ const res = await fetchViaHTTP(appPort, '/api/error')
+ expect(res.status).toBe(500)
+ expect(await res.text()).toBe('internal server error')
+ await check(
+ () =>
+ errors[0].includes('some error from /api/error')
+ ? 'success'
+ : errors[0],
+ 'success'
+ )
+ })
+
+ it('should normalize optional values correctly for SSP page', async () => {
+ const res = await fetchViaHTTP(
+ appPort,
+ '/optional-ssp',
+ { rest: '', another: 'value' },
+ {
+ headers: {
+ 'x-matched-path': '/optional-ssp/[[...rest]]',
+ },
+ }
+ )
+
+ const html = await res.text()
+ const $ = cheerio.load(html)
+ const props = JSON.parse($('#props').text())
+ expect(props.params).toEqual({})
+ expect(props.query).toEqual({ another: 'value' })
+ })
+
+ it('should normalize optional values correctly for SSG page', async () => {
+ const res = await fetchViaHTTP(
+ appPort,
+ '/optional-ssg',
+ { rest: '', another: 'value' },
+ {
+ headers: {
+ 'x-matched-path': '/optional-ssg/[[...rest]]',
+ },
+ }
+ )
+
+ const html = await res.text()
+ const $ = cheerio.load(html)
+ const props = JSON.parse($('#props').text())
+ expect(props.params).toEqual({})
+ })
+
+ it('should normalize optional values correctly for SSG page with encoded slash', async () => {
+ const res = await fetchViaHTTP(
+ appPort,
+ '/optional-ssg/[[...rest]]',
+ undefined,
+ {
+ headers: {
+ 'x-matched-path': '/optional-ssg/[[...rest]]',
+ 'x-now-route-matches':
+ '1=en%2Fes%2Fhello%252Fworld&rest=en%2Fes%2Fhello%252Fworld',
+ },
+ }
+ )
+
+ const html = await res.text()
+ const $ = cheerio.load(html)
+ const props = JSON.parse($('#props').text())
+ expect(props.params).toEqual({
+ rest: ['en', 'es', 'hello/world'],
+ })
+ })
+
+ it('should normalize optional values correctly for API page', async () => {
+ const res = await fetchViaHTTP(
+ appPort,
+ '/api/optional',
+ { rest: '', another: 'value' },
+ {
+ headers: {
+ 'x-matched-path': '/api/optional/[[...rest]]',
+ },
+ }
+ )
+
+ const json = await res.json()
+ expect(json.query).toEqual({ another: 'value' })
+ expect(json.url).toBe('/api/optional?another=value')
+ })
+
+ it('should match the index page correctly', async () => {
+ const res = await fetchViaHTTP(appPort, '/', undefined, {
+ headers: {
+ 'x-matched-path': '/index',
+ },
+ redirect: 'manual',
+ })
+
+ const html = await res.text()
+ const $ = cheerio.load(html)
+ expect($('#index').text()).toBe('index page')
+ })
+
+ it('should match the root dyanmic page correctly', async () => {
+ const res = await fetchViaHTTP(appPort, '/index', undefined, {
+ headers: {
+ 'x-matched-path': '/[slug]',
+ },
+ redirect: 'manual',
+ })
+
+ const html = await res.text()
+ const $ = cheerio.load(html)
+ expect($('#slug-page').text()).toBe('[slug] page')
+ })
+
+ it('should have the correct asPath for fallback page', async () => {
+ const res = await fetchViaHTTP(appPort, '/en/fallback/[slug]', undefined, {
+ headers: {
+ 'x-matched-path': '/en/fallback/[slug]',
+ 'x-now-route-matches': '2=another&slug=another&1=en&nextLocale=en',
+ },
+ redirect: 'manual',
+ })
+
+ const html = await res.text()
+ const $ = cheerio.load(html)
+ expect($('#fallback').text()).toBe('fallback page')
+ expect($('#slug').text()).toBe('another')
+ expect(JSON.parse($('#router').text()).asPath).toBe('/fallback/another')
+ expect(JSON.parse($('#router').text()).query.slug).toBe('another')
+ expect(JSON.parse($('#router').text()).locale).toBe('en')
+ })
+
+ it('should have the correct asPath for fallback page', async () => {
+ const res = await fetchViaHTTP(appPort, '/fr/fallback/[slug]', undefined, {
+ headers: {
+ 'x-matched-path': '/fr/fallback/[slug]',
+ 'x-now-route-matches': '2=another&slug=another&1=fr&nextLocale=fr',
+ },
+ redirect: 'manual',
+ })
+
+ const html = await res.text()
+ const $ = cheerio.load(html)
+ expect($('#fallback').text()).toBe('fallback page')
+ expect($('#slug').text()).toBe('another')
+ expect(JSON.parse($('#router').text()).asPath).toBe('/fallback/another')
+ expect(JSON.parse($('#router').text()).query.slug).toBe('another')
+ expect(JSON.parse($('#router').text()).locale).toBe('fr')
+ })
+})
diff --git a/test/unit/eslint-plugin-next/no-server-import-in-page.test.ts b/test/unit/eslint-plugin-next/no-server-import-in-page.test.ts
new file mode 100644
index 000000000000..0945da385084
--- /dev/null
+++ b/test/unit/eslint-plugin-next/no-server-import-in-page.test.ts
@@ -0,0 +1,126 @@
+import { RuleTester } from 'eslint'
+import path from 'path'
+import rule from '@next/eslint-plugin-next/lib/rules/no-server-import-in-page'
+;(RuleTester as any).setDefaultConfig({
+ parserOptions: {
+ ecmaVersion: 2018,
+ sourceType: 'module',
+ ecmaFeatures: {
+ modules: true,
+ jsx: true,
+ },
+ },
+})
+const ruleTester = new RuleTester()
+
+ruleTester.run('no-server-import-in-page', rule, {
+ valid: [
+ {
+ code: `import { NextFetchEvent, NextRequest } from "next/server"
+
+ export function middleware(req, ev) {
+ return new Response('Hello, world!')
+ }
+ `,
+ filename: 'pages/_middleware.js',
+ },
+ {
+ code: `import { NextFetchEvent, NextRequest } from "next/server"
+
+ export function middleware(req, ev) {
+ return new Response('Hello, world!')
+ }
+ `,
+ filename: `pages${path.sep}_middleware.js`,
+ },
+ {
+ code: `import NextDocument from "next/document"
+
+ export function middleware(req, ev) {
+ return new Response('Hello, world!')
+ }
+ `,
+ filename: `pages${path.posix.sep}_middleware.tsx`,
+ },
+ {
+ code: `import { NextFetchEvent, NextRequest } from "next/server"
+
+ export function middleware(req, ev) {
+ return new Response('Hello, world!')
+ }
+ `,
+ filename: 'pages/_middleware.page.tsx',
+ },
+ {
+ code: `import { NextFetchEvent, NextRequest } from "next/server"
+
+ export function middleware(req, ev) {
+ return new Response('Hello, world!')
+ }
+ `,
+ filename: 'pages/_middleware/index.js',
+ },
+ {
+ code: `import { NextFetchEvent, NextRequest } from "next/server"
+
+ export function middleware(req, ev) {
+ return new Response('Hello, world!')
+ }
+ `,
+ filename: 'pages/_middleware/index.tsx',
+ },
+ {
+ code: `import { NextFetchEvent, NextRequest } from "next/server"
+
+ export function middleware(req, ev) {
+ return new Response('Hello, world!')
+ }
+ `,
+ filename: 'pagesapp/src/pages/_middleware.js',
+ },
+ ],
+ invalid: [
+ {
+ code: `import { NextFetchEvent, NextRequest } from "next/server"
+
+ export const Test = () =>