About
- This is the about page, navigating between this page and Home is - always pretty fast. However, when you navigate to the Profile{' '} - page it takes more time because it uses SSR to fetch the user first; + This project shows different ways to display Profile info: using{' '} + Client rendered, Server rendered, and API rendered +
++ Navigating between this page and Home is always pretty fast. + However, when you navigate to the Server rendered profile page it + takes more time because it uses SSR to fetch the user and then to + display it
Profile
+ +
+
+ Public page (client rendered)
+We are fetching data on the client-side :
+By making request to '/api/protected-api' serverless function
+so without a valid session cookie will fail
+{JSON.stringify(data)}
+Profile
@@ -24,17 +21,6 @@ const Profile = ({ user }: ProfileProps) => { ) } -export const getServerSideProps: GetServerSideProps = async ({ req, res }) => { - // Here you can check authentication status directly before rendering the page, - // however the page would be a serverless function, which is more expensive and - // slower than a static page with client side authentication - const session = await auth0.getSession(req, res) - - if (!session || !session.user) { - return { redirect: { destination: '/api/login', permanent: false } } - } - - return { props: { user: session.user } } -} - -export default Profile +// Protected route, checking authentication status before rendering the page.(SSR) +// It's slower than a static page with client side authentication +export const getServerSideProps = withPageAuthRequired() diff --git a/examples/auth0/pages/api/auth/[...auth0].tsx b/examples/auth0/pages/api/auth/[...auth0].tsx new file mode 100644 index 0000000000000..1edbfe3eb472d --- /dev/null +++ b/examples/auth0/pages/api/auth/[...auth0].tsx @@ -0,0 +1,3 @@ +import { handleAuth } from '@auth0/nextjs-auth0' + +export default handleAuth() diff --git a/examples/auth0/pages/api/callback.ts b/examples/auth0/pages/api/callback.ts deleted file mode 100644 index 7928765a53408..0000000000000 --- a/examples/auth0/pages/api/callback.ts +++ /dev/null @@ -1,15 +0,0 @@ -import type { NextApiRequest, NextApiResponse } from 'next' -import auth0 from '../../lib/auth0' - -const callback = async (req: NextApiRequest, res: NextApiResponse) => { - try { - await auth0.handleCallback(req, res) - } catch (error) { - console.error(error) - const errorMessage = - error instanceof Error ? error.message : 'Internal server error' - res.status(500).end(errorMessage) - } -} - -export default callback diff --git a/examples/auth0/pages/api/login.ts b/examples/auth0/pages/api/login.ts deleted file mode 100644 index 904f3ea6ef6c5..0000000000000 --- a/examples/auth0/pages/api/login.ts +++ /dev/null @@ -1,15 +0,0 @@ -import type { NextApiRequest, NextApiResponse } from 'next' -import auth0 from '../../lib/auth0' - -const login = async (req: NextApiRequest, res: NextApiResponse) => { - try { - await auth0.handleLogin(req, res) - } catch (error) { - console.error(error) - const errorMessage = - error instanceof Error ? error.message : 'Internal server error' - res.status(500).end(errorMessage) - } -} - -export default login diff --git a/examples/auth0/pages/api/logout.ts b/examples/auth0/pages/api/logout.ts deleted file mode 100644 index a3393caac57b2..0000000000000 --- a/examples/auth0/pages/api/logout.ts +++ /dev/null @@ -1,15 +0,0 @@ -import type { NextApiRequest, NextApiResponse } from 'next' -import auth0 from '../../lib/auth0' - -const logout = async (req: NextApiRequest, res: NextApiResponse) => { - try { - await auth0.handleLogout(req, res) - } catch (error) { - console.error(error) - const errorMessage = - error instanceof Error ? error.message : 'Internal server error' - res.status(500).end(errorMessage) - } -} - -export default logout diff --git a/examples/auth0/pages/api/me.ts b/examples/auth0/pages/api/me.ts deleted file mode 100644 index 8b05cac2a73f3..0000000000000 --- a/examples/auth0/pages/api/me.ts +++ /dev/null @@ -1,15 +0,0 @@ -import type { NextApiRequest, NextApiResponse } from 'next' -import auth0 from '../../lib/auth0' - -const me = async (req: NextApiRequest, res: NextApiResponse) => { - try { - await auth0.handleProfile(req, res) - } catch (error) { - console.error(error) - const errorMessage = - error instanceof Error ? error.message : 'Internal server error' - res.status(500).end(errorMessage) - } -} - -export default me diff --git a/examples/auth0/pages/api/protected-api.ts b/examples/auth0/pages/api/protected-api.ts new file mode 100644 index 0000000000000..a2d6a95720cd7 --- /dev/null +++ b/examples/auth0/pages/api/protected-api.ts @@ -0,0 +1,20 @@ +import { withApiAuthRequired, getSession } from '@auth0/nextjs-auth0' + +// Serverless function +// Protected API, requests to '/api/protected' without a valid session cookie will fail + +async function handle(req, res) { + const { user } = getSession(req, res) + + try { + res.status(200).json({ + session: 'true', + id: user.sub, + nickname: user.nickname, + }) + } catch (e) { + res.status(500).json({ error: 'Unable to fetch', description: e }) + } +} + +export default withApiAuthRequired(handle) diff --git a/examples/auth0/pages/index.tsx b/examples/auth0/pages/index.tsx index 2e4828ee7a45d..a184ac9fb6444 100644 --- a/examples/auth0/pages/index.tsx +++ b/examples/auth0/pages/index.tsx @@ -1,23 +1,24 @@ +import { useUser } from '@auth0/nextjs-auth0' import Layout from '../components/layout' -import { useFetchUser } from '../lib/user' const Home = () => { - const { user, loading } = useFetchUser() + const { user, isLoading } = useUser() return ( -Next.js and Auth0 Example
- {loading &&Loading login info...
} + {isLoading &&Loading login info...
} - {!loading && !user && ( + {!isLoading && !user && ( <>To test the login click in Login
- Once you have logged in you should be able to click in{' '} - Profile and Logout + Once you have logged in you should be able to navigate between + protected routes: client rendered, server rendered profile pages, + and Logout
)} @@ -34,4 +35,5 @@ const Home = () => { ) } +// fast/cached SSR page export default Home diff --git a/examples/auth0/pages/profile.tsx b/examples/auth0/pages/profile.tsx index c3c95e3f2f638..9e83595b6b55d 100644 --- a/examples/auth0/pages/profile.tsx +++ b/examples/auth0/pages/profile.tsx @@ -1,6 +1,4 @@ -// This import is only needed when checking authentication status directly from getInitialProps -// import auth0 from '../lib/auth0' -import { useFetchUser } from '../lib/user' +import { withPageAuthRequired } from '@auth0/nextjs-auth0' import Layout from '../components/layout' import { User } from '../interfaces' @@ -23,14 +21,13 @@ const ProfileCard = ({ user }: ProfileCardProps) => { ) } -const Profile = () => { - const { user, loading } = useFetchUser({ required: true }) - +const Profile = ({ user, isLoading }) => { return ( -
+
+ );
+}
\ No newline at end of file
diff --git a/packages/next-codemod/transforms/__testfixtures__/next-image-experimental/general.output.js b/packages/next-codemod/transforms/__testfixtures__/next-image-experimental/general.output.js
new file mode 100644
index 0000000000000..cd0f66e92011b
--- /dev/null
+++ b/packages/next-codemod/transforms/__testfixtures__/next-image-experimental/general.output.js
@@ -0,0 +1,95 @@
+import Image from "next/image";
+import Named, { Blarg } from "next/image";
+import Foo from "foo";
+import img from "../public/img.jpg";
+
+export default function Home() {
+ const myStyle = { color: 'black' };
+ return (
+ Upgrade
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/packages/next-codemod/transforms/__testfixtures__/next-image-experimental/require.input.js b/packages/next-codemod/transforms/__testfixtures__/next-image-experimental/require.input.js
new file mode 100644
index 0000000000000..3859fab616338
--- /dev/null
+++ b/packages/next-codemod/transforms/__testfixtures__/next-image-experimental/require.input.js
@@ -0,0 +1,14 @@
+const Image = require("next/legacy/image");
+const Named = require("next/legacy/image");
+const Foo = require("foo");
+
+export default function Home() {
+ return (
+ Upgrade
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/packages/next-codemod/transforms/__testfixtures__/next-image-experimental/require.output.js b/packages/next-codemod/transforms/__testfixtures__/next-image-experimental/require.output.js
new file mode 100644
index 0000000000000..549e68dd724f9
--- /dev/null
+++ b/packages/next-codemod/transforms/__testfixtures__/next-image-experimental/require.output.js
@@ -0,0 +1,14 @@
+const Image = require("next/image");
+const Named = require("next/image");
+const Foo = require("foo");
+
+export default function Home() {
+ return (
+ Upgrade
+
+
+ );
+}
\ No newline at end of file
diff --git a/packages/next-codemod/transforms/__testfixtures__/next-image-to-legacy-image/dynamic.input.js b/packages/next-codemod/transforms/__testfixtures__/next-image-to-legacy-image/dynamic.input.js
new file mode 100644
index 0000000000000..37ddd93dae0a0
--- /dev/null
+++ b/packages/next-codemod/transforms/__testfixtures__/next-image-to-legacy-image/dynamic.input.js
@@ -0,0 +1,14 @@
+export async function Home() {
+ const Image = await import("next/image");
+ const Named = await import("next/image");
+ const Foo = await import("foo");
+ const Future1 = await import("next/future/image");
+ const Future2 = await import("next/future/image");
+ return (Upgrade
+
+
)
+}
\ No newline at end of file
diff --git a/packages/next-codemod/transforms/__testfixtures__/next-image-to-legacy-image/dynamic.output.js b/packages/next-codemod/transforms/__testfixtures__/next-image-to-legacy-image/dynamic.output.js
new file mode 100644
index 0000000000000..c3e96f4d08951
--- /dev/null
+++ b/packages/next-codemod/transforms/__testfixtures__/next-image-to-legacy-image/dynamic.output.js
@@ -0,0 +1,14 @@
+export async function Home() {
+ const Image = await import("next/legacy/image");
+ const Named = await import("next/legacy/image");
+ const Foo = await import("foo");
+ const Future1 = await import("next/image");
+ const Future2 = await import("next/image");
+ return (Both
+
+
)
+}
\ No newline at end of file
diff --git a/packages/next-codemod/transforms/__testfixtures__/next-image-to-legacy-image/general.input.js b/packages/next-codemod/transforms/__testfixtures__/next-image-to-legacy-image/general.input.js
new file mode 100644
index 0000000000000..b5648fd6c9c94
--- /dev/null
+++ b/packages/next-codemod/transforms/__testfixtures__/next-image-to-legacy-image/general.input.js
@@ -0,0 +1,15 @@
+import Image from "next/image";
+import Named from "next/image";
+import Foo from "foo";
+import Future1 from "next/future/image";
+import Future2 from "next/future/image";
+
+export default function Home() {
+ return (Both
+
+
)
+}
\ No newline at end of file
diff --git a/packages/next-codemod/transforms/__testfixtures__/next-image-to-legacy-image/general.output.js b/packages/next-codemod/transforms/__testfixtures__/next-image-to-legacy-image/general.output.js
new file mode 100644
index 0000000000000..0dba37efd5342
--- /dev/null
+++ b/packages/next-codemod/transforms/__testfixtures__/next-image-to-legacy-image/general.output.js
@@ -0,0 +1,15 @@
+import Image from "next/legacy/image";
+import Named from "next/legacy/image";
+import Foo from "foo";
+import Future1 from "next/image";
+import Future2 from "next/image";
+
+export default function Home() {
+ return (Both
+
+
)
+}
\ No newline at end of file
diff --git a/packages/next-codemod/transforms/__testfixtures__/next-image-to-legacy-image/require.input.js b/packages/next-codemod/transforms/__testfixtures__/next-image-to-legacy-image/require.input.js
new file mode 100644
index 0000000000000..5b708d1d62377
--- /dev/null
+++ b/packages/next-codemod/transforms/__testfixtures__/next-image-to-legacy-image/require.input.js
@@ -0,0 +1,14 @@
+export async function Home() {
+ const Image = require("next/image");
+ const Named = require("next/image");
+ const Foo = require("foo");
+ const Future1 = require("next/future/image");
+ const Future2 = require("next/future/image");
+ return (Both
+
+
)
+}
\ No newline at end of file
diff --git a/packages/next-codemod/transforms/__testfixtures__/next-image-to-legacy-image/require.output.js b/packages/next-codemod/transforms/__testfixtures__/next-image-to-legacy-image/require.output.js
new file mode 100644
index 0000000000000..d8695910cb97e
--- /dev/null
+++ b/packages/next-codemod/transforms/__testfixtures__/next-image-to-legacy-image/require.output.js
@@ -0,0 +1,14 @@
+export async function Home() {
+ const Image = require("next/legacy/image");
+ const Named = require("next/legacy/image");
+ const Foo = require("foo");
+ const Future1 = require("next/image");
+ const Future2 = require("next/image");
+ return (Both
+
+
)
+}
\ No newline at end of file
diff --git a/packages/next-codemod/transforms/__tests__/next-image-experimental.test.js b/packages/next-codemod/transforms/__tests__/next-image-experimental.test.js
new file mode 100644
index 0000000000000..4da9cb5772871
--- /dev/null
+++ b/packages/next-codemod/transforms/__tests__/next-image-experimental.test.js
@@ -0,0 +1,16 @@
+/* global jest */
+jest.autoMockOff()
+const defineTest = require('jscodeshift/dist/testUtils').defineTest
+const { readdirSync } = require('fs')
+const { join } = require('path')
+
+const fixtureDir = 'next-image-experimental'
+const fixtureDirPath = join(__dirname, '..', '__testfixtures__', fixtureDir)
+const fixtures = readdirSync(fixtureDirPath)
+ .filter(file => file.endsWith('.input.js'))
+ .map(file => file.replace('.input.js', ''))
+
+for (const fixture of fixtures) {
+ const prefix = `${fixtureDir}/${fixture}`;
+ defineTest(__dirname, fixtureDir, null, prefix)
+}
diff --git a/packages/next-codemod/transforms/__tests__/next-image-to-legacy-image.test.js b/packages/next-codemod/transforms/__tests__/next-image-to-legacy-image.test.js
new file mode 100644
index 0000000000000..35b9828665300
--- /dev/null
+++ b/packages/next-codemod/transforms/__tests__/next-image-to-legacy-image.test.js
@@ -0,0 +1,16 @@
+/* global jest */
+jest.autoMockOff()
+const defineTest = require('jscodeshift/dist/testUtils').defineTest
+const { readdirSync } = require('fs')
+const { join } = require('path')
+
+const fixtureDir = 'next-image-to-legacy-image'
+const fixtureDirPath = join(__dirname, '..', '__testfixtures__', fixtureDir)
+const fixtures = readdirSync(fixtureDirPath)
+ .filter(file => file.endsWith('.input.js'))
+ .map(file => file.replace('.input.js', ''))
+
+for (const fixture of fixtures) {
+ const prefix = `${fixtureDir}/${fixture}`;
+ defineTest(__dirname, fixtureDir, null, prefix)
+}
diff --git a/packages/next-codemod/transforms/next-image-experimental.ts b/packages/next-codemod/transforms/next-image-experimental.ts
new file mode 100644
index 0000000000000..2fd3fe8219f9d
--- /dev/null
+++ b/packages/next-codemod/transforms/next-image-experimental.ts
@@ -0,0 +1,211 @@
+import type {
+ API,
+ Collection,
+ FileInfo,
+ ImportDefaultSpecifier,
+ JSCodeshift,
+ JSXAttribute,
+ Options,
+} from 'jscodeshift'
+
+function findAndReplaceProps(
+ j: JSCodeshift,
+ root: Collection,
+ tagName: string
+) {
+ const layoutToStyle: RecordBoth
+
+
+
+
+ )
+}
diff --git a/packages/next/client/components/layout-router.client.tsx b/packages/next/client/components/layout-router.tsx
similarity index 91%
rename from packages/next/client/components/layout-router.client.tsx
rename to packages/next/client/components/layout-router.tsx
index 447a82f15d3dd..f19e762eebf63 100644
--- a/packages/next/client/components/layout-router.client.tsx
+++ b/packages/next/client/components/layout-router.tsx
@@ -1,4 +1,4 @@
-'client'
+'use client'
import React, {
useContext,
@@ -20,15 +20,16 @@ import type {
FlightSegmentPath,
// FlightDataPath,
} from '../../server/app-render'
+import type { ErrorComponent } from './error-boundary'
import {
LayoutRouterContext,
GlobalLayoutRouterContext,
TemplateContext,
AppRouterContext,
} from '../../shared/lib/app-router-context'
-import { fetchServerResponse } from './app-router.client'
+import { fetchServerResponse } from './app-router'
import { createInfinitePromise } from './infinite-promise'
-
+import { ErrorBoundary } from './error-boundary'
import { matchSegment } from './match-segments'
/**
@@ -364,65 +365,6 @@ function NotFoundBoundary({ notFound, children }: NotFoundBoundaryProps) {
)
}
-type ErrorComponent = React.ComponentType<{ error: Error; reset: () => void }>
-interface ErrorBoundaryProps {
- errorComponent: ErrorComponent
-}
-
-/**
- * Handles errors through `getDerivedStateFromError`.
- * Renders the provided error component and provides a way to `reset` the error boundary state.
- */
-class ErrorBoundaryHandler extends React.Component<
- ErrorBoundaryProps,
- { error: Error | null }
-> {
- constructor(props: ErrorBoundaryProps) {
- super(props)
- this.state = { error: null }
- }
-
- static getDerivedStateFromError(error: Error) {
- return { error }
- }
-
- reset = () => {
- this.setState({ error: null })
- }
-
- render() {
- if (this.state.error) {
- return (
-
+
+ + Application error: a client-side exception has occurred (see the + browser console for more information). +
+
+
+ )
+}
diff --git a/packages/next/client/components/react-dev-overlay/internal/components/CodeFrame/index.tsx b/packages/next/client/components/react-dev-overlay/internal/components/CodeFrame/index.tsx
new file mode 100644
index 0000000000000..59818df56eddb
--- /dev/null
+++ b/packages/next/client/components/react-dev-overlay/internal/components/CodeFrame/index.tsx
@@ -0,0 +1 @@
+export { CodeFrame } from './CodeFrame'
diff --git a/packages/next/client/components/react-dev-overlay/internal/components/CodeFrame/styles.tsx b/packages/next/client/components/react-dev-overlay/internal/components/CodeFrame/styles.tsx
new file mode 100644
index 0000000000000..324cc5fedc9c8
--- /dev/null
+++ b/packages/next/client/components/react-dev-overlay/internal/components/CodeFrame/styles.tsx
@@ -0,0 +1,52 @@
+import { noop as css } from '../../helpers/noop-template'
+
+const styles = css`
+ [data-nextjs-codeframe] {
+ overflow: auto;
+ border-radius: var(--size-gap-half);
+ background-color: var(--color-ansi-bg);
+ color: var(--color-ansi-fg);
+ }
+ [data-nextjs-codeframe]::selection,
+ [data-nextjs-codeframe] *::selection {
+ background-color: var(--color-ansi-selection);
+ }
+ [data-nextjs-codeframe] * {
+ color: inherit;
+ background-color: transparent;
+ font-family: var(--font-stack-monospace);
+ }
+
+ [data-nextjs-codeframe] > * {
+ margin: 0;
+ padding: calc(var(--size-gap) + var(--size-gap-half))
+ calc(var(--size-gap-double) + var(--size-gap-half));
+ }
+ [data-nextjs-codeframe] > div {
+ display: inline-block;
+ width: auto;
+ min-width: 100%;
+ border-bottom: 1px solid var(--color-ansi-bright-black);
+ }
+ [data-nextjs-codeframe] > div > p {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ cursor: pointer;
+ margin: 0;
+ }
+ [data-nextjs-codeframe] > div > p:hover {
+ text-decoration: underline dotted;
+ }
+ [data-nextjs-codeframe] div > p > svg {
+ width: auto;
+ height: 1em;
+ margin-left: 8px;
+ }
+ [data-nextjs-codeframe] div > pre {
+ overflow: hidden;
+ display: inline-block;
+ }
+`
+
+export { styles }
diff --git a/packages/next/client/components/react-dev-overlay/internal/components/Dialog/Dialog.tsx b/packages/next/client/components/react-dev-overlay/internal/components/Dialog/Dialog.tsx
new file mode 100644
index 0000000000000..e01f36c2c3341
--- /dev/null
+++ b/packages/next/client/components/react-dev-overlay/internal/components/Dialog/Dialog.tsx
@@ -0,0 +1,71 @@
+import * as React from 'react'
+import { useOnClickOutside } from '../../hooks/use-on-click-outside'
+
+export type DialogProps = {
+ type: 'error' | 'warning'
+ 'aria-labelledby': string
+ 'aria-describedby': string
+ onClose?: (e: MouseEvent | TouchEvent) => void
+}
+
+const Dialog: React.FC
+
+ + + {getFrameSource(stackFrame)} @ {stackFrame.methodName} + + +
+
+ {decoded.map((entry, index) => (
+
+ {entry.content}
+
+ ))}
+
+
+
+ {children}
+
+ )
+}
+
+export { Dialog }
diff --git a/packages/next/client/components/react-dev-overlay/internal/components/Dialog/DialogBody.tsx b/packages/next/client/components/react-dev-overlay/internal/components/Dialog/DialogBody.tsx
new file mode 100644
index 0000000000000..17eadbc187ee5
--- /dev/null
+++ b/packages/next/client/components/react-dev-overlay/internal/components/Dialog/DialogBody.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react'
+
+export type DialogBodyProps = {
+ className?: string
+}
+
+const DialogBody: React.FC
+ {children}
+
+ )
+}
+
+export { DialogBody }
diff --git a/packages/next/client/components/react-dev-overlay/internal/components/Dialog/DialogContent.tsx b/packages/next/client/components/react-dev-overlay/internal/components/Dialog/DialogContent.tsx
new file mode 100644
index 0000000000000..780fe85fa679c
--- /dev/null
+++ b/packages/next/client/components/react-dev-overlay/internal/components/Dialog/DialogContent.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react'
+
+export type DialogContentProps = {
+ className?: string
+}
+
+const DialogContent: React.FC
+ {children}
+
+ )
+}
+
+export { DialogContent }
diff --git a/packages/next/client/components/react-dev-overlay/internal/components/Dialog/DialogHeader.tsx b/packages/next/client/components/react-dev-overlay/internal/components/Dialog/DialogHeader.tsx
new file mode 100644
index 0000000000000..2748398ac9da3
--- /dev/null
+++ b/packages/next/client/components/react-dev-overlay/internal/components/Dialog/DialogHeader.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react'
+
+export type DialogHeaderProps = {
+ className?: string
+}
+
+const DialogHeader: React.FC
+ {children}
+
+ )
+}
+
+export { DialogHeader }
diff --git a/packages/next/client/components/react-dev-overlay/internal/components/Dialog/index.ts b/packages/next/client/components/react-dev-overlay/internal/components/Dialog/index.ts
new file mode 100644
index 0000000000000..15a3c57a88686
--- /dev/null
+++ b/packages/next/client/components/react-dev-overlay/internal/components/Dialog/index.ts
@@ -0,0 +1,5 @@
+export { Dialog } from './Dialog'
+export { DialogBody } from './DialogBody'
+export { DialogContent } from './DialogContent'
+export { DialogHeader } from './DialogHeader'
+export { styles } from './styles'
diff --git a/packages/next/client/components/react-dev-overlay/internal/components/Dialog/styles.ts b/packages/next/client/components/react-dev-overlay/internal/components/Dialog/styles.ts
new file mode 100644
index 0000000000000..d4730a77c85a2
--- /dev/null
+++ b/packages/next/client/components/react-dev-overlay/internal/components/Dialog/styles.ts
@@ -0,0 +1,91 @@
+import { noop as css } from '../../helpers/noop-template'
+
+const styles = css`
+ [data-nextjs-dialog] {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ margin-right: auto;
+ margin-left: auto;
+ outline: none;
+ background: white;
+ border-radius: var(--size-gap);
+ box-shadow: 0 var(--size-gap-half) var(--size-gap-double)
+ rgba(0, 0, 0, 0.25);
+ max-height: calc(100% - 56px);
+ overflow-y: hidden;
+ }
+
+ @media (max-height: 812px) {
+ [data-nextjs-dialog-overlay] {
+ max-height: calc(100% - 15px);
+ }
+ }
+
+ @media (min-width: 576px) {
+ [data-nextjs-dialog] {
+ max-width: 540px;
+ box-shadow: 0 var(--size-gap) var(--size-gap-quad) rgba(0, 0, 0, 0.25);
+ }
+ }
+
+ @media (min-width: 768px) {
+ [data-nextjs-dialog] {
+ max-width: 720px;
+ }
+ }
+
+ @media (min-width: 992px) {
+ [data-nextjs-dialog] {
+ max-width: 960px;
+ }
+ }
+
+ [data-nextjs-dialog-banner] {
+ position: relative;
+ }
+ [data-nextjs-dialog-banner].banner-warning {
+ border-color: var(--color-ansi-yellow);
+ }
+ [data-nextjs-dialog-banner].banner-error {
+ border-color: var(--color-ansi-red);
+ }
+
+ [data-nextjs-dialog-banner]::after {
+ z-index: 2;
+ content: '';
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 100%;
+ /* banner width: */
+ border-top-width: var(--size-gap-half);
+ border-bottom-width: 0;
+ border-top-style: solid;
+ border-bottom-style: solid;
+ border-top-color: inherit;
+ border-bottom-color: transparent;
+ }
+
+ [data-nextjs-dialog-content] {
+ overflow-y: auto;
+ border: none;
+ margin: 0;
+ /* calc(padding + banner width offset) */
+ padding: calc(var(--size-gap-double) + var(--size-gap-half))
+ var(--size-gap-double);
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ }
+ [data-nextjs-dialog-content] > [data-nextjs-dialog-header] {
+ flex-shrink: 0;
+ margin-bottom: var(--size-gap-double);
+ }
+ [data-nextjs-dialog-content] > [data-nextjs-dialog-body] {
+ position: relative;
+ flex: 1 1 auto;
+ }
+`
+
+export { styles }
diff --git a/packages/next/client/components/react-dev-overlay/internal/components/LeftRightDialogHeader/LeftRightDialogHeader.tsx b/packages/next/client/components/react-dev-overlay/internal/components/LeftRightDialogHeader/LeftRightDialogHeader.tsx
new file mode 100644
index 0000000000000..cb8b722894484
--- /dev/null
+++ b/packages/next/client/components/react-dev-overlay/internal/components/LeftRightDialogHeader/LeftRightDialogHeader.tsx
@@ -0,0 +1,166 @@
+import * as React from 'react'
+import { CloseIcon } from '../../icons/CloseIcon'
+
+export type LeftRightDialogHeaderProps = {
+ className?: string
+ previous: (() => void) | null
+ next: (() => void) | null
+ close?: () => void
+}
+
+const LeftRightDialogHeader: React.FC
+
+ {close ? (
+
+ ) : null}
+
+ )
+ }
+
+export { LeftRightDialogHeader }
diff --git a/packages/next/client/components/react-dev-overlay/internal/components/LeftRightDialogHeader/index.ts b/packages/next/client/components/react-dev-overlay/internal/components/LeftRightDialogHeader/index.ts
new file mode 100644
index 0000000000000..b63edb12ba22a
--- /dev/null
+++ b/packages/next/client/components/react-dev-overlay/internal/components/LeftRightDialogHeader/index.ts
@@ -0,0 +1,2 @@
+export { LeftRightDialogHeader } from './LeftRightDialogHeader'
+export { styles } from './styles'
diff --git a/packages/next/client/components/react-dev-overlay/internal/components/LeftRightDialogHeader/styles.ts b/packages/next/client/components/react-dev-overlay/internal/components/LeftRightDialogHeader/styles.ts
new file mode 100644
index 0000000000000..f7368bb31d1ee
--- /dev/null
+++ b/packages/next/client/components/react-dev-overlay/internal/components/LeftRightDialogHeader/styles.ts
@@ -0,0 +1,61 @@
+import { noop as css } from '../../helpers/noop-template'
+
+const styles = css`
+ [data-nextjs-dialog-left-right] {
+ display: flex;
+ flex-direction: row;
+ align-content: center;
+ align-items: center;
+ justify-content: space-between;
+ }
+ [data-nextjs-dialog-left-right] > nav > button {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+
+ width: calc(var(--size-gap-double) + var(--size-gap));
+ height: calc(var(--size-gap-double) + var(--size-gap));
+ font-size: 0;
+ border: none;
+ background-color: rgba(255, 85, 85, 0.1);
+ color: var(--color-ansi-red);
+ cursor: pointer;
+ transition: background-color 0.25s ease;
+ }
+ [data-nextjs-dialog-left-right] > nav > button > svg {
+ width: auto;
+ height: calc(var(--size-gap) + var(--size-gap-half));
+ }
+ [data-nextjs-dialog-left-right] > nav > button:hover {
+ background-color: rgba(255, 85, 85, 0.2);
+ }
+ [data-nextjs-dialog-left-right] > nav > button:disabled {
+ background-color: rgba(255, 85, 85, 0.1);
+ color: rgba(255, 85, 85, 0.4);
+ cursor: not-allowed;
+ }
+
+ [data-nextjs-dialog-left-right] > nav > button:first-of-type {
+ border-radius: var(--size-gap-half) 0 0 var(--size-gap-half);
+ margin-right: 1px;
+ }
+ [data-nextjs-dialog-left-right] > nav > button:last-of-type {
+ border-radius: 0 var(--size-gap-half) var(--size-gap-half) 0;
+ }
+
+ [data-nextjs-dialog-left-right] > button:last-of-type {
+ border: 0;
+ padding: 0;
+
+ background-color: transparent;
+ appearance: none;
+
+ opacity: 0.4;
+ transition: opacity 0.25s ease;
+ }
+ [data-nextjs-dialog-left-right] > button:last-of-type:hover {
+ opacity: 0.7;
+ }
+`
+
+export { styles }
diff --git a/packages/next/client/components/react-dev-overlay/internal/components/Overlay/Overlay.tsx b/packages/next/client/components/react-dev-overlay/internal/components/Overlay/Overlay.tsx
new file mode 100644
index 0000000000000..22249c716d91d
--- /dev/null
+++ b/packages/next/client/components/react-dev-overlay/internal/components/Overlay/Overlay.tsx
@@ -0,0 +1,47 @@
+// @ts-ignore
+import allyTrap from './maintain--tab-focus'
+import * as React from 'react'
+import { lock, unlock } from './body-locker'
+
+export type OverlayProps = { className?: string; fixed?: boolean }
+
+const Overlay: React.FC
+
+ {children}
+
+ )
+}
+
+export { Overlay }
diff --git a/packages/next/client/components/react-dev-overlay/internal/components/Overlay/body-locker.ts b/packages/next/client/components/react-dev-overlay/internal/components/Overlay/body-locker.ts
new file mode 100644
index 0000000000000..8e33e1c8d9924
--- /dev/null
+++ b/packages/next/client/components/react-dev-overlay/internal/components/Overlay/body-locker.ts
@@ -0,0 +1,41 @@
+let previousBodyPaddingRight: string | undefined
+let previousBodyOverflowSetting: string | undefined
+
+let activeLocks = 0
+
+export function lock() {
+ setTimeout(() => {
+ if (activeLocks++ > 0) {
+ return
+ }
+
+ const scrollBarGap =
+ window.innerWidth - document.documentElement.clientWidth
+
+ if (scrollBarGap > 0) {
+ previousBodyPaddingRight = document.body.style.paddingRight
+ document.body.style.paddingRight = `${scrollBarGap}px`
+ }
+
+ previousBodyOverflowSetting = document.body.style.overflow
+ document.body.style.overflow = 'hidden'
+ })
+}
+
+export function unlock() {
+ setTimeout(() => {
+ if (activeLocks === 0 || --activeLocks !== 0) {
+ return
+ }
+
+ if (previousBodyPaddingRight !== undefined) {
+ document.body.style.paddingRight = previousBodyPaddingRight
+ previousBodyPaddingRight = undefined
+ }
+
+ if (previousBodyOverflowSetting !== undefined) {
+ document.body.style.overflow = previousBodyOverflowSetting
+ previousBodyOverflowSetting = undefined
+ }
+ })
+}
diff --git a/packages/next/client/components/react-dev-overlay/internal/components/Overlay/index.tsx b/packages/next/client/components/react-dev-overlay/internal/components/Overlay/index.tsx
new file mode 100644
index 0000000000000..9f8311327322f
--- /dev/null
+++ b/packages/next/client/components/react-dev-overlay/internal/components/Overlay/index.tsx
@@ -0,0 +1 @@
+export { Overlay } from './Overlay'
diff --git a/packages/next/client/components/react-dev-overlay/internal/components/Overlay/maintain--tab-focus.ts b/packages/next/client/components/react-dev-overlay/internal/components/Overlay/maintain--tab-focus.ts
new file mode 100644
index 0000000000000..465ddf5b60aea
--- /dev/null
+++ b/packages/next/client/components/react-dev-overlay/internal/components/Overlay/maintain--tab-focus.ts
@@ -0,0 +1,3569 @@
+/* eslint-disable */
+// @ts-nocheck
+// Copied from https://github.com/medialize/ally.js
+// License: MIT
+// Copyright (c) 2015 Rodney Rehm
+//
+// Entrypoint: ally.js/maintain/tab-focus
+
+import _platform from 'next/dist/compiled/platform'
+import cssEscape from 'next/dist/compiled/css.escape'
+
+// input may be undefined, selector-tring, Node, NodeList, HTMLCollection, array of Nodes
+// yes, to some extent this is a bad replica of jQuery's constructor function
+function nodeArray(input) {
+ if (!input) {
+ return []
+ }
+
+ if (Array.isArray(input)) {
+ return input
+ }
+
+ // instanceof Node - does not work with iframes
+ if (input.nodeType !== undefined) {
+ return [input]
+ }
+
+ if (typeof input === 'string') {
+ input = document.querySelectorAll(input)
+ }
+
+ if (input.length !== undefined) {
+ return [].slice.call(input, 0)
+ }
+
+ throw new TypeError('unexpected input ' + String(input))
+}
+
+function contextToElement(_ref) {
+ var context = _ref.context,
+ _ref$label = _ref.label,
+ label = _ref$label === undefined ? 'context-to-element' : _ref$label,
+ resolveDocument = _ref.resolveDocument,
+ defaultToDocument = _ref.defaultToDocument
+
+ var element = nodeArray(context)[0]
+
+ if (resolveDocument && element && element.nodeType === Node.DOCUMENT_NODE) {
+ element = element.documentElement
+ }
+
+ if (!element && defaultToDocument) {
+ return document.documentElement
+ }
+
+ if (!element) {
+ throw new TypeError(label + ' requires valid options.context')
+ }
+
+ if (
+ element.nodeType !== Node.ELEMENT_NODE &&
+ element.nodeType !== Node.DOCUMENT_FRAGMENT_NODE
+ ) {
+ throw new TypeError(label + ' requires options.context to be an Element')
+ }
+
+ return element
+}
+
+function getShadowHost() {
+ var _ref =
+ arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+ context = _ref.context
+
+ var element = contextToElement({
+ label: 'get/shadow-host',
+ context: context,
+ })
+
+ // walk up to the root
+ var container = null
+
+ while (element) {
+ container = element
+ element = element.parentNode
+ }
+
+ // https://developer.mozilla.org/en-US/docs/Web/API/Node.nodeType
+ // NOTE: Firefox 34 does not expose ShadowRoot.host (but 37 does)
+ if (
+ container.nodeType === container.DOCUMENT_FRAGMENT_NODE &&
+ container.host
+ ) {
+ // the root is attached to a fragment node that has a host
+ return container.host
+ }
+
+ return null
+}
+
+function getDocument(node) {
+ if (!node) {
+ return document
+ }
+
+ if (node.nodeType === Node.DOCUMENT_NODE) {
+ return node
+ }
+
+ return node.ownerDocument || document
+}
+
+function isActiveElement(context) {
+ var element = contextToElement({
+ label: 'is/active-element',
+ resolveDocument: true,
+ context: context,
+ })
+
+ var _document = getDocument(element)
+ if (_document.activeElement === element) {
+ return true
+ }
+
+ var shadowHost = getShadowHost({ context: element })
+ if (shadowHost && shadowHost.shadowRoot.activeElement === element) {
+ return true
+ }
+
+ return false
+}
+
+// [elem, elem.parent, elem.parent.parent, …, html]
+// will not contain the shadowRoot (DOCUMENT_FRAGMENT_NODE) and shadowHost
+function getParents() {
+ var _ref =
+ arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+ context = _ref.context
+
+ var list = []
+ var element = contextToElement({
+ label: 'get/parents',
+ context: context,
+ })
+
+ while (element) {
+ list.push(element)
+ // IE does know support parentElement on SVGElement
+ element = element.parentNode
+ if (element && element.nodeType !== Node.ELEMENT_NODE) {
+ element = null
+ }
+ }
+
+ return list
+}
+
+// Element.prototype.matches may be available at a different name
+// https://developer.mozilla.org/en/docs/Web/API/Element/matches
+
+var names = [
+ 'matches',
+ 'webkitMatchesSelector',
+ 'mozMatchesSelector',
+ 'msMatchesSelector',
+]
+var name = null
+
+function findMethodName(element) {
+ names.some(function (_name) {
+ if (!element[_name]) {
+ return false
+ }
+
+ name = _name
+ return true
+ })
+}
+
+function elementMatches(element, selector) {
+ if (!name) {
+ findMethodName(element)
+ }
+
+ return element[name](selector)
+}
+
+// deep clone of original platform
+var platform = JSON.parse(JSON.stringify(_platform))
+
+// operating system
+var os = platform.os.family || ''
+var ANDROID = os === 'Android'
+var WINDOWS = os.slice(0, 7) === 'Windows'
+var OSX = os === 'OS X'
+var IOS = os === 'iOS'
+
+// layout
+var BLINK = platform.layout === 'Blink'
+var GECKO = platform.layout === 'Gecko'
+var TRIDENT = platform.layout === 'Trident'
+var EDGE = platform.layout === 'EdgeHTML'
+var WEBKIT = platform.layout === 'WebKit'
+
+// browser version (not layout engine version!)
+var version = parseFloat(platform.version)
+var majorVersion = Math.floor(version)
+platform.majorVersion = majorVersion
+
+platform.is = {
+ // operating system
+ ANDROID: ANDROID,
+ WINDOWS: WINDOWS,
+ OSX: OSX,
+ IOS: IOS,
+ // layout
+ BLINK: BLINK, // "Chrome", "Chrome Mobile", "Opera"
+ GECKO: GECKO, // "Firefox"
+ TRIDENT: TRIDENT, // "Internet Explorer"
+ EDGE: EDGE, // "Microsoft Edge"
+ WEBKIT: WEBKIT, // "Safari"
+ // INTERNET EXPLORERS
+ IE9: TRIDENT && majorVersion === 9,
+ IE10: TRIDENT && majorVersion === 10,
+ IE11: TRIDENT && majorVersion === 11,
+}
+
+function before() {
+ var data = {
+ // remember what had focus to restore after test
+ activeElement: document.activeElement,
+ // remember scroll positions to restore after test
+ windowScrollTop: window.scrollTop,
+ windowScrollLeft: window.scrollLeft,
+ bodyScrollTop: document.body.scrollTop,
+ bodyScrollLeft: document.body.scrollLeft,
+ }
+
+ // wrap tests in an element hidden from screen readers to prevent them
+ // from announcing focus, which can be quite irritating to the user
+ var iframe = document.createElement('iframe')
+ iframe.setAttribute(
+ 'style',
+ 'position:absolute; position:fixed; top:0; left:-2px; width:1px; height:1px; overflow:hidden;'
+ )
+ iframe.setAttribute('aria-live', 'off')
+ iframe.setAttribute('aria-busy', 'true')
+ iframe.setAttribute('aria-hidden', 'true')
+ document.body.appendChild(iframe)
+
+ var _window = iframe.contentWindow
+ var _document = _window.document
+
+ _document.open()
+ _document.close()
+ var wrapper = _document.createElement('div')
+ _document.body.appendChild(wrapper)
+
+ data.iframe = iframe
+ data.wrapper = wrapper
+ data.window = _window
+ data.document = _document
+
+ return data
+}
+
+// options.element:
+// {string} element name
+// {function} callback(wrapper, document) to generate an element
+// options.mutate: (optional)
+// {function} callback(element, wrapper, document) to manipulate element prior to focus-test.
+// Can return DOMElement to define focus target (default: element)
+// options.validate: (optional)
+// {function} callback(element, focusTarget, document) to manipulate test-result
+function test(data, options) {
+ // make sure we operate on a clean slate
+ data.wrapper.innerHTML = ''
+ // create dummy element to test focusability of
+ var element =
+ typeof options.element === 'string'
+ ? data.document.createElement(options.element)
+ : options.element(data.wrapper, data.document)
+ // allow callback to further specify dummy element
+ // and optionally define element to focus
+ var focus =
+ options.mutate && options.mutate(element, data.wrapper, data.document)
+ if (!focus && focus !== false) {
+ focus = element
+ }
+ // element needs to be part of the DOM to be focusable
+ !element.parentNode && data.wrapper.appendChild(element)
+ // test if the element with invalid tabindex can be focused
+ focus && focus.focus && focus.focus()
+ // validate test's result
+ return options.validate
+ ? options.validate(element, focus, data.document)
+ : data.document.activeElement === focus
+}
+
+function after(data) {
+ // restore focus to what it was before test and cleanup
+ if (data.activeElement === document.body) {
+ document.activeElement &&
+ document.activeElement.blur &&
+ document.activeElement.blur()
+ if (platform.is.IE10) {
+ // IE10 does not redirect focus to when the activeElement is removed
+ document.body.focus()
+ }
+ } else {
+ data.activeElement && data.activeElement.focus && data.activeElement.focus()
+ }
+
+ document.body.removeChild(data.iframe)
+
+ // restore scroll position
+ window.scrollTop = data.windowScrollTop
+ window.scrollLeft = data.windowScrollLeft
+ document.body.scrollTop = data.bodyScrollTop
+ document.body.scrollLeft = data.bodyScrollLeft
+}
+
+function detectFocus(tests) {
+ var data = before()
+
+ var results = {}
+ Object.keys(tests).map(function (key) {
+ results[key] = test(data, tests[key])
+ })
+
+ after(data)
+ return results
+}
+
+// this file is overwritten by `npm run build:pre`
+var version$1 = '1.4.1'
+
+/*
+ Facility to cache test results in localStorage.
+
+ USAGE:
+ cache.get('key');
+ cache.set('key', 'value');
+ */
+
+function readLocalStorage(key) {
+ // allow reading from storage to retrieve previous support results
+ // even while the document does not have focus
+ var data = void 0
+
+ try {
+ data = window.localStorage && window.localStorage.getItem(key)
+ data = data ? JSON.parse(data) : {}
+ } catch (e) {
+ data = {}
+ }
+
+ return data
+}
+
+function writeLocalStorage(key, value) {
+ if (!document.hasFocus()) {
+ // if the document does not have focus when tests are executed, focus() may
+ // not be handled properly and events may not be dispatched immediately.
+ // This can happen when a document is reloaded while Developer Tools have focus.
+ try {
+ window.localStorage && window.localStorage.removeItem(key)
+ } catch (e) {
+ // ignore
+ }
+
+ return
+ }
+
+ try {
+ window.localStorage &&
+ window.localStorage.setItem(key, JSON.stringify(value))
+ } catch (e) {
+ // ignore
+ }
+}
+
+var userAgent =
+ (typeof window !== 'undefined' && window.navigator.userAgent) || ''
+var cacheKey = 'ally-supports-cache'
+var cache = readLocalStorage(cacheKey)
+
+// update the cache if ally or the user agent changed (newer version, etc)
+if (cache.userAgent !== userAgent || cache.version !== version$1) {
+ cache = {}
+}
+
+cache.userAgent = userAgent
+cache.version = version$1
+
+var cache$1 = {
+ get: function get() {
+ return cache
+ },
+ set: function set(values) {
+ Object.keys(values).forEach(function (key) {
+ cache[key] = values[key]
+ })
+
+ cache.time = new Date().toISOString()
+ writeLocalStorage(cacheKey, cache)
+ },
+}
+
+function cssShadowPiercingDeepCombinator() {
+ var combinator = void 0
+
+ // see https://dev.w3.org/csswg/css-scoping-1/#deep-combinator
+ // https://bugzilla.mozilla.org/show_bug.cgi?id=1117572
+ // https://code.google.com/p/chromium/issues/detail?id=446051
+ try {
+ document.querySelector('html >>> :first-child')
+ combinator = '>>>'
+ } catch (noArrowArrowArrow) {
+ try {
+ // old syntax supported at least up to Chrome 41
+ // https://code.google.com/p/chromium/issues/detail?id=446051
+ document.querySelector('html /deep/ :first-child')
+ combinator = '/deep/'
+ } catch (noDeep) {
+ combinator = ''
+ }
+ }
+
+ return combinator
+}
+
+var gif =
+ 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
+
+// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-usemap
+var focusAreaImgTabindex = {
+ element: 'div',
+ mutate: function mutate(element) {
+ element.innerHTML =
+ '' +
+ 'content
' + }, +} + +// elements with display:flex are focusable in IE10-11 +var focusFlexboxContainer = { + element: 'span', + mutate: function mutate(element) { + element.setAttribute( + 'style', + 'display: -webkit-flex; display: -ms-flexbox; display: flex;' + ) + element.innerHTML = 'hello' + }, +} + +// form[tabindex=0][disabled] should be focusable as the +// specification doesn't know the disabled attribute on the form element +// @specification https://www.w3.org/TR/html5/forms.html#the-form-element +var focusFormDisabled = { + element: 'form', + mutate: function mutate(element) { + element.setAttribute('tabindex', 0) + element.setAttribute('disabled', 'disabled') + }, +} + +// NOTE: https://github.com/medialize/ally.js/issues/35 +// fixes https://github.com/medialize/ally.js/issues/20 +// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-ismap +var focusImgIsmap = { + element: 'a', + mutate: function mutate(element) { + element.href = '#void' + element.innerHTML = '
+ return element.querySelector('img')
+ },
+ validate: function validate(element, focusTarget, _document) {
+ var target = element.querySelector('area')
+ return _document.activeElement === target
+ },
+}
+
+// see https://jsbin.com/nenirisage/edit?html,js,console,output
+
+var focusRedirectLegend = {
+ element: 'fieldset',
+ mutate: function mutate(element) {
+ element.innerHTML =
+ ''
+ // take care of focus in validate();
+ return false
+ },
+ validate: function validate(element, focusTarget, _document) {
+ var focusable = element.querySelector('input[tabindex="-1"]')
+ var tabbable = element.querySelector('input[tabindex="0"]')
+
+ // Firefox requires this test to focus the