How can I route with array of objects in Next JS?

Question

I've been struggling to route through pages using next js route query method. I was passing raw array of objects but it became empty in the page. I've been researching and I found a solution to use JSON.stringify(result) and parsing it in the other page with JSON.parse(query.result) and this worked. but when I use this approach on page reload the page crashes and the browser displays the following error.

This page isn’t workingIf the problem continues, contact the site owner.
HTTP ERROR 431

my code in the index.js is

<Link href={{
  pathname: "/TvShows",
  query: {
    result: JSON.stringify(result),
    //result: [result],
    img: img,
    index: index,
  }}}
  //as={"/TvShows"}
>

and the target page is Tvshows.js

first I defined a constants

const [result, setResult] = useState([]);
const [index, setIndex] = useState("");
const [img, setImg] = useState("");
const router = useRouter();
const query = router.query;

then

useEffect (()=>{
  if(router.isReady){
    //console.log(result);
    const res = JSON.parse(query.result);
    setResult(res);
    setIndex(query.index);
    setImg(query.img);
    //console.log(res);
    //router.isReady= false;
  }
},[router.isReady])

the problem is when I stringily and parse these JSON. why is this happening?

and NOTE: in the url section of the page it uses the datas and it is super long.(maybe if that has an effect on it somehow). what is the best way to pass an array to a page?

the local data being passed in JSON.strimgify(result)

const Shows = [
   {
     id: 1,
     title: "title1",
     img: "imgURL",
     desc: "ddescription1"
   },
   {
     id: 2,
     title: "title1",
     img: "imgURL",
     desc: "ddescription1"
   },
   {
     id: 3,
     title: "title1",
     img: "imgURL",
     desc: "ddescription1"
   },
   {
     id: 4,
     title: "title1",
     img: "imgURL",
     desc: "ddescription1"
   },
] export default Shows;

I don't really understand why are you passing data this way? why not have a dynamic route like `/tvshow/[id]` and use `getStaticProps` with `getStaticPaths` ? — mocherfaoui, Aug 11 '22 at 21:38
@mocherfaoui I want to pass data into it. specifically objects — mobix, Aug 11 '22 at 22:07
why not go with a dynamic route? there you can get the data of each tvshow and it would be better that passing the data in the URL — mocherfaoui, Aug 11 '22 at 22:19
when you use a dynamic route you can get the data of that specefic page using different ways, including `getStaticProps`. this is covered in the documentation, if you can spin up a codesandbox I can help you — mocherfaoui, Aug 11 '22 at 22:40
could be the url has some illegal characters, did you try using encodeURIComponent? or the url is too long. personally i would request the data again on the new page instead of passing it with router like this — Chris Li, Aug 11 '22 at 23:03
@ChrisLi the url is passed from an object for a YouTube playlist. I'm fetching YouTube playlist and when selected a playlist card it routes with all playlist data comprised into JSON object — mobix, Aug 11 '22 at 23:06
is there any reason you cant fetch the same playlist on the new page? — Chris Li, Aug 12 '22 at 01:02
@ChrisLi b/c I couldn't find a way to pass in the selected playlist id props to `getStaticProps`. — mobix, Aug 12 '22 at 07:21
@mocherfaoui but in my `index.js` I did it with `getStaticProps`, that's how I get the playlist detail. but how can I pass in props to `getStaticProps` so that I can create it in my `TvShows.js`? — mobix, Aug 12 '22 at 08:06
@mocherfaoui https://codesandbox.io/s/competent-hoover-wizxms — mobix, Aug 12 '22 at 09:08
but this is an empty codesandbox? you should add the pages and the logic you were trying to implement and I'll go from there — mocherfaoui, Aug 12 '22 at 09:18
@mocherfaoui that link expired so https://codesandbox.io/live/6c2247c273f — mobix, Aug 12 '22 at 09:53
here https://codesandbox.io/s/condescending-matsumoto-qx2ot3 hopefully this solves your issue — mocherfaoui, Aug 12 '22 at 10:50
@mocherfaoui how about the playlist object. that's the issue I had — mobix, Aug 12 '22 at 10:56
what playlist object? I didn't see any in your post or the codesandbox? — mocherfaoui, Aug 12 '22 at 11:28
@mocherfaoui if there is a way for me to pass playlistId to `getStaticProps` or pass an array in `staticPaths` that would solve everything. — mobix, Aug 12 '22 at 11:53

Ahmet Firat Keler · Answer 1 · 2022-08-11T19:14:52.990

-1

