Skip to content

Commit

Permalink
add example: parallel route + refresh = client router broken
Browse files Browse the repository at this point in the history 
related reading:
- vercel/next.js#54173
  • Loading branch information
@tsnieman
tsnieman committed Dec 8, 2023
1 parent 606cb35 commit f5d74ca
Show file tree
Hide file tree
Showing 6 changed files with 132 additions and 136 deletions.
38 changes: 38 additions & 0 deletions src/app/@dialog/is-open/page.tsx
View file
@@ -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 (
<dialog open className="border-solid border-2 border-indigo-600 shadow-xl min-w-[500px] min-h-[500px]">
<h1>{`i'm a modal`}</h1>

<br />

<form action={createItem}>
<button type="submit" className="button">CREATE NEW BLOG POST</button>
</form>

<br />

<Link href="/" className="text-blue-500 underline">
LINK BACK TO HOME PAGE
</Link>
</dialog>
);
}
3 changes: 3 additions & 0 deletions src/app/@dialog/page.tsx
View file
@@ -0,0 +1,3 @@
export default function Page() {
return null;
}
1 change: 1 addition & 0 deletions src/app/default.tsx
View file
@@ -0,0 +1 @@
export { default } from "./page";
27 changes: 12 additions & 15 deletions src/app/globals.css
View file
Expand Up @@ -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;
}
36 changes: 21 additions & 15 deletions src/app/layout.tsx
View file
@@ -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 (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
)
children: React.ReactNode;
dialog: React.ReactNode;
}) {
return (
<html lang="en">
<body className={inter.className}>
{children}

{dialog}
</body>
</html>
);
}
163 changes: 57 additions & 106 deletions src/app/page.tsx
View file
@@ -1,113 +1,64 @@
import Image from 'next/image'
import prisma from "@/db";
import Link from "next/link";

export default function Home() {
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
<div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
<p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
Get started by editing&nbsp;
<code className="font-mono font-bold">src/app/page.tsx</code>
</p>
<div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
<a
className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
By{' '}
<Image
src="/vercel.svg"
alt="Vercel Logo"
className="dark:invert"
width={100}
height={24}
priority
/>
</a>
</div>
</div>
export default async function Home() {
const blogPosts = await prisma.blogPost.findMany();

<div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
<Image
className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
src="/next.svg"
alt="Next.js Logo"
width={180}
height={37}
priority
/>
</div>
return (
<main className="p-4 flex flex-col gap-4 items-start">
<h1 className="text-2xl">parallel route bug</h1>

<div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
<a
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
<h2 className={`mb-3 text-2xl font-semibold`}>
Docs{' '}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
Find in-depth information about Next.js features and API.
</p>
</a>
<div>
<h2 className="text-xl">description of bug</h2>
<p>
<strong>
the data in-browser and router navigation completely breaks
</strong>
</p>
<p>
if you navigate to a parallel route and perform a server action that
does data revalidation.
</p>
</div>

<a
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
<h2 className={`mb-3 text-2xl font-semibold`}>
Learn{' '}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
Learn about Next.js in an interactive course with&nbsp;quizzes!
</p>
</a>
<div>
<h2 className="text-xl">steps to reproduce</h2>
<ol className="list-decimal list-inside">
<li>
{'click this button: '}
<Link href="/is-open" className="button">
click to open the modal
</Link>
{' — it will navigate to a parallel route path that renders a '}
<code>&lt;dialog&gt;</code>
</li>

<a
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
<h2 className={`mb-3 text-2xl font-semibold`}>
Templates{' '}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
Explore starter templates for Next.js.
</p>
</a>
<li>{'click the '}<code>CREATE NEW BLOG POST</code>{' button within the dialog'}</li>

<a
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
<h2 className={`mb-3 text-2xl font-semibold`}>
Deploy{' '}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
Instantly deploy your Next.js site to a shareable URL with Vercel.
</p>
</a>
</div>
</main>
)
<li>{'💩 the router is now broken'}</li>
<li>{'💩 go ahead, click the '}<code>CLOSE DIALOG</code>{' (it will not do anything in this state, but works fine if you land directly on the dialog and click the button)'}</li>
<li>{`💩 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)`}</li>
</ol>
</div>

<div>
<h2 className="text-xl">other notes</h2>
<ul className="list-disc list-inside">
<li>{'the bug is NOT present if you navigate directly to '}<code>/is-open</code>{' — you must navigate to the parallel route'}</li>
<li>{`the CREATE button and BACK TO HOME link both work fine when navigating directly to `}<code>/is-open</code></li>
</ul>
</div>

<div>
<h2 className="text-xl">current data</h2>
<ul className="list-disc list-inside">
{blogPosts.length === 0 && <li>no blog posts yet</li>}

{blogPosts.map((blogPost) => (
<li key={blogPost.id}>content: {blogPost.content}</li>
))}
</ul>
</div>
</main>
);
}

0 comments on commit f5d74ca

Please sign in to comment.