diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..521a9f7 --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +legacy-peer-deps=true diff --git a/README.md b/README.md deleted file mode 100644 index 6fe3fbe..0000000 --- a/README.md +++ /dev/null @@ -1,25 +0,0 @@ -# Next.js 12 React Server Components Demo (Alpha) - -Deploy to Netlify - -Try the demo live here: https://next-edge-demo.netlify.app/. - -> **Warning** -> This demo is built for showing what features that Server Components provide and what the application structure might look like. -> **It's not ready for production adoption, or performance benchmarking** as the underlying APIs are not stable yet, and might change or be improved in the future. - -## Introduction - -This is a demo app of the Hacker News website clone, which shows Next.js 12's experimental React Server Components support. We recommend you taking a look at these links, before trying out the experimental feature: - -- [**Introducing Zero-Bundle-Size React Server Components**](https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html) -- [**Everything About React Server Components**](https://vercel.com/blog/everything-about-react-server-components) -- [**Docs of React Server Components in Next.js**](https://nextjs.org/docs/advanced-features/react-18#react-server-components) - -## Technical Details - -This Next.js application uses React 18 (RC build) and the new [Edge Runtime](https://nextjs.org/docs/api-reference/edge-runtime). It has `runtime` set to `'experimental-edge'` and feature flag `serverComponents` enabled. You can check out [next.config.js](https://github.com/vercel/next-react-server-components/blob/main/next.config.js) for more details. - -## License - -This demo is MIT licensed. diff --git a/app/(newroot)/dashboard/another/page.js b/app/(newroot)/dashboard/another/page.js new file mode 100644 index 0000000..f66225f --- /dev/null +++ b/app/(newroot)/dashboard/another/page.js @@ -0,0 +1,7 @@ +export default function AnotherPage(props) { + return ( + <> +

hello from newroot/dashboard/another

+ + ) +} diff --git a/app/(newroot)/dashboard/project/[projectId]/page.js b/app/(newroot)/dashboard/project/[projectId]/page.js new file mode 100644 index 0000000..ab35d18 --- /dev/null +++ b/app/(newroot)/dashboard/project/[projectId]/page.js @@ -0,0 +1,19 @@ +import { experimental_use as use } from 'react' + +function getData({ params }) { + return { + now: Date.now(), + params, + } +} + +export default function Page(props) { + const data = use(getData(props)) + + return ( + <> +

/dashboard/project/[projectId]

+

{JSON.stringify(data)}

+ + ) +} diff --git a/app/(newroot)/layout.js b/app/(newroot)/layout.js new file mode 100644 index 0000000..ff9eaf1 --- /dev/null +++ b/app/(newroot)/layout.js @@ -0,0 +1,20 @@ +import { experimental_use as use } from 'react' + +async function getData() { + return { + world: 'world', + } +} + +export default function Root({ children }) { + const { world } = use(getData()) + + return ( + + + {`hello ${world}`} + + {children} + + ) +} diff --git a/app/(rootonly)/dashboard/changelog/page.js b/app/(rootonly)/dashboard/changelog/page.js new file mode 100644 index 0000000..f0fc536 --- /dev/null +++ b/app/(rootonly)/dashboard/changelog/page.js @@ -0,0 +1,7 @@ +export default function ChangelogPage(props) { + return ( + <> +

hello from app/dashboard/changelog

+ + ) +} diff --git a/app/(rootonly)/dashboard/hello/page.js b/app/(rootonly)/dashboard/hello/page.js new file mode 100644 index 0000000..f7d874b --- /dev/null +++ b/app/(rootonly)/dashboard/hello/page.js @@ -0,0 +1,7 @@ +export default function HelloPage(props) { + return ( + <> +

hello from app/dashboard/rootonly/hello

+ + ) +} diff --git a/app/catch-all/[...slug]/components/widget.js b/app/catch-all/[...slug]/components/widget.js new file mode 100644 index 0000000..606d3f1 --- /dev/null +++ b/app/catch-all/[...slug]/components/widget.js @@ -0,0 +1,2 @@ +// components under catch-all should not throw errors +export default () =>

widget

diff --git a/app/catch-all/[...slug]/page.js b/app/catch-all/[...slug]/page.js new file mode 100644 index 0000000..d5361f4 --- /dev/null +++ b/app/catch-all/[...slug]/page.js @@ -0,0 +1,12 @@ +import Widget from './components/widget' + +export default function Page({ params }) { + return ( + <> +

+ hello from /catch-all/{params.slug.join('/')} +

+ + + ) +} diff --git a/app/client-component-route/page.js b/app/client-component-route/page.js new file mode 100644 index 0000000..5e2c815 --- /dev/null +++ b/app/client-component-route/page.js @@ -0,0 +1,20 @@ +'client' + +import { useState, useEffect } from 'react' + +import style from './style.module.css' +import './style.css' + +export default function ClientComponentRoute() { + const [count, setCount] = useState(0) + useEffect(() => { + setCount(1) + }, [count]) + return ( + <> +

+ hello from app/client-component-route. count: {count} +

+ + ) +} diff --git a/app/client-component-route/style.css b/app/client-component-route/style.css new file mode 100644 index 0000000..073d428 --- /dev/null +++ b/app/client-component-route/style.css @@ -0,0 +1,3 @@ +b { + color: blue; +} diff --git a/app/client-component-route/style.module.css b/app/client-component-route/style.module.css new file mode 100644 index 0000000..c6dd2c8 --- /dev/null +++ b/app/client-component-route/style.module.css @@ -0,0 +1,3 @@ +.red { + color: red; +} diff --git a/app/client-nested/layout.js b/app/client-nested/layout.js new file mode 100644 index 0000000..506d237 --- /dev/null +++ b/app/client-nested/layout.js @@ -0,0 +1,20 @@ +'client' + +import { useState, useEffect } from 'react' + +import styles from './style.module.css' +import './style.css' + +export default function ClientNestedLayout({ children }) { + const [count, setCount] = useState(0) + useEffect(() => { + setCount(1) + }, []) + return ( + <> +

Client Nested. Count: {count}

+ + {children} + + ) +} diff --git a/app/client-nested/page.js b/app/client-nested/page.js new file mode 100644 index 0000000..2b6a107 --- /dev/null +++ b/app/client-nested/page.js @@ -0,0 +1,7 @@ +export default function ClientPage() { + return ( + <> +

hello from app/client-nested

+ + ) +} diff --git a/app/client-nested/style.css b/app/client-nested/style.css new file mode 100644 index 0000000..23b1956 --- /dev/null +++ b/app/client-nested/style.css @@ -0,0 +1,3 @@ +button { + color: red; +} diff --git a/app/client-nested/style.module.css b/app/client-nested/style.module.css new file mode 100644 index 0000000..c6dd2c8 --- /dev/null +++ b/app/client-nested/style.module.css @@ -0,0 +1,3 @@ +.red { + color: red; +} diff --git a/app/client-with-errors/get-server-side-props/page.js b/app/client-with-errors/get-server-side-props/page.js new file mode 100644 index 0000000..8ea1ccd --- /dev/null +++ b/app/client-with-errors/get-server-side-props/page.js @@ -0,0 +1,7 @@ +'client' + +// export function getServerSideProps() { { props: {} } } + +export default function Page() { + return 'client-gssp' +} diff --git a/app/client-with-errors/get-static-props/page.js b/app/client-with-errors/get-static-props/page.js new file mode 100644 index 0000000..70911d5 --- /dev/null +++ b/app/client-with-errors/get-static-props/page.js @@ -0,0 +1,7 @@ +'client' + +// export function getStaticProps() { return { props: {} }} + +export default function Page() { + return 'client-gsp' +} diff --git a/app/css/css-client/client-foo.css b/app/css/css-client/client-foo.css new file mode 100644 index 0000000..94ff8d4 --- /dev/null +++ b/app/css/css-client/client-foo.css @@ -0,0 +1,3 @@ +.foo { + color: blue; +} diff --git a/app/css/css-client/client-layout.css b/app/css/css-client/client-layout.css new file mode 100644 index 0000000..5bc2906 --- /dev/null +++ b/app/css/css-client/client-layout.css @@ -0,0 +1,3 @@ +body { + background: cyan; +} diff --git a/app/css/css-client/client-page.css b/app/css/css-client/client-page.css new file mode 100644 index 0000000..f3e551c --- /dev/null +++ b/app/css/css-client/client-page.css @@ -0,0 +1,6 @@ +h1 { + color: red !important; +} +h1::after { + content: ' (from css-client!!!!)'; +} diff --git a/app/css/css-client/foo.js b/app/css/css-client/foo.js new file mode 100644 index 0000000..98d4f85 --- /dev/null +++ b/app/css/css-client/foo.js @@ -0,0 +1,5 @@ +import './client-foo.css' + +export default function Foo() { + return foo +} diff --git a/app/css/css-client/layout.js b/app/css/css-client/layout.js new file mode 100644 index 0000000..ab96419 --- /dev/null +++ b/app/css/css-client/layout.js @@ -0,0 +1,14 @@ +'client' + +import './client-layout.css' + +import Foo from './foo' + +export default function ServerLayout({ children }) { + return ( + <> + {children} + + + ) +} diff --git a/app/css/css-client/page.js b/app/css/css-client/page.js new file mode 100644 index 0000000..1e92db8 --- /dev/null +++ b/app/css/css-client/page.js @@ -0,0 +1,7 @@ +'client' + +import './client-page.css' + +export default function Page() { + return

