Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Dynamic segments & multitenancy for Next.js pages router #917

Merged
merged 10 commits into from
Feb 17, 2025
Prev Previous commit
Next Next commit
fix: Found the secret sauce!
  • Loading branch information
franky47 committed Feb 17, 2025
commit 18d8ab472d107120be3109a8f358ee15f6dbcf4c
93 changes: 83 additions & 10 deletions packages/nuqs/src/adapters/next/impl.pages.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useSearchParams } from 'next/navigation.js'
import { useRouter } from 'next/compat/router'
import type { NextRouter } from 'next/router'
import { useCallback } from 'react'
import { useCallback, useMemo } from 'react'
import { debug } from '../../debug'
import { createAdapterProvider } from '../lib/context'
import type { AdapterInterface, UpdateUrlFunction } from '../lib/defs'
@@ -23,7 +23,24 @@ export function isPagesRouter(): boolean {
}

export function useNuqsNextPagesRouterAdapter(): AdapterInterface {
const searchParams = useSearchParams()
const router = useRouter()
const searchParams = useMemo(() => {
const searchParams = new URLSearchParams()
if (router === null) {
return searchParams
}
for (const [key, value] of Object.entries(router.query)) {
if (typeof value === 'string') {
searchParams.set(key, value)
} else if (Array.isArray(value)) {
for (const v of value) {
searchParams.append(key, v)
}
}
}
return searchParams
}, [JSON.stringify(router?.query)])

const updateUrl: UpdateUrlFunction = useCallback((search, options) => {
// While the Next.js team doesn't recommend using internals like this,
// we need access to the pages router here to let it know about non-shallow
@@ -32,21 +49,77 @@ export function useNuqsNextPagesRouterAdapter(): AdapterInterface {
// The router adapter imported from next/navigation also doesn't support
// passing an asPath, causing issues in dynamic routes in the pages router.
const nextRouter = window.next?.router!
const url = renderURL(nextRouter.state.asPath.split('?')[0] ?? '', search)
debug('[nuqs queue (pages)] Updating url: %s', url)
const urlParams = extractDynamicUrlParams(
nextRouter.pathname,
nextRouter.query
)
const query = Object.fromEntries(search.entries())
const asPath = renderURL(
nextRouter.state.asPath.split('?')[0] ?? '',
search
)
debug('[nuqs queue (pages)] Updating url: %s', asPath)
const method =
options.history === 'push' ? nextRouter.push : nextRouter.replace
method.call(nextRouter, url, url, {
scroll: options.scroll,
shallow: options.shallow
})

method.call(
nextRouter,
{
pathname: nextRouter.pathname,
query: {
...urlParams,
...query
},
hash: location.hash
},
{
pathname: nextRouter.state.asPath.split('?')[0] ?? '',
query,
hash: location.hash
},
{
scroll: options.scroll,
shallow: options.shallow
}
)
}, [])
return {
searchParams,
updateUrl,
// See: https://github.com/47ng/nuqs/issues/603#issuecomment-2317057128
rateLimitFactor: 2
rateLimitFactor: 1
}
}

export const NuqsAdapter = createAdapterProvider(useNuqsNextPagesRouterAdapter)

function extractDynamicUrlParams(
pathname: string,
values: Record<string, string | string[] | undefined>
): Record<string, string | string[] | undefined> {
const paramNames = new Set<string>()
const dynamicRegex = /\[([^\]]+)\]/g
const catchAllRegex = /\[\.{3}([^\]]+)\]$/
const optionalCatchAllRegex = /\[\[\.{3}([^\]]+)\]\]$/

let match
while ((match = dynamicRegex.exec(pathname)) !== null) {
const paramName = match[1]
if (paramName) {
paramNames.add(paramName)
}
}
const dynamicValues = Object.fromEntries(
Object.entries(values).filter(([key]) => paramNames.has(key))
)
const matchCatchAll = catchAllRegex.exec(pathname)
const matchOptionalCatchAll = optionalCatchAllRegex.exec(pathname)
if (matchCatchAll) {
dynamicValues[matchCatchAll[1]!] = values[matchCatchAll[1]!] ?? []
}
if (matchOptionalCatchAll) {
dynamicValues[matchOptionalCatchAll[1]!] =
values[matchOptionalCatchAll[1]!] ?? []
}
return dynamicValues
}