Counter example ( NextJs + Javascript not TSX)

[ralphievolt]

I've been trying out NextJs as I tried to go back into programming.

I wanted to have two pages

Counter Page > will show the three counter
Trigger Page > has button to trigger either of the three counter in the other page

I am using the Jotai based on the example here about the clock https://codesandbox.io/s/nextjs-with-jotai-5ylrj?file=/components/Clock.js

however can't figure why the counter is not updating.. Appreciate if someone can help me on this.

Thank you.

[dai-shi]

Is it a nextjs specific issue? Do you have no problems with CRA? In such a case, how about starting with a single page in nexjs?

[dai-shi]

🙌

On a single page I can increment and decrement my counter using Jotai

Cool. You might want to create a minimal example to explain your problem for getting help from me or someone.

[ralphievolt]

This code has the minimal example https://github.com/ralphievolt/nextjs-queuing-system for this specific problem

Main Page http://localhost:3000/ which shows the counter

Queue Caller http://localhost:3000/queue-caller is the page where button should be click to increment the counter on the main page

[dai-shi]

I added a navigation. Does this look good?

Screen.Recording.2022-01-04.at.20.54.27.mov

Diff

diff --git a/components/nav.js b/components/nav.js
new file mode 100644
index 0000000..4f7b644
--- /dev/null
+++ b/components/nav.js
@@ -0,0 +1,10 @@
+import Link from "next/link";
+
+export default function Nav() {
+  return (
+    <ul>
+      <li><Link href="/">To Index</Link></li>
+      <li><Link href="/queue-caller">To Caller</Link></li>
+    </ul>
+  );
+}
diff --git a/pages/index.js b/pages/index.js
index eb156d7..0fc82e6 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,7 +1,11 @@
-import Queue from "../components/queue"
+import Nav from "../components/nav";
+import Queue from "../components/queue";
 
 export default function QueuePage() {
-    return (
-        <Queue />
-    )
+  return (
+    <>
+      <Nav />
+      <Queue />
+    </>
+  );
 }
diff --git a/pages/queue-caller.js b/pages/queue-caller.js
index 524bd82..438f227 100644
--- a/pages/queue-caller.js
+++ b/pages/queue-caller.js
@@ -1,7 +1,12 @@
-import Caller from "../components/caller"
+import Nav from "../components/nav";
+import Caller from "../components/caller";
 
 export default function CallerPage() {
-    return (
-        <Caller />
-    )
-}
\ No newline at end of file
+  return (
+    <>
+      <Nav />
+      <Caller />
+    </>
+  );
+}
+

[ralphievolt]

You're the man!!!!

Can you tell me the rationale on why its' working when I have the navigation versus non-navigation?

Super duper Thank you @dai-shi

[dai-shi]

If you don't use the navigation, it will be like refreshing the page, so all states in the memory are gone.