Page!!!

+} diff --git a/app/css/css-nested/layout.js b/app/css/css-nested/layout.js new file mode 100644 index 0000000..8f2a9f5 --- /dev/null +++ b/app/css/css-nested/layout.js @@ -0,0 +1,14 @@ +'client' + +import './style.css' +import styles from './style.module.css' + +export default function ClientLayout({ children }) { + return ( + <> +
Client Layout: CSS Modules
+
Client Layout: Global CSS
+ {children} + + ) +} diff --git a/app/css/css-nested/page.js b/app/css/css-nested/page.js new file mode 100644 index 0000000..baf7462 --- /dev/null +++ b/app/css/css-nested/page.js @@ -0,0 +1,5 @@ +'client' + +export default function Page() { + return null +} diff --git a/app/css/css-nested/style.css b/app/css/css-nested/style.css new file mode 100644 index 0000000..3eeea95 --- /dev/null +++ b/app/css/css-nested/style.css @@ -0,0 +1,3 @@ +.client-css { + color: green; +} diff --git a/app/css/css-nested/style.module.css b/app/css/css-nested/style.module.css new file mode 100644 index 0000000..3eeea95 --- /dev/null +++ b/app/css/css-nested/style.module.css @@ -0,0 +1,3 @@ +.client-css { + color: green; +} diff --git a/app/css/css-page/layout.js b/app/css/css-page/layout.js new file mode 100644 index 0000000..81c0ed0 --- /dev/null +++ b/app/css/css-page/layout.js @@ -0,0 +1,5 @@ +import './style2.css' + +export default function ServerLayout({ children }) { + return <>{children} +} diff --git a/app/css/css-page/page.js b/app/css/css-page/page.js new file mode 100644 index 0000000..2fbdf86 --- /dev/null +++ b/app/css/css-page/page.js @@ -0,0 +1,13 @@ +import './style.css' +import styles from './style.module.css' + +export default function Page() { + return ( + <> +

Page

+
+ CSSM +
+ + ) +} diff --git a/app/css/css-page/style.css b/app/css/css-page/style.css new file mode 100644 index 0000000..adc68fa --- /dev/null +++ b/app/css/css-page/style.css @@ -0,0 +1,3 @@ +h1 { + color: red; +} diff --git a/app/css/css-page/style.module.css b/app/css/css-page/style.module.css new file mode 100644 index 0000000..3991f65 --- /dev/null +++ b/app/css/css-page/style.module.css @@ -0,0 +1,3 @@ +.mod { + color: blue; +} diff --git a/app/css/css-page/style2.css b/app/css/css-page/style2.css new file mode 100644 index 0000000..cfddd0e --- /dev/null +++ b/app/css/css-page/style2.css @@ -0,0 +1,3 @@ +body { + background: #ccc; +} diff --git a/app/css/foo.js b/app/css/foo.js new file mode 100644 index 0000000..d31bab0 --- /dev/null +++ b/app/css/foo.js @@ -0,0 +1 @@ +import './style.module.css' diff --git a/app/css/layout.js b/app/css/layout.js new file mode 100644 index 0000000..3b1bdd7 --- /dev/null +++ b/app/css/layout.js @@ -0,0 +1,15 @@ +import './style.css' +import './css-page/style.css' +import styles from './style.module.css' + +export default function ServerLayout({ children }) { + return ( + <> +
+ Server Layout: CSS Modules +
+
Server Layout: Global CSS
+ {children} + + ) +} diff --git a/app/css/style.css b/app/css/style.css new file mode 100644 index 0000000..26994cd --- /dev/null +++ b/app/css/style.css @@ -0,0 +1,3 @@ +.server-css { + color: blue; +} diff --git a/app/css/style.module.css b/app/css/style.module.css new file mode 100644 index 0000000..efd81fd --- /dev/null +++ b/app/css/style.module.css @@ -0,0 +1,3 @@ +.server-css { + color: green; +} diff --git a/app/dashboard/(custom)/deployments/breakdown/page.js b/app/dashboard/(custom)/deployments/breakdown/page.js new file mode 100644 index 0000000..b4cdd20 --- /dev/null +++ b/app/dashboard/(custom)/deployments/breakdown/page.js @@ -0,0 +1,7 @@ +export default function DeploymentsBreakdownPage(props) { + return ( + <> +

hello from app/dashboard/(custom)/deployments/breakdown

+ + ) +} diff --git a/app/dashboard/(custom)/layout.js b/app/dashboard/(custom)/layout.js new file mode 100644 index 0000000..e861cd3 --- /dev/null +++ b/app/dashboard/(custom)/layout.js @@ -0,0 +1,8 @@ +export default function CustomDashboardRootLayout({ children }) { + return ( + <> +

Custom dashboard

+ {children} + + ) +} diff --git a/app/dashboard/client-comp-client.jsx b/app/dashboard/client-comp-client.jsx new file mode 100644 index 0000000..79c3173 --- /dev/null +++ b/app/dashboard/client-comp-client.jsx @@ -0,0 +1,18 @@ +'client' + +import styles from './client-comp.module.css' + +import { useEffect, useState } from 'react' + +export default function ClientComp() { + const [state, setState] = useState({}) + useEffect(() => { + setState({ test: 'HELLOOOO' }) + }, []) + return ( + <> +

Hello

+ {state.test} + + ) +} diff --git a/app/dashboard/client-comp.module.css b/app/dashboard/client-comp.module.css new file mode 100644 index 0000000..c0ddc6d --- /dev/null +++ b/app/dashboard/client-comp.module.css @@ -0,0 +1,3 @@ +.client { + color: #2e5aea; +} diff --git a/app/dashboard/deployments/[id]/page.js b/app/dashboard/deployments/[id]/page.js new file mode 100644 index 0000000..7d548c4 --- /dev/null +++ b/app/dashboard/deployments/[id]/page.js @@ -0,0 +1,17 @@ +import { experimental_use as use } from 'react' + +async function getData({ params }) { + return { + id: params.id, + } +} + +export default function DeploymentsPage(props) { + const data = use(getData(props)) + + return ( + <> +

hello from app/dashboard/deployments/[id]. ID is: {data.id}

+ + ) +} diff --git a/app/dashboard/deployments/info/page.js b/app/dashboard/deployments/info/page.js new file mode 100644 index 0000000..b435a2c --- /dev/null +++ b/app/dashboard/deployments/info/page.js @@ -0,0 +1,7 @@ +export default function DeploymentsInfoPage(props) { + return ( + <> +

hello from app/dashboard/deployments/info

+ + ) +} diff --git a/app/dashboard/deployments/layout.js b/app/dashboard/deployments/layout.js new file mode 100644 index 0000000..f2f34a5 --- /dev/null +++ b/app/dashboard/deployments/layout.js @@ -0,0 +1,18 @@ +import { experimental_use as use } from 'react' + +async function getData() { + return { + message: 'hello', + } +} + +export default function DeploymentsLayout({ children }) { + const { message } = use(getData()) + + return ( + <> +

Deployments {message}

+ {children} + + ) +} diff --git a/app/dashboard/global.css b/app/dashboard/global.css new file mode 100644 index 0000000..a83c888 --- /dev/null +++ b/app/dashboard/global.css @@ -0,0 +1,3 @@ +.dangerous-text { + color: red; +} diff --git a/app/dashboard/index/dynamic-imports/dynamic-client.js b/app/dashboard/index/dynamic-imports/dynamic-client.js new file mode 100644 index 0000000..63dcccc --- /dev/null +++ b/app/dashboard/index/dynamic-imports/dynamic-client.js @@ -0,0 +1,9 @@ +'client' + +import dynamic from 'next/dist/client/components/shared/dynamic' + +const Dynamic = dynamic(() => import('../text-dynamic-client')) + +export function NextDynamicClientComponent() { + return +} diff --git a/app/dashboard/index/dynamic-imports/dynamic-server.js b/app/dashboard/index/dynamic-imports/dynamic-server.js new file mode 100644 index 0000000..0d9406e --- /dev/null +++ b/app/dashboard/index/dynamic-imports/dynamic-server.js @@ -0,0 +1,7 @@ +import dynamic from 'next/dist/client/components/shared/dynamic' + +const Dynamic = dynamic(() => import('../text-dynamic-server')) + +export function NextDynamicServerComponent() { + return +} diff --git a/app/dashboard/index/dynamic-imports/react-lazy-client.js b/app/dashboard/index/dynamic-imports/react-lazy-client.js new file mode 100644 index 0000000..18fff4e --- /dev/null +++ b/app/dashboard/index/dynamic-imports/react-lazy-client.js @@ -0,0 +1,15 @@ +'client' + +import { useState, lazy } from 'react' + +const Lazy = lazy(() => import('../text-lazy-client.js')) + +export function LazyClientComponent() { + let [state] = useState('client') + return ( + <> + +

hello from {state}

+ + ) +} diff --git a/app/dashboard/index/dynamic.module.css b/app/dashboard/index/dynamic.module.css new file mode 100644 index 0000000..97af642 --- /dev/null +++ b/app/dashboard/index/dynamic.module.css @@ -0,0 +1,3 @@ +.dynamic { + color: blue; +} diff --git a/app/dashboard/index/lazy.module.css b/app/dashboard/index/lazy.module.css new file mode 100644 index 0000000..4369b2c --- /dev/null +++ b/app/dashboard/index/lazy.module.css @@ -0,0 +1,3 @@ +.lazy { + color: purple; +} diff --git a/app/dashboard/index/page.js b/app/dashboard/index/page.js new file mode 100644 index 0000000..c946b76 --- /dev/null +++ b/app/dashboard/index/page.js @@ -0,0 +1,14 @@ +import { LazyClientComponent } from './dynamic-imports/react-lazy-client' +import { NextDynamicServerComponent } from './dynamic-imports/dynamic-server' +import { NextDynamicClientComponent } from './dynamic-imports/dynamic-client' + +export default function DashboardIndexPage() { + return ( + <> +

hello from app/dashboard/index

+ + + + + ) +} diff --git a/app/dashboard/index/text-dynamic-client.js b/app/dashboard/index/text-dynamic-client.js new file mode 100644 index 0000000..6661c55 --- /dev/null +++ b/app/dashboard/index/text-dynamic-client.js @@ -0,0 +1,13 @@ +'client' + +import { useState } from 'react' +import styles from './dynamic.module.css' + +export default function Dynamic() { + let [state] = useState('dynamic on client') + return ( +

+ {`hello from ${state}`} +

+ ) +} diff --git a/app/dashboard/index/text-dynamic-server.js b/app/dashboard/index/text-dynamic-server.js new file mode 100644 index 0000000..9f87f73 --- /dev/null +++ b/app/dashboard/index/text-dynamic-server.js @@ -0,0 +1,9 @@ +import styles from './dynamic.module.css' + +export default function Dynamic() { + return ( +

+ hello from dynamic on server +

+ ) +} diff --git a/app/dashboard/index/text-lazy-client.js b/app/dashboard/index/text-lazy-client.js new file mode 100644 index 0000000..ead59b0 --- /dev/null +++ b/app/dashboard/index/text-lazy-client.js @@ -0,0 +1,13 @@ +'client' + +import styles from './lazy.module.css' + +export default function LazyComponent() { + return ( + <> +

+ hello from lazy +

+ + ) +} diff --git a/app/dashboard/integrations/page.js b/app/dashboard/integrations/page.js new file mode 100644 index 0000000..683d131 --- /dev/null +++ b/app/dashboard/integrations/page.js @@ -0,0 +1,7 @@ +export default function IntegrationsPage(props) { + return ( + <> +

hello from app/dashboard/integrations

+ + ) +} diff --git a/app/dashboard/layout.js b/app/dashboard/layout.js new file mode 100644 index 0000000..ff3ee29 --- /dev/null +++ b/app/dashboard/layout.js @@ -0,0 +1,11 @@ +import './style.css' +import './global.css' + +export default function DashboardLayout(props) { + return ( +
+

Dashboard

+ {props.children} +
+ ) +} diff --git a/app/dashboard/page.js b/app/dashboard/page.js new file mode 100644 index 0000000..966a2a3 --- /dev/null +++ b/app/dashboard/page.js @@ -0,0 +1,18 @@ +import ClientComp from './client-comp-client' + +export default function DashboardPage(props) { + return ( + <> +

+ hello from app/dashboard +

+

BOLD

+

this is green

+ + + ) +} + +export const config = { + runtime: 'experimental-edge', +} diff --git a/app/dashboard/style.css b/app/dashboard/style.css new file mode 100644 index 0000000..fa95e11 --- /dev/null +++ b/app/dashboard/style.css @@ -0,0 +1,3 @@ +.green { + color: green; +} diff --git a/app/dynamic/[category]/[id]/layout.js b/app/dynamic/[category]/[id]/layout.js new file mode 100644 index 0000000..0d09ad0 --- /dev/null +++ b/app/dynamic/[category]/[id]/layout.js @@ -0,0 +1,11 @@ +export default function IdLayout({ children, params }) { + return ( + <> +

+ Id Layout. Params:{' '} + {JSON.stringify(params)} +

+ {children} + + ) +} diff --git a/app/dynamic/[category]/[id]/page.js b/app/dynamic/[category]/[id]/page.js new file mode 100644 index 0000000..02df487 --- /dev/null +++ b/app/dynamic/[category]/[id]/page.js @@ -0,0 +1,11 @@ +export default function IdPage({ children, params }) { + return ( + <> +

+ Id Page. Params:{' '} + {JSON.stringify(params)} +

+ {children} + + ) +} diff --git a/app/dynamic/[category]/layout.js b/app/dynamic/[category]/layout.js new file mode 100644 index 0000000..2744b8a --- /dev/null +++ b/app/dynamic/[category]/layout.js @@ -0,0 +1,11 @@ +export default function CategoryLayout({ children, params }) { + return ( + <> +

+ Category Layout. Params:{' '} + {JSON.stringify(params)}{' '} +

+ {children} + + ) +} diff --git a/app/dynamic/layout.js b/app/dynamic/layout.js new file mode 100644 index 0000000..549e0e3 --- /dev/null +++ b/app/dynamic/layout.js @@ -0,0 +1,11 @@ +export default function DynamicLayout({ children, params }) { + return ( + <> +

+ Dynamic Layout. Params:{' '} + {JSON.stringify(params)} +

+ {children} + + ) +} diff --git a/app/error/clientcomponent/error.js b/app/error/clientcomponent/error.js new file mode 100644 index 0000000..57ad918 --- /dev/null +++ b/app/error/clientcomponent/error.js @@ -0,0 +1,12 @@ +'client' + +export default function ErrorBoundary({ error, reset }) { + return ( + <> +

An error occurred: {error.message}

+ + + ) +} diff --git a/app/error/clientcomponent/page.js b/app/error/clientcomponent/page.js new file mode 100644 index 0000000..5f4e73d --- /dev/null +++ b/app/error/clientcomponent/page.js @@ -0,0 +1,20 @@ +'client' + +import { useState } from 'react' + +export default function Page() { + const [clicked, setClicked] = useState(false) + if (clicked) { + throw new Error('this is a test') + } + return ( + + ) +} diff --git a/app/error/ssr-error-client-component/client-component.js b/app/error/ssr-error-client-component/client-component.js new file mode 100644 index 0000000..7743a31 --- /dev/null +++ b/app/error/ssr-error-client-component/client-component.js @@ -0,0 +1,5 @@ +'client' + +export default function Page() { + throw new Error('Error during SSR') +} diff --git a/app/error/ssr-error-client-component/page.js b/app/error/ssr-error-client-component/page.js new file mode 100644 index 0000000..39d5495 --- /dev/null +++ b/app/error/ssr-error-client-component/page.js @@ -0,0 +1,8 @@ +import ClientComp from './client-component' +import { useHeaders } from 'next/dist/client/components/hooks-server' + +export default function Page() { + // Opt-in to SSR. + useHeaders() + return +} diff --git a/app/extension/page.server.js b/app/extension/page.server.js new file mode 100644 index 0000000..6e4c138 --- /dev/null +++ b/app/extension/page.server.js @@ -0,0 +1,3 @@ +export default function Page() { + return

Result Page

+} diff --git a/app/hooks/use-cookies/client/page.js b/app/hooks/use-cookies/client/page.js new file mode 100644 index 0000000..e387b36 --- /dev/null +++ b/app/hooks/use-cookies/client/page.js @@ -0,0 +1,10 @@ +'client' + +import { useCookies } from 'next/dist/client/components/hooks-server' + +export default function Page() { + // This should throw an error. + useCookies() + + return null +} diff --git a/app/hooks/use-cookies/page.js b/app/hooks/use-cookies/page.js new file mode 100644 index 0000000..dd2efcc --- /dev/null +++ b/app/hooks/use-cookies/page.js @@ -0,0 +1,19 @@ +import { useCookies } from 'next/dist/client/components/hooks-server' + +export default function Page() { + const cookies = useCookies() + + const hasCookie = + 'use-cookies' in cookies && cookies['use-cookies'] === 'value' + + return ( + <> +

hello from /hooks/use-cookies

+ {hasCookie ? ( + + ) : ( + + )} + + ) +} diff --git a/app/hooks/use-headers/client/page.js b/app/hooks/use-headers/client/page.js new file mode 100644 index 0000000..022da1e --- /dev/null +++ b/app/hooks/use-headers/client/page.js @@ -0,0 +1,10 @@ +'client' + +import { useHeaders } from 'next/dist/client/components/hooks-server' + +export default function Page() { + // This should throw an error. + useHeaders() + + return null +} diff --git a/app/hooks/use-headers/page.js b/app/hooks/use-headers/page.js new file mode 100644 index 0000000..2c73997 --- /dev/null +++ b/app/hooks/use-headers/page.js @@ -0,0 +1,22 @@ +import { useHeaders } from 'next/dist/client/components/hooks-server' + +export default function Page() { + const headers = useHeaders() + + const hasHeader = + 'x-use-headers' in headers && headers['x-use-headers'] === 'value' + + return ( + <> +

hello from /hooks/use-headers

+ {hasHeader ? ( +

Has x-use-headers header

+ ) : ( +

Does not have x-use-headers header

+ )} + {'referer' in headers && headers['referer'] && ( +

Has referer header

+ )} + + ) +} diff --git a/app/hooks/use-layout-segments/server/page.js b/app/hooks/use-layout-segments/server/page.js new file mode 100644 index 0000000..8ffb8c9 --- /dev/null +++ b/app/hooks/use-layout-segments/server/page.js @@ -0,0 +1,10 @@ +'client' +// TODO-APP: enable once test is not skipped. +// import { useLayoutSegments } from 'next/dist/client/components/hooks-client' + +export default function Page() { + // This should throw an error. + // useLayoutSegments() + + return null +} diff --git a/app/hooks/use-params/server/page.js b/app/hooks/use-params/server/page.js new file mode 100644 index 0000000..0190f96 --- /dev/null +++ b/app/hooks/use-params/server/page.js @@ -0,0 +1,9 @@ +// TODO-APP: enable when implemented. +// import { useParams } from 'next/dist/client/components/hooks-client' + +export default function Page() { + // This should throw an error. + // useParams() + + return null +} diff --git a/app/hooks/use-pathname/page.js b/app/hooks/use-pathname/page.js new file mode 100644 index 0000000..fa8350a --- /dev/null +++ b/app/hooks/use-pathname/page.js @@ -0,0 +1,15 @@ +'client' + +import { usePathname } from 'next/dist/client/components/hooks-client' + +export default function Page() { + const pathname = usePathname() + + return ( + <> +

