Next.js HTML Template Tutorial in 5 mins (as React beginner)
Next.js HTML Template Tutorial in 5 mins (as React beginner)
My girlfriend who is a much better React Next.js developer than me spent 3 days manually converting CSS files into JavaScript objects so I decided to show her how to do the same thing in 5 minutes…
HTML to JSX Converter: https://transform.tools/html-to-jsx
HTML Comment Remover: http://www.webtoolbar.net/tools/HTMLC…
Content
0.4 -> in the next few minutes i'm going to teach you
how to take a template just like this one and
4.88 -> run it in next.js so you can see it's got lots
of javascript things you click on this it doesn't
10.32 -> pop up so it's fully javascript html thing the
type you would buy on themeforest name first
16.4 -> yeah i'm pretty sure it's themeforest okay so the
first thing we're going to do is we're going to
22.24 -> create a new uh next.js app npx and create
next app we're going to call it next html
34.16 -> okay so as this is going i should explain
why i learned how to do this and i'm no next
39.04 -> js expert but my girlfriend was doing a youtube
tutorial and spent three days converting.css files
46.96 -> into javascript objects so i decided teacher that
that's probably not the best use of your time
54.08 -> so i'm going to cd into the folder go to open vs
code and we're going to run the development server
63.2 -> okay so now i've got a server running
it's just going to be a very basic
67.76 -> brand new next.js application here we go so we've
got a brand new next.js application and now we're
76.24 -> going to take this html and css and put it
on here okay so first we're going to find
84.48 -> where the html is for this particular project
90.16 -> okay so we've got the html here let's go open
this in vs code so we've got two vs codes open
97.2 -> and we're going to go to index.html now the
first thing we're going to do is we're going
102 -> to find from head all the way down to footer and
all these javascript things we want to skip them
111.84 -> because they s for some whatever reason don't like
my jsx conversion method so i found this website
118.88 -> which converts html to jsx so we're
just going to paste all of that in and
125.44 -> it's going to spit out this code
here so we're going to copy that
131.36 -> and we're going to open up our next project go
into pages go into index find return and we're
142.48 -> going to scroll down to the bottom paste all that
code in here um and then there's one last thing we
150.08 -> need to fix which is this weird semicolon which i
don't know why they put there but they did now in
158.96 -> order to hit all the assets this javascript image
is fonts and css i'm going to copy these into the
165.92 -> public folder of our brand new application
well that way the html we've just pasted in
173.84 -> is going to actually be found instead of having
a 404 error okay so let's go back to our app and
182.4 -> there you go so we're halfway there so you notice
that a lot of the javascript stuff isn't working
189.68 -> so that's the next thing we're going to fix this
stuff here must just be css because clearly all
193.92 -> the javascript is not working the thing is the
carousel down here yeah anyway let's go back to um
203.6 -> to our original it's the next chair stuff we want
to go to original html from the template folder
210.56 -> and scroll down and find
all these javascript files
215.04 -> okay the problem with these is they have
these comments in them html comments
218.56 -> do not translate into jsx so what we need to do
is we need to strip them out so i found a online
225.52 -> comment remover from html because all it needs
to do is find these and delete all of them so
229.84 -> you can do it manually or you can use a tool and
that's just going to get rid of all the comments
235.44 -> now we copy them and we put them into and i'm
only putting it down the bottom because that's
242.16 -> how the template had them some of them are in
the footer on the photo yeah some of the photos
246.56 -> some of them are in the um the header for the
head so i'm just going to put these in the foot
251.84 -> okay let me save that we'll go back to our
next js and we're going to go back to port 3000
262.08 -> and voila now we actually have the jsx working
so we've got this one this one's working
269.76 -> and then you've got this carousel here
this is all javascript that we pulled in
274.24 -> now the reason why you don't do this in real
life is because the head all the stuff that
280.64 -> normally is in the head like the title for example
that's no longer in the head now it's in the body
286.48 -> so what you do in a real next uh next js
application is you would make a component or
291.92 -> you'd you know do something that makes it appear
in the head so that's the reason why you don't do
296.8 -> this but apart from that i can't really see why
you wouldn't do this instead of trying to convert
303.28 -> all your css files so all these files into
jsx objects but that's just me okay anyway
310.56 -> i've got more videos like this coming up
so subscribe and tell me what you think
Source: https://www.youtube.com/watch?v=Hx2BdPh0QFg