fix: Non-shallow dynamic pages (#391)

* fix: Non-shallow updates on dynamic pages

Closes #282.

* chore: Fix undefined when running test locally

* chore: Fix Turbo dependency on basePath

* fix: Handle base path

packages/e2e/cypress.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from 'cypress'
 
-const basePath = process.env.BASE_PATH === '/' ? '' : process.env.BASE_PATH
+const basePath =
+  process.env.BASE_PATH === '/' ? '' : process.env.BASE_PATH ?? ''
 
 export default defineConfig({
   e2e: {

packages/e2e/src/pages/pages/useQueryState/dynamic/[route]/index.tsx

@@ -1,2 +1,16 @@
+import { GetServerSideProps } from 'next'
+import { parseAsString } from 'next-usequerystate'
 import IntegrationPage from '../../index'
 export default IntegrationPage
+
+export const getServerSideProps = (async ctx => {
+  const string = parseAsString.parseServerSide(ctx.query.string)
+  console.dir({ string })
+  return {
+    props: {
+      string
+    }
+  }
+}) satisfies GetServerSideProps<{
+  string: string | null
+}>

packages/e2e/src/pages/pages/useQueryState/index.tsx

@@ -35,7 +35,10 @@ const IntegrationPage = () => {
       </nav>
       <section>
         <h2>String</h2>
-        <button id="string_set_a" onClick={() => setString('a')}>
+        <button
+          id="string_set_a"
+          onClick={() => setString('a', { shallow: false })}
+        >
           Set A
         </button>
         <button id="string_set_b" onClick={() => setString('b')}>

packages/next-usequerystate/src/update-queue.ts

@@ -131,14 +131,9 @@ function flushUpdateQueue(router: Router) {
       search.set(key, value)
     }
   }
-  const query = renderQueryString(search)
-  const path = location.pathname
-  const hash = location.hash
-  // If the querystring is empty, add the pathname to clear it out,
-  // otherwise using a relative URL works just fine.
-  // todo: Does it when using the router with `shallow: false` on dynamic paths?
-  const url = query ? `?${query}${hash}` : `${path}${hash}`
+  const url = renderURL(search)
   debug('[nuqs queue] Updating url: %s', url)
+
   try {
     // First, update the URL locally without triggering a network request,
     // this allows keeping a reactive URL if the network is slow.
@@ -160,7 +155,11 @@ function flushUpdateQueue(router: Router) {
     if (!options.shallow) {
       // Call the Next.js router to perform a network request
       // and re-render server components.
-      router.replace(url, { scroll: false })
+      router.replace(url, {
+        scroll: false,
+        // @ts-expect-error - pages router fix, but not exposed in navigation types
+        shallow: false
+      })
     }
     return search
   } catch (error) {
@@ -172,3 +171,20 @@ function flushUpdateQueue(router: Router) {
     return null
   }
 }
+
+function renderURL(search: URLSearchParams) {
+  const query = renderQueryString(search)
+  // @ts-expect-error - Not exposed in types
+  const basePath = window?.next?.router?.basePath ?? ''
+  const path = location.pathname.slice(basePath.length)
+  const hash = location.hash
+  if (history.state.__N === true) {
+    // Pages router: always use a full path to handle dynamic routes
+    return query ? `${path}?${query}${hash}` : `${path}${hash}`
+  } else {
+    // App router
+    // If the querystring is empty, add the pathname to clear it out,
+    // otherwise using a relative URL works just fine.
+    return query ? `?${query}${hash}` : `${path}${hash}`
+  }
+}

turbo.json

@@ -13,7 +13,8 @@
     },
     "e2e#build": {
       "outputs": [".next/**", "!.next/cache/**"],
-      "dependsOn": ["^build"]
+      "dependsOn": ["^build"],
+      "env": ["BASE_PATH"]
     },
     "playground#build": {
       "outputs": [".next/**", "!.next/cache/**"],