I am trying to display film details from this API ‘swapi.dev/api/films’ in NextJS but I keep getting an error. It has something to do with the getStaticPath function. I am using this code: any help welcome.
This is the ‘films’ code that displays details of all the episodes, and this is working ok.
I have also tried taking ‘results’ out of ‘data.results.map’, so ‘data.map’ but just results in a error says data.map is not a function…I guess because data is an object not an array. But results is an array so I am still lost. I do think the issue lies here somewhere though…
@stefandim91 thanks for your reply. I notice my previous post has been removed for it was deemed to be a duplicate… so I am not sure if you will see this…I hope so. Here is a link to a github repo. If you could have a look and see what the issue may be that would be great. Thanks GitHub - paulgreenwood67/NextJS---Star-Wars: Next JS app displaying SWAPI data. As a reminder the issue in this post was resolved and data is being displayed. Now I have a different issue. When I select a film in films.js the wrong data is displayed in details.js
After a little digging, I found what is causing this. A bit tricky, but actually the whole thing is with the API. If you take closer look at the response object you have one prop called episode_id and other prop called url. The first one shows which episode is the movie and the second is the actual url to make the request for the movie.
IMO, because the movies parts didn’t came out chronologically it’s causing the confusion. E.g. A New Hope (Episode 4) came first and the detailed info can be found on https://swapi.dev/api/films/1/ (which is the url prop of the movie).
Hope that clears things enough.
Also I had a look at the code in the repo. I recommend you to check the console, because there are some errors and solving them would be great. Also I suggest, to install some linter and formatter in your IDE.
Well, the url prop is the actual url to make the request. const res = await fetch(url);
However you can’t pass the whole url in the path, so you should think of another way to achieve this.