menu
up-caret
down-caret

Next.js

A place to chat about Next.js and answer questions. For all other ZEIT products, check this out.

# General

General Chatter

Trending conversations
Workaround to get from local storage during getInitialProps?
@stupid-sexy-jake · 14h
withRouter not updating props
@eugenem · 7h
pages, best practices and anti-patterns
@markymark · 12h
Rich text editor to use with next.js
@andrewcodes404 · 10h
Hi everyone
@yhm1187756835 · 13h

Passing objects in Link tag?

November 3, 2018 at 4:02pm

I want to pass an object to my new pages getInitialProps as query, but it seems to turn my object into an empty string. I've checked it several times and I think that is happening. Since this is all client side, I thought there would be no problem. Mis-understanding how Link works? Here is my example Link tag. https://gist.github.com/pkellner/086246d44b82052c20f1c0ec63a0b734


November 3, 2018 at 7:28pm

Link's href must be a string url not an object. If you want to pass some info to the page, consider passing querystrings in the url: look at this part of the nextjs tutorial: https://nextjs.org/learn/basics/create-dynamic-pages

  • reply
  • like

November 4, 2018 at 2:21am

You can do <Link href={{pathname: '/about', query: {something: 'else'}}} as="/about/something>

pathname => path to page inside pages

query => available in getInitialProps

as => what's rendered to the browser url bar / history

  • reply
  • like

November 4, 2018 at 3:21pm

@timneutkens, I'm not seeing how your example is not the same as the gist I pasted above (and here). https://gist.github.com/pkellner/086246d44b82052c20f1c0ec63a0b734 Maybe I'm missing something subtle. In getInitialProps, I see sessionSlug and sessionId but sessionData is an empty string. Are their any limits on size of the object or requiring it to be serialized? I was assuming when running on the client those limitations would not exist.

  • reply
  • like

Are you using a custom server and route for this? My LInk query and route were slightly mismatched and caused me problems. Also, do you need to getInitialProps? You can access that query in the router object withRouter. Hope it helps I don't fully understand the entire flow you're going for.

  • reply
  • like

February 19, 2019 at 6:36pm

I'm seeing a very similar thing here, I'm passing in an object that contains arrays in server.js in app.render. It looks something like this.

router.query

facetGroups: ["gender"]
facets: ["Men's"]
fq: []
isNewGallery: true
name: "Men's Watches"
newGalleryParams: ""
page: "/gallery"
url: "/mens-watches"
urlFilters: {brand: Array(2)}

However, when I go back in history (press back button) that data is still sitting in router.query, but the arrays are flattened and objects are missing. Like this...

router.query

"": ""
facetGroups: "gender"
facets: "Men's"
isNewGallery: "true"
name: "Men's Watches"
newGalleryParams: ""
page: "/gallery"
url: "/mens-watches"
urlFilters: ""
Edited
  • reply
  • like

Yes. Between my ears. I momentarily forgot how next works.

  • reply
  • like