Welcome to Next.js!
diff --git a/examples/with-cypress/src/components/about-component.cy.tsx b/examples/with-cypress/components/about-component.cy.tsx
similarity index 84%
rename from examples/with-cypress/src/components/about-component.cy.tsx
rename to examples/with-cypress/components/about-component.cy.tsx
index 55169f3a1a34..54a31e5c130c 100644
--- a/examples/with-cypress/src/components/about-component.cy.tsx
+++ b/examples/with-cypress/components/about-component.cy.tsx
@@ -1,4 +1,4 @@
-import AboutComponent from '../../src/components/about-component'
+import AboutComponent from './components/about-component'
/* eslint-disable */
// Disable ESLint to prevent failing linting inside the Next.js repo.
// If you're using ESLint on your project, we recommend installing the ESLint Cypress plugin instead:
@@ -6,7 +6,7 @@ import AboutComponent from '../../src/components/about-component'
// Cypress Component Test
describe('About
+ Home
+
+ )
+}
diff --git a/examples/with-cypress/pages/home/index.tsx b/examples/with-cypress/pages/home/index.tsx
new file mode 100644
index 000000000000..b8466909837d
--- /dev/null
+++ b/examples/with-cypress/pages/home/index.tsx
@@ -0,0 +1,10 @@
+import Link from 'next/link'
+
+export default function Home() {
+ return (
+
+ Home
+ About
+
+ )
+}
diff --git a/examples/with-cypress/src/app/Home.module.css b/examples/with-cypress/styles/Home.module.css
similarity index 100%
rename from examples/with-cypress/src/app/Home.module.css
rename to examples/with-cypress/styles/Home.module.css
diff --git a/examples/with-cypress/src/app/globals.css b/examples/with-cypress/styles/globals.css
similarity index 100%
rename from examples/with-cypress/src/app/globals.css
rename to examples/with-cypress/styles/globals.css
diff --git a/examples/with-cypress/tsconfig.json b/examples/with-cypress/tsconfig.json
index b6ba42e2da28..0eae8b96e9f9 100644
--- a/examples/with-cypress/tsconfig.json
+++ b/examples/with-cypress/tsconfig.json
@@ -18,7 +18,8 @@
{
"name": "next"
}
- ]
+ ],
+ "strictNullChecks": true
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
diff --git a/examples/with-jest/.eslintrc.json b/examples/with-jest/.eslintrc.json
deleted file mode 100644
index 4f67f8cbc08d..000000000000
--- a/examples/with-jest/.eslintrc.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
- "root": true,
- "extends": ["next/core-web-vitals"],
- "plugins": ["testing-library"],
- "overrides": [
- // Only uses Testing Library lint rules in test files
- {
- "files": [
- "**/__tests__/**/*.[jt]s?(x)",
- "**/?(*.)+(spec|test).[jt]s?(x)"
- ],
- "extends": ["plugin:testing-library/react"]
- }
- ]
-}
diff --git a/examples/with-jest/app/client/page.test.tsx b/examples/with-jest/app/client/page.test.tsx
deleted file mode 100644
index 5120843e0a0a..000000000000
--- a/examples/with-jest/app/client/page.test.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-import { render, screen } from '@testing-library/react'
-import ClientComponent from './page'
-
-it('App Router: Works with Client Components', () => {
- render(Client Component
-}
diff --git a/examples/with-jest/app/component.test.tsx b/examples/with-jest/app/counter.test.tsx
similarity index 85%
rename from examples/with-jest/app/component.test.tsx
rename to examples/with-jest/app/counter.test.tsx
index afdf088e3f0e..3c7c59fd3ae6 100644
--- a/examples/with-jest/app/component.test.tsx
+++ b/examples/with-jest/app/counter.test.tsx
@@ -2,10 +2,10 @@
* @jest-environment jsdom
*/
import { fireEvent, render, screen } from '@testing-library/react'
-import Component from './component'
+import Counter from './counter'
it('App Router: Works with Client Components (React State)', () => {
- render(/jest.setup.js'],
- testEnvironment: 'jest-environment-jsdom',
+ testEnvironment: 'jsdom',
}
// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
diff --git a/examples/with-jest/package.json b/examples/with-jest/package.json
index 2f4be6c38f4a..b2cb24577c0d 100644
--- a/examples/with-jest/package.json
+++ b/examples/with-jest/package.json
@@ -16,7 +16,6 @@
"devDependencies": {
"@testing-library/jest-dom": "6.1.2",
"@testing-library/react": "14.0.0",
- "@testing-library/user-event": "14.4.3",
"@types/jest": "29.5.5",
"@types/react": "18.2.8",
"jest": "29.6.4",
diff --git a/examples/with-jest/pages/index.tsx b/examples/with-jest/pages/home/index.tsx
similarity index 99%
rename from examples/with-jest/pages/index.tsx
rename to examples/with-jest/pages/home/index.tsx
index c30337b4adc1..98f5bd86ecbd 100644
--- a/examples/with-jest/pages/index.tsx
+++ b/examples/with-jest/pages/home/index.tsx
@@ -1,6 +1,5 @@
import Head from 'next/head'
import Image from 'next/image'
-
import styles from '@/pages/index.module.css'
export default function Home() {
diff --git a/examples/with-jest/tsconfig.json b/examples/with-jest/tsconfig.json
index 1e100d941f03..4c98b6f70dc1 100644
--- a/examples/with-jest/tsconfig.json
+++ b/examples/with-jest/tsconfig.json
@@ -9,7 +9,7 @@
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
- "moduleResolution": "node",
+ "moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
@@ -19,8 +19,19 @@
"@/components/*": ["components/*"],
"@/pages/*": ["pages/*"],
"@/styles/*": ["styles/*"]
- }
+ },
+ "plugins": [
+ {
+ "name": "next"
+ }
+ ]
},
- "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "types.d.ts"],
+ "include": [
+ "next-env.d.ts",
+ "**/*.ts",
+ "**/*.tsx",
+ "types.d.ts",
+ ".next/types/**/*.ts"
+ ],
"exclude": ["node_modules"]
}
diff --git a/examples/with-playwright/app/about/page.tsx b/examples/with-playwright/app/about/page.tsx
new file mode 100644
index 000000000000..64d02da08da2
--- /dev/null
+++ b/examples/with-playwright/app/about/page.tsx
@@ -0,0 +1,10 @@
+import Link from 'next/link'
+
+export default function Page() {
+ return (
+
+ About
+ Home
+
+ )
+}
diff --git a/examples/with-playwright/app/layout.tsx b/examples/with-playwright/app/layout.tsx
new file mode 100644
index 000000000000..dbce4ea8e3ae
--- /dev/null
+++ b/examples/with-playwright/app/layout.tsx
@@ -0,0 +1,11 @@
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode
+}) {
+ return (
+
+ {children}
+
+ )
+}
diff --git a/examples/with-playwright/app/page.tsx b/examples/with-playwright/app/page.tsx
new file mode 100644
index 000000000000..5b67d3ed292b
--- /dev/null
+++ b/examples/with-playwright/app/page.tsx
@@ -0,0 +1,10 @@
+import Link from 'next/link'
+
+export default function Page() {
+ return (
+
+ Home
+ About
+
+ )
+}
diff --git a/examples/with-playwright/e2e/app.spec.ts b/examples/with-playwright/e2e/app.spec.ts
new file mode 100644
index 000000000000..08f59e70fdf5
--- /dev/null
+++ b/examples/with-playwright/e2e/app.spec.ts
@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test'
+
+test('should navigate to the about page', async ({ page }) => {
+ // Start from the index page (the baseURL is set via the webServer in the playwright.config.ts)
+ await page.goto('/')
+ // Find an element with the text 'About' and click on it
+ await page.click('text=About')
+ // The new URL should be "/about" (baseURL is used there)
+ await expect(page).toHaveURL('/about')
+ // The new page should contain an h1 with "About"
+ await expect(page.locator('h1')).toContainText('About')
+})
diff --git a/examples/with-playwright/e2e/example.spec.ts b/examples/with-playwright/e2e/pages.spec.ts
similarity index 87%
rename from examples/with-playwright/e2e/example.spec.ts
rename to examples/with-playwright/e2e/pages.spec.ts
index f552087a355a..72cf32f82714 100644
--- a/examples/with-playwright/e2e/example.spec.ts
+++ b/examples/with-playwright/e2e/pages.spec.ts
@@ -2,11 +2,11 @@ import { test, expect } from '@playwright/test'
test('should navigate to the about page', async ({ page }) => {
// Start from the index page (the baseURL is set via the webServer in the playwright.config.ts)
- await page.goto('/')
+ await page.goto('/home')
// Find an element with the text 'About Page' and click on it
await page.getByText('About Page').click()
// The new url should be "/about" (baseURL is used there)
- await expect(page).toHaveURL('/about')
+ await expect(page).toHaveURL('/home/about')
// The new page should contain an h1 with "About Page"
await expect(page.getByRole('heading', { level: 1 })).toContainText(
'About Page'
diff --git a/examples/with-playwright/package.json b/examples/with-playwright/package.json
index 25209924f85e..ede02ffd8049 100644
--- a/examples/with-playwright/package.json
+++ b/examples/with-playwright/package.json
@@ -12,6 +12,9 @@
"react-dom": "18.2.0"
},
"devDependencies": {
- "@playwright/test": "^1.36.2"
+ "@playwright/test": "^1.40.1",
+ "@types/node": "20.10.4",
+ "@types/react": "18.2.43",
+ "typescript": "5.3.3"
}
}
diff --git a/examples/with-playwright/pages/_app.tsx b/examples/with-playwright/pages/_app.tsx
new file mode 100644
index 000000000000..1e1cec92425c
--- /dev/null
+++ b/examples/with-playwright/pages/_app.tsx
@@ -0,0 +1,7 @@
+import '../styles/globals.css'
+
+function MyApp({ Component, pageProps }) {
+ return
About Page
- ← Go Back
+ ← Go Back
About
+ Home +Home
+ About +
+
+ )
+}
diff --git a/examples/with-playwright/app/layout.tsx b/examples/with-playwright/app/layout.tsx
new file mode 100644
index 000000000000..dbce4ea8e3ae
--- /dev/null
+++ b/examples/with-playwright/app/layout.tsx
@@ -0,0 +1,11 @@
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode
+}) {
+ return (
+
+ {children}
+
+ )
+}
diff --git a/examples/with-playwright/app/page.tsx b/examples/with-playwright/app/page.tsx
new file mode 100644
index 000000000000..5b67d3ed292b
--- /dev/null
+++ b/examples/with-playwright/app/page.tsx
@@ -0,0 +1,10 @@
+import Link from 'next/link'
+
+export default function Page() {
+ return (
+ About
+ Home +
+
+ )
+}
diff --git a/examples/with-playwright/e2e/app.spec.ts b/examples/with-playwright/e2e/app.spec.ts
new file mode 100644
index 000000000000..08f59e70fdf5
--- /dev/null
+++ b/examples/with-playwright/e2e/app.spec.ts
@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test'
+
+test('should navigate to the about page', async ({ page }) => {
+ // Start from the index page (the baseURL is set via the webServer in the playwright.config.ts)
+ await page.goto('/')
+ // Find an element with the text 'About' and click on it
+ await page.click('text=About')
+ // The new URL should be "/about" (baseURL is used there)
+ await expect(page).toHaveURL('/about')
+ // The new page should contain an h1 with "About"
+ await expect(page.locator('h1')).toContainText('About')
+})
diff --git a/examples/with-playwright/e2e/example.spec.ts b/examples/with-playwright/e2e/pages.spec.ts
similarity index 87%
rename from examples/with-playwright/e2e/example.spec.ts
rename to examples/with-playwright/e2e/pages.spec.ts
index f552087a355a..72cf32f82714 100644
--- a/examples/with-playwright/e2e/example.spec.ts
+++ b/examples/with-playwright/e2e/pages.spec.ts
@@ -2,11 +2,11 @@ import { test, expect } from '@playwright/test'
test('should navigate to the about page', async ({ page }) => {
// Start from the index page (the baseURL is set via the webServer in the playwright.config.ts)
- await page.goto('/')
+ await page.goto('/home')
// Find an element with the text 'About Page' and click on it
await page.getByText('About Page').click()
// The new url should be "/about" (baseURL is used there)
- await expect(page).toHaveURL('/about')
+ await expect(page).toHaveURL('/home/about')
// The new page should contain an h1 with "About Page"
await expect(page.getByRole('heading', { level: 1 })).toContainText(
'About Page'
diff --git a/examples/with-playwright/package.json b/examples/with-playwright/package.json
index 25209924f85e..ede02ffd8049 100644
--- a/examples/with-playwright/package.json
+++ b/examples/with-playwright/package.json
@@ -12,6 +12,9 @@
"react-dom": "18.2.0"
},
"devDependencies": {
- "@playwright/test": "^1.36.2"
+ "@playwright/test": "^1.40.1",
+ "@types/node": "20.10.4",
+ "@types/react": "18.2.43",
+ "typescript": "5.3.3"
}
}
diff --git a/examples/with-playwright/pages/_app.tsx b/examples/with-playwright/pages/_app.tsx
new file mode 100644
index 000000000000..1e1cec92425c
--- /dev/null
+++ b/examples/with-playwright/pages/_app.tsx
@@ -0,0 +1,7 @@
+import '../styles/globals.css'
+
+function MyApp({ Component, pageProps }) {
+ return Home
+ About +About Page
- ← Go Back + ← Go Back