Build a Professional Landing Page with Next.js 13, Chakra UI and Vercel

Are you looking to build a professional landing page using the latest and newest tech stack? Look no further! In this video, learn how to use Next.js 13, Chakra UI, and Vercel to create a sleek and modern landing page for your website. Don't miss out on this tutorial!
📚 Resources
- Next.js: nextjs.org/docs
- Chakra UI: chakra-ui.com/getting-started...
- React Icons: react-icons.github.io/react-i...
- Chakra UI templates: chakra-templates.dev/
- Vercel: vercel.com/
- GitHub Repo: github.com/hqasmei/chakra-ui-...
👩‍💻 Connect
Github: github.com/hqasmei
Twitter: / hqasmei
LinkedIn: / hosnaqasmei
⌛ Timestamps
0:00 Intro
0:38 Create Next.js App
2:25 Add Chakra UI to project
3:25 Add react-icons to project
3:45 Add Chakra UI Provider
6:21 Create components directory
7:56 Create Navbar
9:52 Create HeroSection
11:33 Create Features
12:23 Create Testimonials
13:27 Create Footer
15:32 Create Sign In/Sign Up Pages
19:14 Check responsivity
19:52 Deploy to Vercel
21:28 End

[@AlistairCooperMusic]

Brilliant tutorial! Thank you for taking the time to make it! The new app folder totally makes sense.

[@aaymankhalid9997]

A very short and sweet warmup tutorial. followed it from scratch and loved it ❤ . will wait for more quality content from you 🙂

[@francoisrice7112]

Thank you for this tutorial!! This is perfect for quickly creating pages on my Nextjs site to drive traffic to my business

[@kamertonaudiophileplayer847]

Indeed, an awesome job. I created a good looking web site in almost no time. Simple and elegant.

[@furqanQadri7]

best warmup tutorial! development with rocket speed 🚀!

[@basabdattaray8495]

Great presentation - Thanks!

[@MladenStankovicDev]

Nice tutorial, thank you 🙏

[@arolper]

Very useful tutorial. Thanks!

[@4409rjf]

Great Job!... So much so that I understood it 😀

[@AndrewDBrown2020]

Really nice - thank you so much :)

[@yaakovisaacs]

Nicely done

[@myandrobox3427]

Simply love this... ❤❤Beautifully explained. Can you please take it to next level and enable authentication and basic CRUD 🙏🏻

[@inshirahalykhan8728]

Thank you Hosna! It really helped me.

[@mounir101]

1st watch, I find pretty awesome work in this tut! clean sound, understandble, steps are nicely organized, furthermore, I like your English, it's impecable. may I subscribe?

[@hqasmei]

Glad you liked it!

[@byronloarte]

Waooo it's very useful and enjoy this tutorial a lot of content. Thank you 😊😊😊😊👏👏👏👏✨

[@matemedialunasy..seguimosc5171]

Muy buen material, saludos!

[@afzalpeter3129]

this is very helpful video

[@shehza-d]

Appreciated 👍🏻💯

[@UziTekk]

Keep up the good work!

[@hqasmei]

Thank you! More videos coming soon :)

[@GothrythmFactory]

Thank you.

[@nushankodikara]

Awesome!

[@user-ol9yx6ef4u]

thanks! 👍👍👍👍👍

[@reginaldbellas703]

That was great

[@Dhanushsaji]

When we use Chakra UI it should be a client component. We converted the entire app to client-side by adding "use client" in the layout.
But don't you think we're losing the main SSR feature of Nextjs?

[@zeckinho_]

I have the same doubt

[@cosminpetrila252]

SSR works, it's working like it'd work with Next 12. SEO won't be a problem

[@dallindavis2131]

Yup same question

[@mikiramirezjr.2835]

Any chance you can make a tutorial with a contact section included with email js implemented? 🙏

[@jo3436]

useful 👍

[@ihwan_id]

very nice

[@farazyk8934]

love it

[@HassanElMghari]

Great video Hosna!

[@hqasmei]

Thanks Hassan!

[@stephenlau2845]

hi, thanks for your tutorial, I wanna know that how can I use Chakra UI combine with "Tailwind Css" ?

[@MariaTheresaAzzi]

Amazing video ... Keep up the good work! If you know anything about shopify development with nextjs can you do a youtube video. Thank You So much!!

[@junlin9139]

question:why i don't have pages folder.and different folders structure with you.i got a src folder wrapping app folder.

[@shivaskanthan6144]

Nice video, any chance of a video for TailwindCSS with NextJS?

[@hqasmei]

Will be posting one about Tailwind CSS and NextJS today! 😁

[@dawidwraga]

Nice video, good explanations and very fast way of starting out. Perhaps it could be useful to provide more explanation of how the templates are working to teach people new to chakra about how to customise them. Eg explaining useColorMode, as prop, extend theme, the styling system, etc.
Additionally, is there a specific reason for using default exports for all components in Next13? I used to do this until I researched best practices, now I think named exports are better in order to enforce consistent naming and enable typescript to provide suggested name.

[@hqasmei]

Thanks, I will keep that in mind for future videos.
No particular reason for using default exports. Still relatively new to Next13, want to spend more time learning best practices as well. Feel free to share anything you find!

[@RWoolf-jq9fz]

Nice video, How do I get the page links to work?

[@lucienhamm5965]

Hey ! What did you expect ? This tutorial, actually !

[@manokaranmanivasakan5141]

good

[@Profanumable]

Doesnt it actually completly demolish the idea of client side components, since page.tsx is "client side"?

[@professeo]

Thanks! 🇰🇷

[@thevasupodcast4561]

you should zoom in on the code, as I guess you're coding on a monitor but some of us watch these tutorials on a 14 inch laptop, so it hampers the readability. Anyways, great tutorial. Thank you!!

[@hqasmei]

Will do, thanks for the feedback!

[@sharmeenrizvi8145]

👍

[@hunterhavice8359]

Question?! in this experimental layout where would the API live? I am trying to impliment nodemailer and playwright scraper and am unsure where to put the api folder so the pages understand!

[@hqasmei]

Yeah, there's this great video explaining it. Should check it out! ruclips.net/video/WlVV_LA4FCg/видео.html

[@nilsraus]

Question: You use use client alot what about Server Side rendering, isnt it bad to use it so much, nearly everwhere? thanks , good tutorial :)

[@hqasmei]

Great question! Here is some documentation discussing more beta.nextjs.org/docs/rendering/server-and-client-components.
One takeaway was this line “You only need to mark components as 'use client' when they use client hooks such as useState or useEffect.”
Hope that answers your question. Explains it even more the pros and cons of client vs. server side rendering.

[@ammaralzhrani6329]

Thank. The main feature of next js will not work which ssr if you just use clintt component

[@herrkin]

I have an error /node_modules/@chakra-ui/react/dist/index.mjs
Error: It's currently unsupported to use "export *" in a client boundary. Please use named exports instead.

[@fernandoaguero2995]

same jajajaa

[@herrkin]

@@fernandoaguero2995 I solved it, you just have to make sure you have "use client" on all files that uses chakra including the providers file

[@phantazzor]

no theming sad...

[@universe_decoded797]

Why no tailwindCSS

[@hqasmei]

I got you, coming soon in an upcoming video! 😁

[@junsgk]

Hosna in the house!