diff --git a/src/app/@dialog/is-open/page.tsx b/src/app/@dialog/is-open/page.tsx new file mode 100644 index 0000000..d767623 --- /dev/null +++ b/src/app/@dialog/is-open/page.tsx @@ -0,0 +1,38 @@ +import Link from "next/link"; + +import prisma from '@/db'; +import { revalidatePath } from "next/cache"; + +export default function Page() { + async function createItem() { + "use server"; + + // create a new blog post + await prisma.blogPost.create({ + data: { + content: "item created at " + new Date().toISOString(), + }, + }); + + // make sure all the data on the page reloads + revalidatePath('/', 'layout'); + } + + return ( + +

{`i'm a modal`}

+ +
+ +
+ +
+ +
+ + + LINK BACK TO HOME PAGE + + + ); +} diff --git a/src/app/@dialog/page.tsx b/src/app/@dialog/page.tsx new file mode 100644 index 0000000..bdbbeff --- /dev/null +++ b/src/app/@dialog/page.tsx @@ -0,0 +1,3 @@ +export default function Page() { + return null; +} diff --git a/src/app/default.tsx b/src/app/default.tsx new file mode 100644 index 0000000..16bc4e3 --- /dev/null +++ b/src/app/default.tsx @@ -0,0 +1 @@ +export { default } from "./page"; diff --git a/src/app/globals.css b/src/app/globals.css index fd81e88..f3357b2 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -3,25 +3,22 @@ @tailwind utilities; :root { - --foreground-rgb: 0, 0, 0; - --background-start-rgb: 214, 219, 220; - --background-end-rgb: 255, 255, 255; + --foreground-rgb: 0, 0, 0; } @media (prefers-color-scheme: dark) { - :root { - --foreground-rgb: 255, 255, 255; - --background-start-rgb: 0, 0, 0; - --background-end-rgb: 0, 0, 0; - } + :root { + --foreground-rgb: 255, 255, 255; + } } body { - color: rgb(var(--foreground-rgb)); - background: linear-gradient( - to bottom, - transparent, - rgb(var(--background-end-rgb)) - ) - rgb(var(--background-start-rgb)); + color: rgb(var(--foreground-rgb)); +} + +.button { + background: theme('colors.blue.300'); + padding: theme('spacing.2'); + border-radius: theme('borderRadius.md'); + display: inline-block; } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 40e027f..fb01900 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,22 +1,28 @@ -import type { Metadata } from 'next' -import { Inter } from 'next/font/google' -import './globals.css' +import type { Metadata } from "next"; +import { Inter } from "next/font/google"; +import "./globals.css"; -const inter = Inter({ subsets: ['latin'] }) +const inter = Inter({ subsets: ["latin"] }); export const metadata: Metadata = { - title: 'Create Next App', - description: 'Generated by create next app', -} + title: "Create Next App", + description: "Generated by create next app", +}; export default function RootLayout({ - children, + children, + dialog, }: { - children: React.ReactNode -}) { - return ( - - {children} - - ) + children: React.ReactNode; + dialog: React.ReactNode; + }) { + return ( + + + {children} + + {dialog} + + + ); } diff --git a/src/app/page.tsx b/src/app/page.tsx index b973266..be67a57 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,113 +1,64 @@ -import Image from 'next/image' +import prisma from "@/db"; +import Link from "next/link"; -export default function Home() { - return ( -
-
-

- Get started by editing  - src/app/page.tsx -

-
- - By{' '} - Vercel Logo - -
-
+export default async function Home() { + const blogPosts = await prisma.blogPost.findMany(); -
- Next.js Logo -
+ return ( +
+

parallel route bug

-
- -

- Docs{' '} - - -> - -

-

- Find in-depth information about Next.js features and API. -

- +
+

description of bug

+

+ + the data in-browser and router navigation completely breaks + +

+

+ if you navigate to a parallel route and perform a server action that + does data revalidation. +

+
- -

- Learn{' '} - - -> - -

-

- Learn about Next.js in an interactive course with quizzes! -

- +
+

steps to reproduce

+
    +
  1. + {'click this button: '} + + click to open the modal + + {' β€”Β it will navigate to a parallel route path that renders a '} + <dialog> +
    2. - -

    - Templates{' '} - - -> - -

    -

    - Explore starter templates for Next.js. -

    -     +
  2. {'click the '}CREATE NEW BLOG POST{' button within the dialog'}
    3. - -

    - Deploy{' '} - - -> - -

    -

    - Instantly deploy your Next.js site to a shareable URL with Vercel. -

    -     -
-
- ) +
  • {'πŸ’© the router is now broken'}
    • +
  • {'πŸ’© go ahead, click the '}CLOSE DIALOG{' (it will not do anything in this state, but works fine if you land directly on the dialog and click the button)'}
    • +
  • {`πŸ’© the data on the page in the background should have updated as well β€” notice that it has not updated with the new post and will not update until you reload the page. (it works if you land on the parallel route directly and click the create button)`}
    • + + + +
    +

    other notes

    + +
    + +
    +

    current data

    + +
    +
    + ); }