+ hello from /hooks/use-pathname +

+ + ) +} diff --git a/app/hooks/use-pathname/server/page.js b/app/hooks/use-pathname/server/page.js new file mode 100644 index 0000000..bb5ab57 --- /dev/null +++ b/app/hooks/use-pathname/server/page.js @@ -0,0 +1,8 @@ +// import { usePathname } from 'next/dist/client/components/hooks-client' + +export default function Page() { + // This should throw an error. + // usePathname() + + return null +} diff --git a/app/hooks/use-preview-data/client/page.js b/app/hooks/use-preview-data/client/page.js new file mode 100644 index 0000000..86fbc8f --- /dev/null +++ b/app/hooks/use-preview-data/client/page.js @@ -0,0 +1,10 @@ +'client' + +import { usePreviewData } from 'next/dist/client/components/hooks-server' + +export default function Page() { + // This should throw an error. + usePreviewData() + + return null +} diff --git a/app/hooks/use-preview-data/page.js b/app/hooks/use-preview-data/page.js new file mode 100644 index 0000000..afdcad1 --- /dev/null +++ b/app/hooks/use-preview-data/page.js @@ -0,0 +1,18 @@ +import { usePreviewData } from 'next/dist/client/components/hooks-server' + +export default function Page() { + const data = usePreviewData() + + const hasData = !!data && data.key === 'value' + + return ( + <> +

