Click here to Skip to main content
15,868,014 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Index.js file

<pre>import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'



export default function Home({data,done}) {
  console.log('data :>> ', data);
  console.log('done :>> ', done);

  return (
  <div>
    <main>

      <h1> Available Campaigns</h1>
      
      {data.map((element) => <div key={element.slug}>

        <div>

          <div>
          <image src={"https://res.cloudinary.com/dplhfxphv/" + element.logo} height = '120' width = '120' alt = "Campaign Banner" />
          </div>

          <div>
            <h1>{element.title}</h1>
            <p>{element.description}</p>
            <p>{element.created_at}</p>
          </div>

          <div>
            <p>Lorem Test</p>
          </div>


        </div>

      </div>)}
   </main>
  </div>

  )
}


export async function getStaticProps(){


  const response = await fetch("http://127.0.0.1:1234/api/campaigns")

  const data = await response.json()

return {
  props:{
    data:data,
    done:true
  }
}
}


Next.config.js file

module.exports = {
  reactStrictMode: true,
    images: {
      domains: ['res.cloudinary.com'],
  }
}


What I have tried:

I've looked around and found that this is potentially caused by the HTML in general. For example, if you have a
as a child of

, however, that is not the case here. Everything works perfect as long as it remains as img src, the moment you change it to Image src it throws an error:

Error: Hydration failed because the initial UI does not match what was rendered on the server.


I've moved my divs around to n avail and have been searching online for a good two hours reading documentation after documentation. :(


I'm going to go walk my dog but I WILL BE BACK.
Seriously, I want to get this resolved. 10:32pm EST
Posted
Updated 3-Aug-22 19:20pm
v2

Holy SKITTLES I just figured it out and it's the stupidest thing EVER.
The Solution? Don't NEST IT.

HOURS AND HOURS of reading documentation, watching videos and AGGRESSIVELY walking my dog(as in lot's of walks not aggressive walking) and this was the solution.



<pre>import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'



export default function Home({data,done}) {
  console.log('data :>> ', data);
  console.log('done :>> ', done);

  return (
  <>
  <div>
    <main>

      <h1> Available Campaigns</h1>
    
      {data.map((element) => <div key={element.slug}>

        <Image 
          src={"https://res.cloudinary.com/dplhfxphv/"+element.logo}
          height= {120}
          width = {120}
          alt="Campaign Banner"
        />

        <div>


          <div>
            <h1>{element.title}</h1>
            <p>{element.description}</p>
            <p>{element.created_at}</p>
          </div>

          <div>
            <p>Lorem Test</p>
          </div>


        </div>

      </div>)}
   </main>
  </div>
</>
  )
}


export async function getStaticProps(){


  const response = await fetch("http://127.0.0.1:1234/api/campaigns")

  const data = await response.json()

return {
  props:{
    data:data,
    done:true
  }
}
}



I just renested it and it's working that way, too. WTF
PS the '120' can be either ' or {} they both work.
Also, the original formatting I used with the Image information mostly online works that way as well. The way in the solution is just CLEANER.
WTF, someone that knows Next comment and let me know what's going on. Crazy weird..
 
Share this answer
 
v3
I've never used next.js, but I would think "<img ...="">" is not the same as "<img ...="">". Note the capital I.
 
Share this answer
 
v2
Comments
Chris Aug2022 4-Aug-22 1:11am    
***DOCUMENTATION LINK + Code Sample***
https://nextjs.org/docs/api-reference/next/image


import Image from 'next/image'

const myLoader = ({ src, width, quality }) => {
return `https://example.com/${src}?w=${width}&q=${quality || 75}`
}

const MyImage = (props) => {
return (
<image
loader="{myLoader}
" src="me.png"
="" alt="Picture of the author" width="{500}
" height="{500}
">
)
}
Chris Aug2022 4-Aug-22 1:21am    
I just figured it out, in case you're curious.
Dave Kreskowiak 4-Aug-22 9:33am    
Excellent. I've never used nest.js and don't think I'm ever going to given the weird syntax and ease of mismatching parenthesis and curly braces.
Chris Aug2022 5-Aug-22 19:04pm    
Yeah, I am desperately studying Django/Python/SQL trying to get a job. Eveyr job I look at requires 18 million things. Disheartening to say the least. Meanwhile all these nepotists get their family to give them internships, this country sucks. And yeah, I've mismatched parenthesis and currly braces a lot when following tutorials, literally have to look for the nipple. Driving me crazy.
Dave Kreskowiak 6-Aug-22 12:48pm    
The trick is to ignore the "18 million things" and apply anyway.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900