Adding Template to our Next.js project | Portfolio Website + Blog Using Sanity.io #6
Aug 15, 2023
Adding Template to our Next.js project | Portfolio Website + Blog Using Sanity.io #6
I asked Sanity to hook up some free stuff for this video. They made a custom 🔥 boosted free plan: https://www.sanity.io/codewithharry https://github.com/CodeWithHarry/Sani …www.instagram.com/codewithharry https://www.codewithharry.com https://www.facebook.com/CodeWithHarry https://www.instagram.com/codewithharry/ https://twitter.com/Haris_Is_Here
Content
0.071 -> In our preceding video we had set
our project backend through SANITY
4.913 -> Today I'll tell you how to make frontend very easy
9.311 -> We're going to use a template for it,
which is going to be absolutely free
13.862 -> And I'll tell you how to integrate
this online template in our project
19.212 -> When we convert HTML in JSX,
we have to face problems
23.499 -> But I'll make it very easy to solve it for you
27.026 -> Let's go to the computer screen
And learn
29.443 -> So far we've learned a lot of things.,..
So what we're going to do today?
32.946 -> So first of all everyone access this playlist
While I'll start my SANITY & NEXT.JS application
40.72 -> Firstly I'll write " cd .\ next-frontend \"
& then I'll write "yarn dev"
45.802 -> And then I'll write " cd .\sanity-backend>
and run "yarn start" which will run SANITY
54.234 -> Now we'll open them & then we'll apply this
template "atom template" which we've downloaded
60.422 -> And we'll apply this template
in our NEXT.JS application
64.317 -> So here opens my SANITY
& Here opens my NEXT.JS where are you NEXT.JS
69.405 -> Here it is.
Here opens my NEXT.JS and SANITY
73.261 -> And when I change the content from
here, So it'll also change from here also
77.435 -> But I don't like this page so
obviously I'd like to use my template
81.895 -> So for that I'll open my "atom template"
85.99 -> And I'll open it with code
89.538 -> So I've closed the head of "index.html"
96.049 -> So firstly I'll put this in my NEXT.JS application by using "nexthead"
102.939 -> And I'll hide my terminal
107.975 -> And I"ll also remove "console.log(blogs[0]) "
112.503 -> Now I'll comment out this whole 'div'
117.005 -> I'm only commenting it out & not removing
it's because we might have use of it later
120.478 -> I don't want to be in trouble later
123.68 -> So using 'next-head'
129.44 -> We already have imported the head from next-head
134.692 -> So if I move to here we may have
some errors here because nothing is visible
140.365 -> Huh... No errors are here
144.138 -> There is a file naming "min.css"
148.724 -> It might have trouble finding "main.min.css"
154.293 -> Anyways we'll fix it later
155.961 -> For now we'll copy & paste
the rest of the content from the body
162.145 -> So this 'div' ... this ... & this
166.097 -> We have a lot of div here
170.076 -> Running this is also a challenge because..
173.396 -> We're in NEXT.JS and this is made from...
Let's format this document
177.592 -> We're in NEXT.JS and this is made from...
180.415 -> Directly from "HTML, CSS & JavaScript"
184.251 -> So I'm finding it's outer-most div
187.359 -> Where has it gone...
190.942 -> That must be here
192.778 -> There is a 'div' inside the
body & this is it's outer-most div
196.981 -> This "div x-data =".....
This is a div..... This is also a div
204.177 -> Let's copy it.
And after that let's see...
207.762 -> If it is directly pasting or not
211.29 -> There maybe some troubles
But I'm here to solve them
215.973 -> Here are all the problems.
Can we use 'quickfix'.....
220.504 -> No... Firstly we've to replace "class =" with "className="
224.753 -> Here we've a lot of HTMLs
229.066 -> So I've to fix them first
232.428 -> Firstly replace "class =" with "className ="
239.861 -> Shall we replace it all?
Yes... OK... Done
244.652 -> Now I'll remove "
250.005 -> Where we've errors now
252.356 -> It seems like there is an extra 'div'
If I'm not wrong
255.59 -> Let's do 'format document'
257.752 -> And here we have 'div'
261.424 -> className = 'absolute'
265.055 -> 'Image' is closed perfectly
267.62 -> What's the problem now
269.186 -> Here we have
"span @click=triggerNavItem('#about')"
274.904 -> There not fixing by this method
So let's try putting them one-by-one
278.854 -> So what we'll do....
We'll firstly move....
282.646 -> Let's format this document
284.529 -> Firstly I'll move this 'div'
288.112 -> So let's do it like this
290.313 -> So If I only copy this 'div' ....
295.008 -> And paste it here... So let's see how it goes
299.172 -> It appears here like this...
So what problem do we have here now..
305.28 -> "JSX expressions must have one element. "
308.61 -> Firstly I've to do this...
313.583 -> "className =" , "class ="
Let's see what problem do we have now
317.699 -> This 'div' , this 'div' , It closes here
321.302 -> So you've to make a little bit efforts to fix this
324.854 -> Even I'm thinking to move it's smaller units here
329.385 -> I'll start from here & I'll move this firstly
332.602 -> We have a 'div' inside a 'div'
334.931 -> So let's move
"span @click=triggerNavItem('#about')"
340.932 -> I've removed
"@click=triggerNavItem('#about')" from span
345.769 -> I'm also removing this , this & all of these
349.858 -> I'm removing all
"span @click=triggerNavItem('#about')"
353.18 -> And I'm also replacing "class =" with "className ="
355.849 -> Now let's save it & have a
look at my NEXT.JS application
360.023 -> So obviously it's not that good & I'm not impressed
364.79 -> "Logo image" is written here
366.548 -> And all of these are also not visible in "index.js"
372.855 -> So let's try restarting the server
378.43 -> I've reloaded it
381.934 -> And If I inspect it....
387.558 -> So we have this inside the body... But...
391.182 -> But why everything is hidden..
I've to fix them all
395.823 -> So I'm also copying rest of them..
And after that I'll paste them
401.004 -> I know it's difficult to run existing board
405.064 -> But No worries !
It'll be fine if we try to fix them one-by-one
409.819 -> So let's start from above & fix these problems
414.482 -> So I'll fix the very first problem I saw
418.693 -> So here we've our first problem
"style =....." , it has to be an object
423.62 -> It has to be an object, So we'll remove
background image & URL
428.947 -> So let's fix it by zooming in,
Background image has to be an object
435.034 -> Like this
437.34 -> "Background image" And this is supposed
to be like this "URL this this this this"
446.592 -> So I've added an object here
451.622 -> So I've fixed JSX and this template
is working something like this
455.528 -> Which means we've to make more
efforts to run this template correctly
460.22 -> No need to worry. We just
simply add this script also
467.271 -> So we also have to include "/asset/js/main.js"
473.733 -> And we also have to include CSS
477.132 -> We must have to do that
479.381 -> So now we'll add our script in the index
486.336 -> So I'll tell you how to do that
488.295 -> So scroll to the top & here in the script tag of NEXT.JS
494.423 -> NEXT.JS's script tag :
import script from "next/script"
501.195 -> "next/script"
508.838 -> And after this "main.js" will also be loaded
But I guess we have some errors here
515.029 -> And what is this "className ="
517.596 -> Why it is showing this?
This is not supposed to be here
521.082 -> "className = opacity -100"
526.358 -> It must be because of an error
528.393 -> So I'll remove this from here
531.206 -> "className = opacity -100" I've to remove this from here
537.037 -> OK?
538.268 -> So our template should be clean
541.216 -> So if I reload it, It'll look something like this
543.901 -> Now I'll add my "assets" folder to the "public" folder
548.417 -> So my "assets" folder will appear in "public" folder
553.674 -> So if I reload it again
557.193 -> WOW! It works
559.577 -> So now our template is completely working
565.801 -> Now this is fun.... This is fun of life
570.301 -> Simply it starts working when I add that folder
573.978 -> But now here an error occurred
What's going on
577.991 -> What's going on man here!
582.059 -> It's creating a little bit problem
Let me see what is this
586.117 -> So this part have "min-h-screen"
width is 2/3
592.189 -> Why it is creating problem..
Everything else is working properly
596.727 -> Let's have a look at responsiveness
What's going on there
599.791 -> It's great here man!
601.995 -> This button in not working but we
can make it work by writing script ourselves
606.675 -> But I just want to know about
"< div class ="absolute...'
613.743 -> Why it's height is creating a problem
617.23 -> For that I'll copy it & paste it here
621.027 -> I'll inspect it here
623.682 -> So we've removed a class=
"{ 'opacity-100 pointer-event-auto' : mobileMenu }">
628.551 -> Which was causing problem
630.183 -> It's not necessary to copy this template
Let's do one thing
633.425 -> I'll do 'ctrl+f' here
636.468 -> And after that I'll paste it here
639.265 -> And I'll remove this 'div' the "long-line" one
643.952 -> If I remove "let's connect"
649.474 -> If I.....
653.725 -> I'm talking about this portion.
656.004 -> What if I remove the longest line from here.
659.159 -> If I remove this....
661.369 -> If I remove this 'div'
665.095 -> There's no problem in it.
We're just fine
667.796 -> So I'll remove this. No problem
"ctrl + v" let's search it
673.97 -> "Are you sure?"
Yes, I'm sure
676.488 -> Is it containing anything or shall I remove it?
It contains "about services" etc
681.774 -> How can I remove this?
683.689 -> Wait a minute
685.604 -> When I removed that "about services"
has also been removed with it
689.532 -> It doesn't...
691.425 -> Let's try to reload it one more time
to check if I'm deleting the right thing
696.094 -> So if I delete this....
699.994 -> I'm confused. What should I do?
702.238 -> It seems like it's some kind of glitch in "mobile view"
710.177 -> I guess It'll show after clicking on this.
712.95 -> So let's hide it for now.
717.436 -> So when I hide that, my template is working properly
721.133 -> It's working perfectly. And the main
thing is all the animations are working.
725.289 -> Everything is working properly. It's great
729.111 -> I should be able to see my
blog-post if I click on 'Read more'
732.471 -> I should be able to see my top three blog-post
735.076 -> So I'll show you that in the upcoming videos
738.331 -> But for now our template is working perfectly.
741.16 -> I'm very excited about it.
743.051 -> So here you can add your photo, Here you can add
your about & here you can add your social media
748.88 -> I hope you're enjoying &
understanding how to do all this stuff
753.957 -> And please access the Sanity Boosted Plan if you haven't
759.545 -> Because if you don't access the Boosted Plan so
maybe it'll be difficult for you to do that in future
764.154 -> And please access this playlist also
766.361 -> That's it for today's video,
Thank you so much for watching this video :)
I'll see you next time
Source: https://www.youtube.com/watch?v=LM4nnS8ffDc