hello from /hooks/use-preview-data

+ {hasData ? ( +

Has preview data

+ ) : ( +

Does not have preview data

+ )} + + ) +} diff --git a/app/hooks/use-router/page.js b/app/hooks/use-router/page.js new file mode 100644 index 0000000..51a14d9 --- /dev/null +++ b/app/hooks/use-router/page.js @@ -0,0 +1,19 @@ +'client' + +import { useRouter } from 'next/dist/client/components/hooks-client' + +export default function Page() { + const router = useRouter() + + return ( + <> +

hello from /hooks/use-router

+ + + ) +} diff --git a/app/hooks/use-router/server/page.js b/app/hooks/use-router/server/page.js new file mode 100644 index 0000000..18a7971 --- /dev/null +++ b/app/hooks/use-router/server/page.js @@ -0,0 +1,8 @@ +// import { useRouter } from 'next/dist/client/components/hooks-client' + +export default function Page() { + // This should throw an error. + // useRouter() + + return null +} diff --git a/app/hooks/use-router/sub-page/page.js b/app/hooks/use-router/sub-page/page.js new file mode 100644 index 0000000..82c6347 --- /dev/null +++ b/app/hooks/use-router/sub-page/page.js @@ -0,0 +1,5 @@ +'client' + +export default function Page() { + return

