What is the full API for the object argument of Router.push (and does it support "as")?

[gabrielliwerant-authentise]

I'm looking to use Router.push's object argument to send pathname, as, and query, like so:

Router.push({
  pathname: '/foo/[dynamic]/bar',
  as: `/foo/${dynamic}/bar`,
  query: {
    baz: 'qux'
  },
}

However, the above code does not properly apply the as argument and I can't tell if it is supported because there is no documentation that seems to tell me what options the push object supports or the structure it requires (nor is there an example that seems to do this that I can learn from).

Would appreciate being pointed in the right direction or the docs being updated to include this information.

Thank you for your time.

[jamesmosier]

The URL object is the same as next/link as mentioned in the With URL object section of next/router docs.

You can use every property as defined in the Node.js URL module documentation.

Therefore, as is not supported with the URL object.

[gabrielliwerant-authentise]

Ok, thank you. I noticed a couple of quirks in the documentation around this that might be improved.

In the section for the url object https://nextjs.org/docs/api-reference/next/router#with-url-object, it states: "You can use an URL object in the same way you can use it for next/link. Works for both the url and as parameters:" This makes it sound as though it will work with "as." So not quite sure what was meant there. If it is possible, what is the argument structure that supports this behavior?

Regarding https://nextjs.org/docs/api-reference/next/link#with-url-object, the docs state "You can use every property as defined in the Node.js URL module documentation." This does not confirm that these are the only properties that can be used (my confusion around this was bolstered by the section pointed out above).

My main issue now is that I can't seem to find a way to use "as" notation at the same time I wish to use a "query." Can you confirm if such a thing is possible? If you'd like, I can open this in a new question and close this one. I wasn't sure what the best etiquette would be.

Thanks again for your help.

[jamesmosier]

From what I have found, you cannot include as in the object itself. Instead you can include it as a second param. I found this here

next.js/packages/next/next-server/lib/router/router.ts

Line 392 in 3623d44

;({ url, as } = prepareUrlAs(url, as))

prepareUrlAs takes your URL object and as and combines them

next.js/packages/next/next-server/lib/router/router.ts

Lines 47 to 54 in 3623d44

	function prepareUrlAs(url: Url, as: Url) {
	// If url and as provided as an object representation,
	// we'll format them into the string version here.
	return {
	url: addBasePath(formatUrl(url)),
	as: as ? addBasePath(formatUrl(as)) : as,
	}
	}

So you could write it like:

Router.push({
  pathname: '/foo/[dynamic]/bar',
  query: {
    baz: 'qux'
  },
}, `/foo/${dynamic}/bar`)

[gabrielliwerant-authentise]

This is exactly what I was hoping to find:

Router.push({
  pathname: '/foo/[dynamic]/bar',
  query: {
    baz: 'qux'
  },
}, `/foo/${dynamic}/bar`)

I had attempted this with the "as" argument in object form ,which obviously did not work.

If you like, I would be happy to open a PR which might update the docs to make this functionality a little easier to discover.

[jamesmosier]

@lfades any issue with @gabrielliwerant-authentise adding the as parameter to the docs to clarify it can be used in conjunction with the URL object?

[lfades]

@gabrielliwerant-authentise @jamesmosier The object that it accepts is the URL object, it doesn't define as so there's no to mention that as can't be used there. But the section that talks about it (https://nextjs.org/docs/api-reference/next/router#with-url-object) is welcome for improvements, I would to avoid confusions like this one, like make it more clear what the URL object is.