asd | Next.js | Page 1

somber barn Dec 15, 2021, 9:15 PM

#

can you show me how the data is being returned

#

?

#

like a screenshot

tender spruce Dec 15, 2021, 9:16 PM

#

useEffect is not the ideal hook to use here.

somber barn Dec 15, 2021, 9:16 PM

#

a lot of tutorials use useeffect

#

so i think thats where he got it from

#

what would you suggest then?

tender spruce Dec 15, 2021, 9:18 PM

#

get rid of the extra code and just do an early return null if the data isn't fetched yet.

#

Something like


export default function Home(initialData) {

if(!initialData?.trendingMovies?.results) return null;

const searchResults = initialData.trendingMovies.results;




 return (
    <div >
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
<div>
   {searchResults.map((each, index) => {
     return(
       <Movie
       index={each.id}
       title={each.title}
       poster_path={each.poster_path}
       overview={each.overview}
       />
     )

   })}

    </div>
    </div>
  )
}

#

ops fixed

glass turret Dec 15, 2021, 9:24 PM

#

somber barn like a screenshot

glass turret Dec 15, 2021, 9:29 PM

#

tender spruce Something like ``` export default function Home(initialData) { if(!initialDat...

The error is gone. it doesn't return anything.

tender spruce Dec 15, 2021, 9:30 PM

#

Okay, that's a start, lol.

#

now try console.log(initialData) above the return null and give us the results.

#

export default function Home(initialData) {

console.log(initialData)
if(!initialData?.trendingMovies?.results) return null;

glass turret Dec 15, 2021, 9:36 PM

#

tender spruce Okay, that's a start, lol.

tender spruce Dec 15, 2021, 9:39 PM

#

oh

#

export default function Home(initialData) {

return {
props: {trendingMovies: trendingMovies},
}

#

mmm, go to browser and open devtools

#

That's F12 on browser, and to console there, refresh and what does console log say there?

#

Looks to me like you're just calling the wrong object property somewhere, so it's mapping nothing.

#

screenshot would be better

#

It looks to me like the right call should be
either
initialData.trendingMovies
or
initialData.trendingMovies.trendingMovies

glass turret Dec 15, 2021, 9:46 PM

#

tender spruce Dec 15, 2021, 9:46 PM

#

and you won't need a map at all, because it's just a single outcome.

#

export default function Home(initialData) {

if(!initialData?.trendingMovies?) return null;

const searchResults = initialData.trendingMovies;

 return (
    <div >
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
       <Movie
       index={searchResults.id}
       title={searchResults.title}
       poster_path={each.poster_path}
       overview={searchResults.overview}
       />
     )

  </div>
  )
}

#

If that didn't work, try

export default function Home(initialData) {

if(!initialData?.trendingMovies?.trendingMovies) return null;

const searchResults = initialData.trendingMovies.trendingMovies;

 return (
    <div >
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
       <Movie
       index={searchResults.id}
       title={searchResults.title}
       poster_path={each.poster_path}
       overview={searchResults.overview}
       />
     )

  </div>
  )
}

#

What's going on here is that trendmingMovies is returned as an object. There's only one movie, so there's nothing to loop over by map.

glass turret Dec 15, 2021, 9:56 PM

#

There no error. Still renders nothing

tender spruce Dec 15, 2021, 10:00 PM

#

I have to step out of office now, but what does console say when you do this and refresh the page?

export default function Home(initialData) {

console.log({initialData});

if(!initialData?.trendingMovies) return null;

const searchResults = initialData.trendingMovies;

 return (
    <div >
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
       <Movie
       index={searchResults.id}
       title={searchResults.title}
       poster_path={each.poster_path}
       overview={searchResults.overview}
       />
     )

  </div>
  )
}

glass turret Dec 15, 2021, 10:04 PM

#

the same as before

tender spruce Dec 15, 2021, 10:06 PM

#

it really shouldn't, can you screenshot again?

glass turret Dec 15, 2021, 10:08 PM

#

tender spruce Dec 15, 2021, 10:08 PM

#

Yeah initialData.trendingMovies should work...

#

The only thing I can think of is your movie component is broken somehow.

glass turret Dec 15, 2021, 10:17 PM

#

pretty sure everything is correct

#

const Movie = ({title, index, overview, poster_path}) => {
const IMAGES_API = https://image.tmbd.org/t/p/w500/
return (
<div key={index}>
<h3>{title}</h3>
<img scr={IMAGES_API + poster_path} alt={title}/>
<div >{overview}</div>
</div>
)
}

tender spruce Dec 15, 2021, 10:24 PM

#

Ya I'm at a loss will look more into it tonight. Hopefully someone else can chime in meanwhile.

glass turret Dec 15, 2021, 10:25 PM

#

Thanks homu

tender spruce Dec 16, 2021, 6:37 PM

#

Okay, figured it all out

#

But yikes, where do I even start...

#

Here's the drop in replacement of your current code. I tried to make the minimum number of changes to your code to make it working.

#

import Head from "next/head";
import styles from '../styles/Home.module.css'
import getConfig from 'next/config'
import Movie from '../src/components/Movi'

const {serverRuntimeConfig, publicRuntimeConfig} = getConfig()

export default function Home(initialData) {
  if (!initialData?.trendingMovies) return <div>Loading...</div>;

  const searchResults = initialData.trendingMovies;

  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Movie
        index={searchResults.id}
        title={searchResults.title}
        poster_path={searchResults.poster_path}
        overview={searchResults.overview}
      />
    </div>
  );
}


export async function getServerSideProps(context) {
  let trendingMovies = await fetch(
    `https://api.themoviedb.org/3/movie/550?api_key=${serverRuntimeConfig.apikey}`
  );
  trendingMovies = await trendingMovies.json();
  

  return {
    props: { trendingMovies: trendingMovies }
  };
}

#

Now, you are making way too many syntax errors and typos. What are you using to code in? You might need to switch your ide to, say, VS Code, which will help you catch a lot of these issues immediately.

#

To illustrate:

#

import Movie from '../src/components/Movi'
Are you sure this shouldn't be /Movie?

#

const Movie = ({title, index, overview, poster_path}) => {
    const IMAGES_API = https://image.tmbd.org/t/p/w500/
    return (
 <div key={index}>
<h3>{title}</h3>
<img scr={IMAGES_API + poster_path} alt={title}/>
<div >{overview}</div>
        </div>
    )
}

Should be <img src

#

Now some syntax and convention issues you really need to pay attention to as well.

#

const data = await fetch(
fetch expects a string, but you didn't wrap the url in quotation mark. Or in my case, I used backtick instead:
```
https://api.themoviedb.org/3/movie/550?api_key=${serverRuntimeConfig.apikey}

w3schools.com javascript course is a good resource to review.

#

  let trendingMovies = await fetch(
    `https://api.themoviedb.org/3/movie/550?api_key=${serverRuntimeConfig.apikey}`
  );
  trendingMovies = await trendingMovies.json();

It's considered bad practice now to replace your variables like this. In TypeScript this would trigger a type error. Better off declaring another constant instead:

  const data = await fetch(
    `https://api.themoviedb.org/3/movie/550?api_key=${serverRuntimeConfig.apikey}`
  );
  const  trendingMovies = await data.json();

#asd