Next.js for Beginners - Full Course
video description
Date: 2022-03-14
Related videos
Comments and reviews: 10
Chris
Sidequest tutorial for somewhere around 1:26:00:
I noticed that next doesn't like when you use the standard HTML img tag, and wants you to import its image tag, which causes problems with trying to use the sanity URL so I got it working as the good people at Next like.
1. Install 'next-sanity-image' as a dependency.
2. in the next.config.js file, you need to add -images: - domains: ['cdn.sanity.io'] -- (Assuming you opted for the cdn, I assume it would just be localhost:3333 instead if you didn't, but I'm not sure).
3. Create a file called something like SanityImage.js in a components folder and import Image from 'next/image', the 'useNextSanityImage' hook from 'next-sanity-image', and the sanity client because the hook needs that.
4. This SanityImage component is just going to be a wrapper around the next Image component because each image needs to use that hook (but you don't know how many images there will be necessarilly) so it can't be done in the index.js (and this is a generally reusable component anyway), so just have it take in - src, alt - as props where the source is just recipe.mainImage and alt can be recipe.name.
5. the first line of the component should setup the sanity image hook 'const imageProps = useNextSanityImage(sanityClient, src);' and the second should just return (You can also add any other styles to the image in here that should be applied to all images across the site. You could also spread any other props you'd like to make it more dynamic.)
6. Then you just import that component and use it instead of img wherever you would do that.
note: You can still target .recipe-card img just the same because there is ultimately an img within that li inside of the Image component that Next provides, though you will need to use !important on most of the styles because apparently next adds inline styles for some reason? You may also need to add -imageProps && - once the usePreview subscription happens because it seems to send an undefined value in at first render and then once the response comes in, it rerenders with the image.
reply
Sidequest tutorial for somewhere around 1:26:00:
I noticed that next doesn't like when you use the standard HTML img tag, and wants you to import its image tag, which causes problems with trying to use the sanity URL so I got it working as the good people at Next like.
1. Install 'next-sanity-image' as a dependency.
2. in the next.config.js file, you need to add -images: - domains: ['cdn.sanity.io'] -- (Assuming you opted for the cdn, I assume it would just be localhost:3333 instead if you didn't, but I'm not sure).
3. Create a file called something like SanityImage.js in a components folder and import Image from 'next/image', the 'useNextSanityImage' hook from 'next-sanity-image', and the sanity client because the hook needs that.
4. This SanityImage component is just going to be a wrapper around the next Image component because each image needs to use that hook (but you don't know how many images there will be necessarilly) so it can't be done in the index.js (and this is a generally reusable component anyway), so just have it take in - src, alt - as props where the source is just recipe.mainImage and alt can be recipe.name.
5. the first line of the component should setup the sanity image hook 'const imageProps = useNextSanityImage(sanityClient, src);' and the second should just return (You can also add any other styles to the image in here that should be applied to all images across the site. You could also spread any other props you'd like to make it more dynamic.)
6. Then you just import that component and use it instead of img wherever you would do that.
note: You can still target .recipe-card img just the same because there is ultimately an img within that li inside of the Image component that Next provides, though you will need to use !important on most of the styles because apparently next adds inline styles for some reason? You may also need to add -imageProps && - once the usePreview subscription happens because it seems to send an undefined value in at first render and then once the response comes in, it rerenders with the image.
reply
Paul
I would highly recommend you re-publishing this video with the missing Essential content being re-inserted. If the user doesn't notice the message in the description, they will have a bad experience like I did, not knowing how to get setup properly, then just leaves you with a bad impression for how the rest of this tutorial will pan out. 'Minor error ...' should read 'Major error ..' Also, I just noticed that the boilder plate code that create-next-app in index.js is now different to what is illustrated in the tutorial; there is now no longer a default about page, so you can't link to it, and other minor differences. I am using version 11.1.2 of create-next-app
reply
I would highly recommend you re-publishing this video with the missing Essential content being re-inserted. If the user doesn't notice the message in the description, they will have a bad experience like I did, not knowing how to get setup properly, then just leaves you with a bad impression for how the rest of this tutorial will pan out. 'Minor error ...' should read 'Major error ..' Also, I just noticed that the boilder plate code that create-next-app in index.js is now different to what is illustrated in the tutorial; there is now no longer a default about page, so you can't link to it, and other minor differences. I am using version 11.1.2 of create-next-app
reply
Kapehe
Thank you so much for this opportunity. Making this video was a lot of fun.
I did notice one section accidentally got cut out, that's my bad! At 5:15, to get to that Next.js starting point, please do the following:
1. Run the command: -npx create-next-app next-recipe-app-, let that build
2. Go into the folder: -cd next-recipe-app-
3. Open in your code editor of choice!
Thanks for watching!
reply
Thank you so much for this opportunity. Making this video was a lot of fun.
I did notice one section accidentally got cut out, that's my bad! At 5:15, to get to that Next.js starting point, please do the following:
1. Run the command: -npx create-next-app next-recipe-app-, let that build
2. Go into the folder: -cd next-recipe-app-
3. Open in your code editor of choice!
Thanks for watching!
reply
Simone
Hello -Kapehe, I really enjoyed the course! My first Next.js app and first time using Sanity and it's so easy! I love it. I do however have trouble getting the images on my frontend using forUrl. The error I get is: Server Error
Error: Unable to resolve image URL from source (undefined) Any Idea what this can be? Help would be apprciated :) Thanks for the video too!
reply
Hello -Kapehe, I really enjoyed the course! My first Next.js app and first time using Sanity and it's so easy! I love it. I do however have trouble getting the images on my frontend using forUrl. The error I get is: Server Error
Error: Unable to resolve image URL from source (undefined) Any Idea what this can be? Help would be apprciated :) Thanks for the video too!
reply
Mei
I'm having trouble with the pulling data into the Home function part. I'm getting an error saying unhandled runtime error.
TypeError: Cannot read properties of undefined (reading 'recipes')
const recipes = data.recipes; this is the line that is throwing an error
reply
I'm having trouble with the pulling data into the Home function part. I'm getting an error saying unhandled runtime error.
TypeError: Cannot read properties of undefined (reading 'recipes')
const recipes = data.recipes; this is the line that is throwing an error
reply
AndreVsHimself
after instaling the like button if i refreses don't he recipe page I get this error:
TypeError: Cannot destructure property 'recipe' of 'data1' as it is undefined.
where is data1? lol
reply
after instaling the like button if i refreses don't he recipe page I get this error:
TypeError: Cannot destructure property 'recipe' of 'data1' as it is undefined.
where is data1? lol
reply
-MER
Thank you for your time to prepare this tutorial, but most of the video is about Sanity not about NextJS features. I was expecting focus on more NextJS, but I have watched like a Sanity tutorial.
reply
Thank you for your time to prepare this tutorial, but most of the video is about Sanity not about NextJS features. I was expecting focus on more NextJS, but I have watched like a Sanity tutorial.
reply
Technolus
So... nextjs! Except taught by a relationship manager for sanity, who is mostly talking about sanity.
Except... sanity tutorial!, but who wants to listen to that???? not that many of us.
reply
So... nextjs! Except taught by a relationship manager for sanity, who is mostly talking about sanity.
Except... sanity tutorial!, but who wants to listen to that???? not that many of us.
reply
Frontierer
Tutorial is bad. You don't even start with the start point - had to read comments. Half of this tutorial is about Sanity rather than next and the presenters style is irritating. Poor
reply
Tutorial is bad. You don't even start with the start point - had to read comments. Half of this tutorial is about Sanity rather than next and the presenters style is irritating. Poor
reply
Muhammad
You use Sanity most in the video rather than Next.js , Kindly imporve your learning material focus on the main thing that you are going to provide , anyway GOOD STUFF KEEP IT UP
reply
You use Sanity most in the video rather than Next.js , Kindly imporve your learning material focus on the main thing that you are going to provide , anyway GOOD STUFF KEEP IT UP
reply
Add a review, comment
Other channel videos
1:8:35