Interestingly, I couldn't use the word 'code' as a query parameter in my project, so I renamed it to codeTerm. First, I suggest you to stay away some keywords like 'index' or 'code' etc.

In your TvShows component, try to console query object like below

import { withRouter } from 'next/router';

const TvShows = (props) => {
  // the rest of your code
  useEffect(() => {
    console.log(props.router.query);
    if (props.router.query.result)
      console.log(JSON.parse(props.router.query.result));
  }, [props.router]);
  // the rest of your code
}

export default withRouter(TvShows);

You do not need that

const router = useRouter();
const query = router.query;

UPDATE

Can you try to route user using next/router instead of next/link?

import Router from 'next/router';

Router.push(
  {
    pathname: '/TvShows',
    query: {
      result: JSON.stringify(result),
      img: img,
      index: index,
    },
  }
);

This should give you what you want, here's the result

edited Aug 11 '22 at 19:14

answered Aug 11 '22 at 17:00

Ahmet Firat Keler

2,603
2
11
22

I tried out your suggestion and same thing happened the problem I'm facing is that when getting passed in the url is set with the params data. (i.e) the whole stringily JSON object. so it throws HTTP error of 431. meaning the url in head is too long. – mobix Aug 11 '22 at 17:35
"The HTTP 431 Request Header Fields Too Large response status code indicates that the server refuses to process the request because the request's HTTP headers are too long." What do you send over? – Ahmet Firat Keler Aug 11 '22 at 17:43
array of objects. I will edit and repost above. – mobix Aug 11 '22 at 17:47
it changes to a `404` page. when I use `as` the passed data will be lost. I don't know why that is. – mobix Aug 11 '22 at 18:00
it loads initially but at reload time the `404` page pops. – mobix Aug 11 '22 at 18:01
What is your page name? TvShows or tv-shows ? – Ahmet Firat Keler Aug 11 '22 at 18:05
I edited it to tvshows – mobix Aug 11 '22 at 18:06
Can you change it to tv-shows and change TvShows to tv-shows inside the code (Router.push)? – Ahmet Firat Keler Aug 11 '22 at 18:08
Page Name tv-shows / Component Name TvShows / 2 Urls in Router.push '/tv-shows' – Ahmet Firat Keler Aug 11 '22 at 18:16
In my Page directory I renamed it as tv-shows that's the page I have. and I used two components in that page. – mobix Aug 11 '22 at 18:34
Main page component name is TvShows, the other components is up to you – Ahmet Firat Keler Aug 11 '22 at 18:49
I did those and in refresh it relodes and the item is at index [0]. (revision) array is empty – mobix Aug 11 '22 at 18:53
What does that return? console.log(props.router.query); – Ahmet Firat Keler Aug 11 '22 at 18:57
returns an object – mobix Aug 11 '22 at 19:02
console.log(JSON.parse(props.router.query.result)) -> That should give you what you need. I have tested it, it works. You should see a javascript array – Ahmet Firat Keler Aug 11 '22 at 19:04
it does but when I reload the page the object clears and empty out – mobix Aug 11 '22 at 19:06
It also works with query params, I have updated my answer again removing last parameter from Router.push – Ahmet Firat Keler Aug 11 '22 at 19:15
it return to the first problem. the HTTP ERROR 431. in console it throws `crbug/117375, non-JS module files deprecated.` – mobix Aug 11 '22 at 19:18
Please take a look at https://stackoverflow.com/questions/67191286/crbug-1173575-non-js-module-files-deprecated-chromewebdata-index%EA%9E%89530595551 – Ahmet Firat Keler Aug 11 '22 at 20:41
but when I pass in other data it works fine. only with objects – mobix Aug 11 '22 at 21:02
maybe is there a way to reduce the url? I've checked the url being passed and it is way too large – mobix Aug 11 '22 at 21:29
Yes, that's why you get an error like that. – Ahmet Firat Keler Aug 12 '22 at 07:51
is there a way to pass props to `getStaticProps`? – mobix Aug 12 '22 at 07:57
Yes, but do not use any sensitive data in getStaticProps. But if you need to support your page's SEO, you have to find a way to shorten that url. – Ahmet Firat Keler Aug 12 '22 at 07:59
I have found none. how am I gonna shorten those url – mobix Aug 12 '22 at 08:03
https://github.com/onderonur/onurl – Ahmet Firat Keler Aug 12 '22 at 08:05
how can I implement this in my project? specifically the url shortening one – mobix Aug 12 '22 at 08:09

How can I route with array of objects in Next JS?

1 Answers1