hello from /hooks/use-router/sub-page

+} diff --git a/app/hooks/use-search-params/page.js b/app/hooks/use-search-params/page.js new file mode 100644 index 0000000..d9876c9 --- /dev/null +++ b/app/hooks/use-search-params/page.js @@ -0,0 +1,21 @@ +'client' + +import { useSearchParams } from 'next/dist/client/components/hooks-client' + +export default function Page() { + const params = useSearchParams() + + return ( + <> +

+ hello from /hooks/use-search-params +

+ + ) +} diff --git a/app/hooks/use-search-params/server/page.js b/app/hooks/use-search-params/server/page.js new file mode 100644 index 0000000..65c6fe8 --- /dev/null +++ b/app/hooks/use-search-params/server/page.js @@ -0,0 +1,8 @@ +// import { useSearchParams } from 'next/dist/client/components/hooks-client' + +export default function Page() { + // This should throw an error. + // useSearchParams() + + return null +} diff --git a/app/hooks/use-selected-layout-segment/server/page.js b/app/hooks/use-selected-layout-segment/server/page.js new file mode 100644 index 0000000..a5d718c --- /dev/null +++ b/app/hooks/use-selected-layout-segment/server/page.js @@ -0,0 +1,10 @@ +'client' +// TODO-APP: enable once test is not skipped. +// import { useSelectedLayoutSegment } from 'next/dist/client/components/hooks-client' + +export default function Page() { + // This should throw an error. + // useSelectedLayoutSegment() + + return null +} diff --git a/app/internal/failure/page.js b/app/internal/failure/page.js new file mode 100644 index 0000000..9bd06ec --- /dev/null +++ b/app/internal/failure/page.js @@ -0,0 +1,3 @@ +export default function Page() { + return
Failure
+} diff --git a/app/internal/page.js b/app/internal/page.js new file mode 100644 index 0000000..ddbc93e --- /dev/null +++ b/app/internal/page.js @@ -0,0 +1,18 @@ +import Link from 'next/link' + +export default function Page() { + return ( +
+ + +
+ ) +} diff --git a/app/internal/success/page.js b/app/internal/success/page.js new file mode 100644 index 0000000..90c6aec --- /dev/null +++ b/app/internal/success/page.js @@ -0,0 +1,3 @@ +export default function Page() { + return
Success
+} diff --git a/app/layout.js b/app/layout.js new file mode 100644 index 0000000..d632f8d --- /dev/null +++ b/app/layout.js @@ -0,0 +1,27 @@ +import { experimental_use as use } from 'react' + +import '../styles/global.css' +import './style.css' + +export const config = { + revalidate: 0, +} + +async function getData() { + return { + world: 'world', + } +} + +export default function Root({ children }) { + const { world } = use(getData()) + + return ( + + + {`hello ${world}`} + + {children} + + ) +} diff --git a/app/link-hard-push/[id]/page.js b/app/link-hard-push/[id]/page.js new file mode 100644 index 0000000..c440f05 --- /dev/null +++ b/app/link-hard-push/[id]/page.js @@ -0,0 +1,14 @@ +import Link from 'next/link' +import { nanoid } from 'nanoid' + +export default function Page({ params }) { + const other = params.id === '123' ? '456' : '123' + return ( + <> +

{nanoid()}

{' '} + + To {other} + + + ) +} diff --git a/app/link-hard-replace/[id]/page.js b/app/link-hard-replace/[id]/page.js new file mode 100644 index 0000000..c90e93f --- /dev/null +++ b/app/link-hard-replace/[id]/page.js @@ -0,0 +1,14 @@ +import Link from 'next/link' +import { nanoid } from 'nanoid' + +export default function Page({ params }) { + const other = params.id === '123' ? '456' : '123' + return ( + <> +

{nanoid()}

{' '} + + To {other} + + + ) +} diff --git a/app/link-hard-replace/page.js b/app/link-hard-replace/page.js new file mode 100644 index 0000000..340baa1 --- /dev/null +++ b/app/link-hard-replace/page.js @@ -0,0 +1,16 @@ +import { nanoid } from 'nanoid' +import Link from 'next/link' + +export default function Page() { + return ( + <> +

{nanoid()}

+ + Self Link + + + Subpage + + + ) +} diff --git a/app/link-hard-replace/subpage/page.js b/app/link-hard-replace/subpage/page.js new file mode 100644 index 0000000..cd58654 --- /dev/null +++ b/app/link-hard-replace/subpage/page.js @@ -0,0 +1,9 @@ +import Link from 'next/link' + +export default function Page() { + return ( + + Self Link + + ) +} diff --git a/app/link-soft-push/page.js b/app/link-soft-push/page.js new file mode 100644 index 0000000..049e5be --- /dev/null +++ b/app/link-soft-push/page.js @@ -0,0 +1,9 @@ +import Link from 'next/link' + +export default function Page() { + return ( + + With ID + + ) +} diff --git a/app/link-soft-replace/page.js b/app/link-soft-replace/page.js new file mode 100644 index 0000000..c65758d --- /dev/null +++ b/app/link-soft-replace/page.js @@ -0,0 +1,16 @@ +import { nanoid } from 'nanoid' +import Link from 'next/link' + +export default function Page() { + return ( + <> +

{nanoid()}

+ + Self Link + + + Subpage + + + ) +} diff --git a/app/link-soft-replace/subpage/page.js b/app/link-soft-replace/subpage/page.js new file mode 100644 index 0000000..6ee17de --- /dev/null +++ b/app/link-soft-replace/subpage/page.js @@ -0,0 +1,9 @@ +import Link from 'next/link' + +export default function Page() { + return ( + + Self Link + + ) +} diff --git a/app/loading-bug/[categorySlug]/loading.js b/app/loading-bug/[categorySlug]/loading.js new file mode 100644 index 0000000..f1ca6af --- /dev/null +++ b/app/loading-bug/[categorySlug]/loading.js @@ -0,0 +1,3 @@ +export default function Loading() { + return

Loading...

+} diff --git a/app/loading-bug/[categorySlug]/page.js b/app/loading-bug/[categorySlug]/page.js new file mode 100644 index 0000000..9352955 --- /dev/null +++ b/app/loading-bug/[categorySlug]/page.js @@ -0,0 +1,15 @@ +// @ts-ignore +import { experimental_use as use } from 'react' + +const fetchCategory = async (categorySlug) => { + // artificial delay + await new Promise((resolve) => setTimeout(resolve, 3000)) + + return categorySlug + 'abc' +} + +export default function Page({ params }) { + const category = use(fetchCategory(params.categorySlug)) + + return
{category}
+} diff --git a/app/navigation/link.js b/app/navigation/link.js new file mode 100644 index 0000000..9d39caa --- /dev/null +++ b/app/navigation/link.js @@ -0,0 +1,27 @@ +'client' + +import { useRouter } from 'next/dist/client/components/hooks-client' +import React from 'react' +import { useEffect } from 'react' + +export default function HardLink({ href, children, ...props }) { + const router = useRouter() + useEffect(() => { + router.prefetch(href) + }, [router, href]) + return ( + { + e.preventDefault() + React.startTransition(() => { + router.push(href) + router.reload() + }) + }} + > + {children} + + ) +} diff --git a/app/navigation/page.js b/app/navigation/page.js new file mode 100644 index 0000000..62238fc --- /dev/null +++ b/app/navigation/page.js @@ -0,0 +1,17 @@ +import { nanoid } from 'nanoid' +import Link from './link.js' + +export default function Page() { + return ( + <> +

{nanoid()}

+

hello from /navigation

+ + useCookies + + + useHeaders + + + ) +} diff --git a/app/not-found/404.js b/app/not-found/404.js new file mode 100644 index 0000000..42acdf4 --- /dev/null +++ b/app/not-found/404.js @@ -0,0 +1,3 @@ +export default function NotFound() { + return

404!

+} diff --git a/app/not-found/client-side/page.js b/app/not-found/client-side/page.js new file mode 100644 index 0000000..faca8e3 --- /dev/null +++ b/app/not-found/client-side/page.js @@ -0,0 +1,17 @@ +'client' + +import { notFound } from 'next/dist/client/components/not-found' +import React from 'react' + +export default function Page() { + const [notFoundEnabled, enableNotFound] = React.useState(false) + + if (notFoundEnabled) { + notFound() + } + return ( + + ) +} diff --git a/app/not-found/clientcomponent/a.js b/app/not-found/clientcomponent/a.js new file mode 100644 index 0000000..c86055f --- /dev/null +++ b/app/not-found/clientcomponent/a.js @@ -0,0 +1,9 @@ +// TODO-APP: enable when flight error serialization is implemented +import ClientComp from './client-component' +import { useHeaders } from 'next/dist/client/components/hooks-server' + +export default function Page() { + // Opt-in to SSR. + useHeaders() + return +} diff --git a/app/not-found/clientcomponent/client-component.js b/app/not-found/clientcomponent/client-component.js new file mode 100644 index 0000000..7469f1c --- /dev/null +++ b/app/not-found/clientcomponent/client-component.js @@ -0,0 +1,7 @@ +'client' +import { notFound } from 'next/dist/client/components/not-found' + +export default function ClientComp() { + notFound() + return <> +} diff --git a/app/not-found/servercomponent/a.js b/app/not-found/servercomponent/a.js new file mode 100644 index 0000000..5704c31 --- /dev/null +++ b/app/not-found/servercomponent/a.js @@ -0,0 +1,7 @@ +// TODO-APP: enable when flight error serialization is implemented +import { notFound } from 'next/dist/client/components/not-found' + +export default function Page() { + notFound() + return <> +} diff --git a/app/old-router/client-router.js b/app/old-router/client-router.js new file mode 100644 index 0000000..3dc2297 --- /dev/null +++ b/app/old-router/client-router.js @@ -0,0 +1,17 @@ +'client' + +import { useRouter, withRouter } from 'next/router' +import IsNull from './is-null' + +function ClientRouter({ router: withRouter }) { + const router = useRouter() + + return ( + <> + + + + ) +} + +export default withRouter(ClientRouter) diff --git a/app/old-router/is-null.js b/app/old-router/is-null.js new file mode 100644 index 0000000..3876fbe --- /dev/null +++ b/app/old-router/is-null.js @@ -0,0 +1,7 @@ +export default function IsNull({ value }) { + if (value === null) { + return
Value Was Null
+ } + + return
Value Was Not Null
+} diff --git a/app/old-router/page.js b/app/old-router/page.js new file mode 100644 index 0000000..928fa11 --- /dev/null +++ b/app/old-router/page.js @@ -0,0 +1,12 @@ +import { useCookies } from 'next/dist/client/components/hooks-server' +import Router from './router' + +export default function Page() { + useCookies() + + return ( +
+ +
+ ) +} diff --git a/app/old-router/router.js b/app/old-router/router.js new file mode 100644 index 0000000..7cddbe4 --- /dev/null +++ b/app/old-router/router.js @@ -0,0 +1,19 @@ +import { useRouter, withRouter } from 'next/router' +import IsNull from './is-null' +import ServerRouter from './server-router' +import ClientRouter from './client-router' + +function SharedRouter({ router: withRouter }) { + const router = useRouter() + + return ( + <> + + + + + + ) +} + +export default withRouter(SharedRouter) diff --git a/app/old-router/server-router.js b/app/old-router/server-router.js new file mode 100644 index 0000000..9e12913 --- /dev/null +++ b/app/old-router/server-router.js @@ -0,0 +1,15 @@ +import { useRouter, withRouter } from 'next/router' +import IsNull from './is-null' + +function ServerRouter({ router: withRouter }) { + const router = useRouter() + + return ( + <> + + + + ) +} + +export default withRouter(ServerRouter) diff --git a/app/optional-catch-all/[[...slug]]/page.js b/app/optional-catch-all/[[...slug]]/page.js new file mode 100644 index 0000000..c02675e --- /dev/null +++ b/app/optional-catch-all/[[...slug]]/page.js @@ -0,0 +1,7 @@ +export default function Page({ params }) { + return ( +

+ hello from /optional-catch-all/{params.slug?.join('/')} +

+ ) +} diff --git a/app/pages-linking/page.js b/app/pages-linking/page.js new file mode 100644 index 0000000..19b7cc4 --- /dev/null +++ b/app/pages-linking/page.js @@ -0,0 +1,9 @@ +import Link from 'next/link' + +export default function Page(props) { + return ( + + To Pages Page + + ) +} diff --git a/app/parallel/(new)/@baz/nested-2/page.js b/app/parallel/(new)/@baz/nested-2/page.js new file mode 100644 index 0000000..05c172f --- /dev/null +++ b/app/parallel/(new)/@baz/nested-2/page.js @@ -0,0 +1,3 @@ +export default function Page() { + return
parallel/(new)/@baz/nested/page
+} diff --git a/app/parallel/(new)/layout.js b/app/parallel/(new)/layout.js new file mode 100644 index 0000000..491d122 --- /dev/null +++ b/app/parallel/(new)/layout.js @@ -0,0 +1,10 @@ +export default function Layout({ baz }) { + return ( +
+ parallel/(new)/layout: +
+ {baz} +
+
+ ) +} diff --git a/app/parallel/@bar/nested/@a/page.js b/app/parallel/@bar/nested/@a/page.js new file mode 100644 index 0000000..d1c6fc7 --- /dev/null +++ b/app/parallel/@bar/nested/@a/page.js @@ -0,0 +1,3 @@ +export default function Page() { + return
parallel/@bar/nested/@a/page
+} diff --git a/app/parallel/@bar/nested/@b/page.js b/app/parallel/@bar/nested/@b/page.js new file mode 100644 index 0000000..15ef0b7 --- /dev/null +++ b/app/parallel/@bar/nested/@b/page.js @@ -0,0 +1,3 @@ +export default function Page() { + return
parallel/@bar/nested/@b/page
+} diff --git a/app/parallel/@bar/nested/layout.js b/app/parallel/@bar/nested/layout.js new file mode 100644 index 0000000..4ba7b39 --- /dev/null +++ b/app/parallel/@bar/nested/layout.js @@ -0,0 +1,16 @@ +export default function Parallel({ a, b, children }) { + return ( +
+ parallel/@bar/nested/layout +
+ {a} +
+
+ {b} +
+
+ {children} +
+
+ ) +} diff --git a/app/parallel/@bar/page.js b/app/parallel/@bar/page.js new file mode 100644 index 0000000..568f5ed --- /dev/null +++ b/app/parallel/@bar/page.js @@ -0,0 +1,3 @@ +export default function Page() { + return
Bar
+} diff --git a/app/parallel/@foo/nested/@a/page.js b/app/parallel/@foo/nested/@a/page.js new file mode 100644 index 0000000..31c6048 --- /dev/null +++ b/app/parallel/@foo/nested/@a/page.js @@ -0,0 +1,3 @@ +export default function Page() { + return
parallel/@foo/nested/@a/page
+} diff --git a/app/parallel/@foo/nested/@b/page.js b/app/parallel/@foo/nested/@b/page.js new file mode 100644 index 0000000..79481da --- /dev/null +++ b/app/parallel/@foo/nested/@b/page.js @@ -0,0 +1,3 @@ +export default function Page() { + return
parallel/@foo/nested/@b/page
+} diff --git a/app/parallel/@foo/nested/layout.js b/app/parallel/@foo/nested/layout.js new file mode 100644 index 0000000..19d532a --- /dev/null +++ b/app/parallel/@foo/nested/layout.js @@ -0,0 +1,16 @@ +export default function Parallel({ a, b, children }) { + return ( +
+ parallel/@foo/nested/layout +
+ {a} +
+
+ {b} +
+
+ {children} +
+
+ ) +} diff --git a/app/parallel/@foo/page.js b/app/parallel/@foo/page.js new file mode 100644 index 0000000..9e30ce2 --- /dev/null +++ b/app/parallel/@foo/page.js @@ -0,0 +1,3 @@ +export default function Page() { + return
Foo
+} diff --git a/app/parallel/layout.js b/app/parallel/layout.js new file mode 100644 index 0000000..a1474ba --- /dev/null +++ b/app/parallel/layout.js @@ -0,0 +1,18 @@ +import './style.css' + +export default function Parallel({ foo, bar, children }) { + return ( +
+ parallel/layout: +
+ {foo} +
+
+ {bar} +
+
+ {children} +
+
+ ) +} diff --git a/app/parallel/nested/page.js b/app/parallel/nested/page.js new file mode 100644 index 0000000..d7992d7 --- /dev/null +++ b/app/parallel/nested/page.js @@ -0,0 +1,3 @@ +export default function Page() { + return
parallel/nested/page
+} diff --git a/app/parallel/style.css b/app/parallel/style.css new file mode 100644 index 0000000..723ece5 --- /dev/null +++ b/app/parallel/style.css @@ -0,0 +1,15 @@ +div { + font-size: 16px; +} + +.parallel { + border: 1px solid; + margin: 10px; +} + +.parallel::before { + content: attr(title); + background: black; + color: white; + padding: 1px; +} diff --git a/app/param-and-query/[slug]/page.js b/app/param-and-query/[slug]/page.js new file mode 100644 index 0000000..c778751 --- /dev/null +++ b/app/param-and-query/[slug]/page.js @@ -0,0 +1,13 @@ +'client' + +export default function Page({ params, searchParams }) { + return ( +

+ hello from /param-and-query/{params.slug}?slug={searchParams.slug} +

+ ) +} diff --git a/app/partial-match-[id]/page.js b/app/partial-match-[id]/page.js new file mode 100644 index 0000000..3342919 --- /dev/null +++ b/app/partial-match-[id]/page.js @@ -0,0 +1,7 @@ +export default function DeploymentsPage(props) { + return ( + <> +

hello from app/partial-match-[id]. ID is: {props.params.id}

+ + ) +} diff --git a/app/redirect/client-side/page.js b/app/redirect/client-side/page.js new file mode 100644 index 0000000..1d11b4c --- /dev/null +++ b/app/redirect/client-side/page.js @@ -0,0 +1,19 @@ +'client' + +import { redirect } from 'next/dist/client/components/redirect' +import React from 'react' + +export default function Page() { + const [shouldRedirect, setShouldRedirect] = React.useState(false) + + if (shouldRedirect) { + redirect('/redirect/result') + } + return ( + + ) +} diff --git a/app/redirect/clientcomponent/client-component.js b/app/redirect/clientcomponent/client-component.js new file mode 100644 index 0000000..5e7cb99 --- /dev/null +++ b/app/redirect/clientcomponent/client-component.js @@ -0,0 +1,7 @@ +'client' +import { redirect } from 'next/dist/client/components/redirect' + +export default function ClientComp() { + redirect('/redirect/result') + return <> +} diff --git a/app/redirect/clientcomponent/page.js b/app/redirect/clientcomponent/page.js new file mode 100644 index 0000000..39d5495 --- /dev/null +++ b/app/redirect/clientcomponent/page.js @@ -0,0 +1,8 @@ +import ClientComp from './client-component' +import { useHeaders } from 'next/dist/client/components/hooks-server' + +export default function Page() { + // Opt-in to SSR. + useHeaders() + return +} diff --git a/app/redirect/next-config-redirect/page.js b/app/redirect/next-config-redirect/page.js new file mode 100644 index 0000000..95038b8 --- /dev/null +++ b/app/redirect/next-config-redirect/page.js @@ -0,0 +1,11 @@ +import Link from 'next/link' + +export default function Page() { + return ( + <> + + To Dashboard through /redirect/a + + + ) +} diff --git a/app/redirect/next-middleware-redirect/page.js b/app/redirect/next-middleware-redirect/page.js new file mode 100644 index 0000000..49a7215 --- /dev/null +++ b/app/redirect/next-middleware-redirect/page.js @@ -0,0 +1,11 @@ +import Link from 'next/link' + +export default function Page() { + return ( + <> + + To Dashboard through /redirect/a + + + ) +} diff --git a/app/redirect/result/page.js b/app/redirect/result/page.js new file mode 100644 index 0000000..6e4c138 --- /dev/null +++ b/app/redirect/result/page.js @@ -0,0 +1,3 @@ +export default function Page() { + return

Result Page

+} diff --git a/app/redirect/servercomponent/page.js b/app/redirect/servercomponent/page.js new file mode 100644 index 0000000..a3b187f --- /dev/null +++ b/app/redirect/servercomponent/page.js @@ -0,0 +1,6 @@ +import { redirect } from 'next/dist/client/components/redirect' + +export default function Page() { + redirect('/redirect/result') + return <> +} diff --git a/app/rewrites/page.js b/app/rewrites/page.js new file mode 100644 index 0000000..ae97d2a --- /dev/null +++ b/app/rewrites/page.js @@ -0,0 +1,9 @@ +import Link from 'next/link' + +export default function Page() { + return ( + + To Dashboard Rewritten + + ) +} diff --git a/app/same-layout/first/page.js b/app/same-layout/first/page.js new file mode 100644 index 0000000..bf4ba9e --- /dev/null +++ b/app/same-layout/first/page.js @@ -0,0 +1,12 @@ +import Link from 'next/link' + +export default function Page() { + return ( + <> +

hello from same-layout/first

+ + To Second + + + ) +} diff --git a/app/same-layout/layout.js b/app/same-layout/layout.js new file mode 100644 index 0000000..42734ad --- /dev/null +++ b/app/same-layout/layout.js @@ -0,0 +1,10 @@ +import { nanoid } from 'nanoid' + +export default function Layout({ children }) { + return ( + <> +

{nanoid()}

+
{children}
+ + ) +} diff --git a/app/same-layout/second/page.js b/app/same-layout/second/page.js new file mode 100644 index 0000000..9d981dc --- /dev/null +++ b/app/same-layout/second/page.js @@ -0,0 +1,12 @@ +import Link from 'next/link' + +export default function Page() { + return ( + <> +

hello from same-layout/second

+ + To First + + + ) +} diff --git a/app/shared-component-route/page.js b/app/shared-component-route/page.js new file mode 100644 index 0000000..c90a622 --- /dev/null +++ b/app/shared-component-route/page.js @@ -0,0 +1,7 @@ +export default function SharedComponentRoute() { + return ( + <> +

hello from app/shared-component-route

+ + ) +} diff --git a/app/should-not-serve-client/page.js b/app/should-not-serve-client/page.js new file mode 100644 index 0000000..8ff1c25 --- /dev/null +++ b/app/should-not-serve-client/page.js @@ -0,0 +1,9 @@ +'client' + +export default function ShouldNotServeClientDotJs(props) { + return ( + <> +

hello from app/should-not-serve-client

+ + ) +} diff --git a/app/should-not-serve-server/page.js b/app/should-not-serve-server/page.js new file mode 100644 index 0000000..afcff2e --- /dev/null +++ b/app/should-not-serve-server/page.js @@ -0,0 +1,7 @@ +export default function ShouldNotServeServerDotJs(props) { + return ( + <> +

hello from app/should-not-serve-server

+ + ) +} diff --git a/app/slow-layout-and-page-with-loading/loading.js b/app/slow-layout-and-page-with-loading/loading.js new file mode 100644 index 0000000..761425a --- /dev/null +++ b/app/slow-layout-and-page-with-loading/loading.js @@ -0,0 +1,3 @@ +export default function Loading() { + return

Loading layout...

+} diff --git a/app/slow-layout-and-page-with-loading/slow/layout.js b/app/slow-layout-and-page-with-loading/slow/layout.js new file mode 100644 index 0000000..afcb0e2 --- /dev/null +++ b/app/slow-layout-and-page-with-loading/slow/layout.js @@ -0,0 +1,19 @@ +import { experimental_use as use } from 'react' + +async function getData() { + await new Promise((resolve) => setTimeout(resolve, 1000)) + return { + message: 'hello from slow layout', + } +} + +export default function SlowLayout(props) { + const data = use(getData()) + + return ( + <> +

{data.message}

+ {props.children} + + ) +} diff --git a/app/slow-layout-and-page-with-loading/slow/loading.js b/app/slow-layout-and-page-with-loading/slow/loading.js new file mode 100644 index 0000000..5aff44c --- /dev/null +++ b/app/slow-layout-and-page-with-loading/slow/loading.js @@ -0,0 +1,3 @@ +export default function Loading() { + return

Loading page...

+} diff --git a/app/slow-layout-and-page-with-loading/slow/page.js b/app/slow-layout-and-page-with-loading/slow/page.js new file mode 100644 index 0000000..2e9d97f --- /dev/null +++ b/app/slow-layout-and-page-with-loading/slow/page.js @@ -0,0 +1,14 @@ +import { experimental_use as use } from 'react' + +async function getData() { + await new Promise((resolve) => setTimeout(resolve, 5000)) + return { + message: 'hello from slow page', + } +} + +export default function SlowPage(props) { + const data = use(getData()) + + return

{data.message}

+} diff --git a/app/slow-layout-with-loading/loading.js b/app/slow-layout-with-loading/loading.js new file mode 100644 index 0000000..c39332b --- /dev/null +++ b/app/slow-layout-with-loading/loading.js @@ -0,0 +1,3 @@ +export default function Loading() { + return

Loading...

+} diff --git a/app/slow-layout-with-loading/slow/layout.js b/app/slow-layout-with-loading/slow/layout.js new file mode 100644 index 0000000..7332df1 --- /dev/null +++ b/app/slow-layout-with-loading/slow/layout.js @@ -0,0 +1,19 @@ +import { experimental_use as use } from 'react' + +async function getData() { + await new Promise((resolve) => setTimeout(resolve, 5000)) + return { + message: 'hello from slow layout', + } +} + +export default function SlowLayout(props) { + const data = use(getData()) + + return ( + <> +

{data.message}

+ {props.children} + + ) +} diff --git a/app/slow-layout-with-loading/slow/page.js b/app/slow-layout-with-loading/slow/page.js new file mode 100644 index 0000000..666f8f3 --- /dev/null +++ b/app/slow-layout-with-loading/slow/page.js @@ -0,0 +1,3 @@ +export default function Page() { + return

Hello World

+} diff --git a/app/slow-page-with-loading/loading.js b/app/slow-page-with-loading/loading.js new file mode 100644 index 0000000..c39332b --- /dev/null +++ b/app/slow-page-with-loading/loading.js @@ -0,0 +1,3 @@ +export default function Loading() { + return

Loading...

+} diff --git a/app/slow-page-with-loading/page.js b/app/slow-page-with-loading/page.js new file mode 100644 index 0000000..c92356c --- /dev/null +++ b/app/slow-page-with-loading/page.js @@ -0,0 +1,18 @@ +import { experimental_use as use } from 'react' + +async function getData() { + await new Promise((resolve) => setTimeout(resolve, 5000)) + return { + message: 'hello from slow page', + } +} + +export default function SlowPage(props) { + const data = use(getData()) + + return

{data.message}

+} + +export const config = { + runtime: 'experimental-edge', +} diff --git a/app/style.css b/app/style.css new file mode 100644 index 0000000..3a94c07 --- /dev/null +++ b/app/style.css @@ -0,0 +1,3 @@ +body { + font-size: large; +} diff --git a/app/template/clientcomponent/other/page.js b/app/template/clientcomponent/other/page.js new file mode 100644 index 0000000..24c81bb --- /dev/null +++ b/app/template/clientcomponent/other/page.js @@ -0,0 +1,11 @@ +import Link from 'next/link' +export default function Page() { + return ( + <> +

Other Page

+ + To Page + + + ) +} diff --git a/app/template/clientcomponent/page.js b/app/template/clientcomponent/page.js new file mode 100644 index 0000000..89378c7 --- /dev/null +++ b/app/template/clientcomponent/page.js @@ -0,0 +1,12 @@ +import Link from 'next/link' + +export default function Page() { + return ( + <> +

Page

+ + To Other + + + ) +} diff --git a/app/template/clientcomponent/template.js b/app/template/clientcomponent/template.js new file mode 100644 index 0000000..1af2915 --- /dev/null +++ b/app/template/clientcomponent/template.js @@ -0,0 +1,14 @@ +'client' + +import { useState } from 'react' + +export default function Template({ children }) { + const [count, setCount] = useState(0) + return ( + <> +

Template {count}

+ + {children} + + ) +} diff --git a/app/template/servercomponent/other/page.js b/app/template/servercomponent/other/page.js new file mode 100644 index 0000000..2ed3a0f --- /dev/null +++ b/app/template/servercomponent/other/page.js @@ -0,0 +1,11 @@ +import Link from 'next/link' +export default function Page() { + return ( + <> +

Other Page

+ + To Page + + + ) +} diff --git a/app/template/servercomponent/page.js b/app/template/servercomponent/page.js new file mode 100644 index 0000000..27a7097 --- /dev/null +++ b/app/template/servercomponent/page.js @@ -0,0 +1,12 @@ +import Link from 'next/link' + +export default function Page() { + return ( + <> +

Page

+ + To Other + + + ) +} diff --git a/app/template/servercomponent/template.js b/app/template/servercomponent/template.js new file mode 100644 index 0000000..c3dc5da --- /dev/null +++ b/app/template/servercomponent/template.js @@ -0,0 +1,10 @@ +export default function Template({ children }) { + return ( + <> +

+ Template {performance.now()} +

+ {children} + + ) +} diff --git a/app/test-page/page.js b/app/test-page/page.js new file mode 100644 index 0000000..c1a3443 --- /dev/null +++ b/app/test-page/page.js @@ -0,0 +1,3 @@ +export default function Page() { + return

Page

+} diff --git a/app/with-id/page.js b/app/with-id/page.js new file mode 100644 index 0000000..07beecc --- /dev/null +++ b/app/with-id/page.js @@ -0,0 +1,13 @@ +import Link from 'next/link' +import { nanoid } from 'nanoid' + +export default function Page() { + return ( + <> +

{nanoid()}

+ + To Navigation + + + ) +} diff --git a/components/comment-form.js b/components/comment-form.js deleted file mode 100644 index 6c1b33b..0000000 --- a/components/comment-form.js +++ /dev/null @@ -1,22 +0,0 @@ -export default () => ( -
- -