Convert an HTML Website to React/NextJS

In this video you will learn how to take a two page HTML site and convert all the html and css into a React Website. And then convert it into a NextJS website. With NextJS you can use all the benefits of React on the front end and then all the benefits of any backend integration that needs to be done. NextJS will server side render your pages as well as maintain the SEO within the source code. It adds the ability to connect to databases and more in the /api folder using NodeJS. NextJS adds image optimization, caching and many more benefits right out of the box.

CONNECT ON MY DISCORD:

0:00 Intro
1:22 Demo HTML Site
2:14 Demo CSS Overview
3:46 Create React App
4:47 Copy Demo CSS to React Site
7:20 Copy Demo Homepage to React Component
8:38 Copy Demo About page to React Component
9:30 Add React Routing to pages
11:30 Create Header component in React
12:30 Add Routing to Header Component
15:00 Start NextJS Site
16:00 Copy Demo CSS to NextJS Site
17:00 Copy Demo Homepage to NextJS
17:45 Copy Demo About page to NextJS
18:45 Create Header component in NextJS
21:00 Add images to NextJS app

#html #reactjs #nextjs

[derickio]

This was honestly a really good video that solidified my understanding of the differences between these technologies.

[nshettys]

Great Stuff! Thanks. And yes, you got a new subscriber to your channel today

[eddiphou]

I struggled to turn a static site with NextJs typescript (not sure if it was a good idea...)
Copy/paste wouldn't work as every single tag needs to be converted to its typescript equivalent.
I gave up the typescript part and did it your way. Much easier, time saver!
thank you so much. Well explained, organized, and articulated! keep up the good work.

[DevonCallaway]

Fantastic tutorial. Helped me actually understand the whole process.

[kmoneentertainment]

Amazing video. You’ve saved me from a ton of headaches

[DimuthuNuwan]

Thank you for this. great explanation!

[Slavv]

Amazing, good job man, to know you help me ! Thank you !

[iLoveVisionZ]

Great Tutorial, really liked how you explained each step.
What I can take from that video, the react intermediate step wasn't necessary, only for explaination.
You can instantly go from HTML to NextJs, no?

[akashthakur]

Bro Please Continue making videos.
I would suggest a indpeth explanation of react complex topic if you could make

[MeenaVlogs]

Hello sir, how can change css html js into next.js?

[derickio]

What if you have an HTML webpage with JS functionality? Is it similar to migrate both of those?

[vkprojekte]

thirdparty javascript makes a lot of problems.