Build A Responsive Next JS Website Using Tailwind CSS - Beginner Guide
Ғылым және технология
Build A Responsive Next JS Website Using Tailwind CSS - Beginner Guide
In this video I go over the basics of creating a Next JS website incorporating the Image component Next JS provides to us as well as the internal routing system. This means all of the images we will use take advantage of lazy loading! Wi will build an image slider that lazy loads all the images which results in faster build times and increased SEO for your website. Since Next JS offers a built in routing system and the Link component this means we will not have to use react-router-dom as we normally would when handling routing in react js applications.
🙏 Thank you for following along and please let me know what you think in the comments below!
ZeroTo Mastery:
- Master React JS Course - bit.ly/Learn-React-JS
- Complete Web Developer in 2023 - bit.ly/Complete-Web-Developer...
Coding Challenges!
bit.ly/Code-Challenges
🏆 Build A Responsive Next JS Website Using Tailwind CSS
🏆 Parallax Scrolling
🏆 Image slider using the Next Js Image Component
🏆 Routing in Next.js
🏆 Passing Properties down to child components
🏆 Statically imported images & external URL loaded images
🏆 Linking Google Fonts to _document.js file
❤️ Support the Channel
www.buymeacoffee.com/clintbriley
Instagram 💪
/ fireclint
Github Repo 💻
github.com/fireclint/NextJS-T...
⏰ Timestamps
00:00 - Start
01:22 - Create Next JS App
01:40 - Link Google Font
05:00 - Install Tailwind CSS
07:47 - Parallax Hero Component
16:30 - Navbar Component
31:20 - Change Navbar Color When Scrolling
37:52 - Slider Component - Lazy Loading Images
55:07 - Instagram Grid Component
01:04:17 - Create "Work" Page
01:13:18 - Contact Page
Пікірлер: 162
I normally just do these little weekend projects without commenting or giving feedback. This was a fantastic tutorial session, and I love how you showed multiple ways to use the image component. I actually found a lot of different learning content here, and I appreciate it. Thanks!
@codecommerce
2 жыл бұрын
Glad it was helpful! Thank you for the feedback
man you just got a new student , im going to watch every video you post this is pure gold , thanks for the content you dont know how much i apreciate this , have a great day you are a really good teacher
Awesome tutorial, one thing I would mention is at 30:55 where you do the ternary operator and copy and paste the full className, if you instead use backticks you can write the ternary operator inside the className and then you don't need to duplicate the full thing, so like this className={`absolute top-0 ${ nav ? 'left-0' : 'left-full' } right-0 bottom-0 flex justify-center items-center w-full h-screen sm:hidden bg-black text-center ease-in duration-300`}
Amazing wide range of things you taught on this, I'm a DevOps Engineer and haven't had contact with frontend for so long, wonderful job you did there, tysm!
One more completed ! Thanks a lot for these. My portfolio is based on your projects ! Thanks a lot !
love from india, you are the reason who is gonna make me from a basic WordPress user to a developer, keep adding more and more tutorials like this, like the way you explain everything.
really cool tuts. i just mastered css a few days ago, and i try to follow your video without expectations since i know nothing about react. turns out i got hooked and i feel confident in my web dev journey. you're da man Clint!
@codecommerce
2 жыл бұрын
That’s awesome dude thank you! 🙏
YOUR CHANNEL IS JUST A GEM! So happy to find it! Keep going and I swear - soon you will gain a million follower community!
@codecommerce
Жыл бұрын
Thank you Bohdan 🙏
Amazing tutorial, it helped me lot! Thanks 😊
Thank you VERY MUCH man! Great videos! Keep on going!
@codecommerce
Жыл бұрын
Thank you man!
very nice of you. I am so happy to learn this from you.
very helpful, so very much appreciated, thanks !
Thanks a lot! Really good tutorial
Great videos man. Keep them coming.
@codecommerce
Жыл бұрын
Thank you Jared 🙏
damn I learned new things, you are doing a great job. Especially with the scrolling effect. I used to have trouble.
Thanks for your new teaching style , I loved this style better than before one.
@codecommerce
2 жыл бұрын
That’s awesome. Thank you for the feedback!
Enjoying this NextJS Series! Great value once again!
@codecommerce
2 жыл бұрын
Thank you man! Next is fun!
@developedbyjs
2 жыл бұрын
@@codecommerce yes it is! If possible could you please make a tutorial on firebase v9 [firestore] been trying to learn it but would like it learn from you as you explain stuff in simple terms if possible really would be helpful also to many beginners!
Mate your a legend I learnt everything ik about react and next js from you
@codecommerce
2 жыл бұрын
Thank you so much 🙏
@fantasticyuvi8104
2 жыл бұрын
@@codecommerce sir can you please tell how to get Images in slider.jsx from local computer instead of images from unsplash , I'm new to tailwind just learning , I have searched everywhere but couldn't find it
Hey man, really love your content! You should definitely consider putting out shorts for those cool implementation or mention it in the title of the video! People would definitely love it!
@codecommerce
Жыл бұрын
Thank you Kwan! I know I should start doing shorts. I’m just not sure what to put in there.
Awesome!
pretty good tutorial, keep it up 🤙🏼
@codecommerce
Жыл бұрын
Thank you my friend!
Curt, Great Video. I have an off topic question since you really know your nextjs. I am trying to deploy to vercel but I am using a backend folder and a client folder. Can you point me to any resources on how to prep my app before deploy? I would sure appreicate it. Thanks for your great content.
Fantastic as always
@codecommerce
Жыл бұрын
Thank you Darren! 💪
Great stuff, thx!
@codecommerce
2 жыл бұрын
Thanks Greg! Cheers!
Was on the fence if Tailwind was right for me or if I should stick to SASS which I was pretty inclined to do rather than learn something new. This video changed my mind, thanks!
@codecommerce
Жыл бұрын
I love tailwind!
This is literally Amazing 😍
@codecommerce
2 жыл бұрын
Thank you Nitesh! 💪
Thanks for ur vid, can u tell pls how do u import components clicking on them in the row?
Thanks for the great video! I have a question, when there are some scrollable contents in the back of the home page, how to prevent a vertical scrolling when you click navbar in a mobile device? I dont want users to be able to see the home contents.
Perfect
Aaaaand another, Clint is unstoppable , watch out! :P Great job once again chief, keep up the great work. Also, you can keep the word wrap always on: File > Preferences > Settings search “word wrap” in the search field, Editor: Word Wrap, select on, I think that's it, don't remind changing anything else for me, hope it works. 💪
@codecommerce
2 жыл бұрын
Haha yes. That’s valuable right there. You will see that on the next one!! Thanks dude!
Welldone man!
@codecommerce
2 жыл бұрын
Hi Enoch- thank you!
thanks, bro
Hi Clint i have found an issue at 46:01 Cannot read properties of undefined (reading 'length') , even had a try on your github repo, with a simply copy and paste your slider component, it still does have the problem. Does this have something to do with Next 13?
Hey just gone through your tutorial and completed it do you have a tutorial to hook up the contact page?
I really love your vids bro
@codecommerce
Жыл бұрын
Thank you sir!
Good project 😊 nice the effect on the navbar
@codecommerce
2 жыл бұрын
Thank you my friend 🙏
@fantasticyuvi8104
2 жыл бұрын
Sir can you please tell how to get Images in slider.jsx from local computer instead of images from unsplash , I'm new to tailwind just learning , I have searched everywhere but couldn't find it
👍 thanks for everything
@codecommerce
Жыл бұрын
Thank you!
Hey Brother hope all is well? So when you used the t-operator to hide the mobile menu [31:11 bookmark in the video], it takes the mobile menu totally away and it doesn't show back up if you resize the screen.
thank you for nice share, it was my first tailwind experience and instagram hover effect didn't work on me I couldn't find what s wrong, but thank you again.
@codecommerce
2 жыл бұрын
If you have a GitHub I can take a quick look!
@fantasticyuvi8104
2 жыл бұрын
@@codecommerce sit can you please tell how to get Images in slider.jsx from local computer instead of images from unsplash , I'm new to tailwind just learning , I have searched everywhere but couldn't find it
I know the chances of anyone answering are slim, but how do you make the black opacity overlay be on every single page ? Do you need to add it manualy on each route or
hi, I followed your tutorial, but at 46:01 in the length section I got the message "TypeError: Cannot read properties of undefined (reading 'length')" how to solve this problem?
Good job bro. Keep it up
@codecommerce
2 жыл бұрын
You’re awesome dude!
Thanks a lot
@codecommerce
Жыл бұрын
Thank you sir
Always with the quality content bro.. can you do something with seo next time.
@codecommerce
2 жыл бұрын
That’s a great idea!
great job 🔥🔥
@codecommerce
2 жыл бұрын
Thanks bro!
Amazing tutorial, clear, and straight forward, easy to follow and understand, super cool, thanks. And one question is how to set up when you are editing, the browser auto refresh before you hit saving file ?
@nargizahahahaha7360
Жыл бұрын
turn on autosave in VS code settings
15:40 heading inside Hero throws and error heading does not exist on type insrinsicattributes any solution?
Once I Get In The Top Ten s Your My Credit ;)
Hi .. I always follow your tutorial but today I got an error and I cant understand what is it Unhandled Runtime Error Error: Hydration failed because the initial UI does not match what was rendered on the server.
Thanks, really nice video. I was trying to set an own image (which is on my pc) as the background instead of the one from unsplash, but just couldnt figure it out. Any help maybe?
@codecommerce
Жыл бұрын
Instead of the URL you can use the local path :)
I loved the content man, keep it up! Please make a video about building a modern website for a coffee shop so you can show us some of the different features
@fantasticyuvi8104
2 жыл бұрын
Sir can you please tell how to get Images in slider.jsx from local computer instead of images from unsplash , I'm new to tailwind just learning , I have searched everywhere but couldn't find it
@codecommerce
Жыл бұрын
You can import locally :)
@codecommerce
Жыл бұрын
I do enjoy coffee ☕️
How to make the transition from the right side?
Hi Clint, my folder has app instead of pages like yours. There are app/contact.jsx, layout.js, page.jsx and work.jsx. I followed your instructions but when you click on Work and Contact in the nav, it still shows 404. Any idea what I did wrong?
@codecommerce
Жыл бұрын
I see, this is an older video with the older version of nextjs. You likely have nextjs13 running. Layout is just slightly different.
@Eddie666x
11 ай бұрын
hi, i have the same error, is a layout problem, did you manage to solve it?
you are making me a frontend dev bro
@codecommerce
2 жыл бұрын
That’s awesome dude!!
Hey I know this is an old vid, but I am trying to use , but it doesnt seem to work. It doesnt find the "contact.jsx" file. I have it in the src/app folder and when I try to type in the search bar or click the link I just get 404 error.
@Eddie666x
11 ай бұрын
hi, i have the same error, is a layout problem, did you manage to solve it?
@jaysonsfleece
11 ай бұрын
@@Eddie666x No sorry I havent.
First off, thanks for the great video, awesome content there. Just a question, In terms of maintainability, do you think that tailwind is still ok with this huge amount of code inside each component? Would you rather prefer standard css, maybe with some pre-processor to avoid component bloatness? Thanks in advance
@codecommerce
Жыл бұрын
I suppose it depends on the application. I haven’t used tailwind in any larger production apps, only smaller and more personal projects. It’s just so fast when it comes to deving.
@jorgesalcedo2063
10 ай бұрын
It's actually not a lot of code! The whole point of tailwind is to build manageable and modular css. Now the view is comprised of markup and styling, those are coupled, hence why you'd 'want' them together. It's easier to maintain and extend in the future with more than one developer being inline.
Super Tuts !! In general, is it better to use React Router Dom V6 in Next.js project ? Thanks Edit : I got my response Next.js has a file-system based router built on the concept of pages. When a file is added to the pages directory, it's automatically available as a route. The files inside the pages directory can be used to define most common patterns Enjoy your video from France.
@codecommerce
2 жыл бұрын
Yessir! Next builds all of that behind the scenes! Pretty awesome!
heading or mesage props are not working with me whats the problem with me tell me sir
I failed right at the beginning as my yarn create next-app . installed but did not look like anything you had...no pages folder, or styling folder so didn't know where to start
@codecommerce
Жыл бұрын
Next JS 13 does look a little bit different.
@Eddie666x
11 ай бұрын
hi, i have the same error, is a layout problem, did you manage to solve it?
@Eddie666x
11 ай бұрын
hi, can you help us with the new configuration for layout pls ?@@codecommerce
what plugins are you using for autocomplete to be specific. Also my normal css intelligence kinda messed up after installing tailwind did that happen to you and what did you do to fix it
@codecommerce
2 жыл бұрын
I haven't noticed them conflicting in my code editor. I use tailwind intellicence for tailwind and the React/Redux ES7 Snippets
@dalhyprincia917
Жыл бұрын
Hi guys,it happen to me as well ,🫠 did you found a fix for it @Shafiq?
@shafiqbelaroussi1250
Жыл бұрын
@@dalhyprincia917 yea for me it was a plug-in that is tailwind related. I forgot what it was called but If your situation is exactly like mine then think about a recent tailwind plug-in you installed that you don’t really need and remove it. Hopefully that helps you.
@dalhyprincia917
Жыл бұрын
@@shafiqbelaroussi1250 oh thanks Shafiq!gonna give it a try.
I just love the fact you teach using nextjs, that is my Favourite tech stack, I then kill it with tailwindcss.
@codecommerce
2 жыл бұрын
Dude the next/tailwind combo is sick!!!
@josephomotade864
2 жыл бұрын
@@codecommerce true bro A smooth and fast tech like nextjs, with a smooth and beautiful css style. Man that’s a killer right there.
@fantasticyuvi8104
2 жыл бұрын
Sir can you please tell how to get Images in slider.jsx from local computer instead of images from unsplash , I'm new to tailwind just learning , I have searched everywhere but couldn't find it
@josephomotade864
2 жыл бұрын
@@fantasticyuvi8104 what do you mean do you mean you want to get images from your local desktop folder to your app. Pls elaborate.
@fantasticyuvi8104
2 жыл бұрын
@@josephomotade864 yess exactly I want images from local desktop because I want to upload my images in slider, I'm new to this please tell me how to do thata
top of the navbar.jsx file or js file ....have to write 'use client' otherwise useState won't work....thanks
@codecommerce
Жыл бұрын
Yes- this is an old video. Have to include ‘use client’ for client components now.
I can't seem to figure out an error while doing the slider section which starts at the 38min mark. My code looks the same as yours as far as I can see but at the point where you fix and change the config and everything works I still get the following error: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
@codecommerce
2 жыл бұрын
Do you have a GitHub account where the code is?
@Sw33tBabyRays
2 жыл бұрын
@@codecommerce I did not upload it. But after comparing with your code on GitHub I saw that the problem was my import. Wasn’t importing Image properly.
For some reason smooth scroll is not working for me the only difference is i built the app with typescript any ideas what might be wrong ?
@codecommerce
Жыл бұрын
Is it doing anything at all?
The tailwind css is not reflected every time I save the file, I have to manually refresh the page, do you have a solution for this? BTW "npm run dev" is running local server
@codecommerce
Жыл бұрын
“Npm start”
Binding element 'slides' implicitly has an 'any' type.ts(7031) Can anyone help fix this error? It's from the section 41:44.
@SabrinaOSorensen
Жыл бұрын
This fixed it for me: const Slider = ({ slides }: { slides: string }) => { *** rest of code *** }
Sir can you please tell how to get Images in slider.jsx from local computer instead of images from unsplash , I'm new to tailwind just learning , I have searched everywhere but couldn't find it
@andreaswu7973
2 жыл бұрын
upload your images to 'public' folder. on sliderdata.js, change the unsplash images to image: 'yourimage.jpg'
@fantasticyuvi8104
2 жыл бұрын
@@andreaswu7973 thnx a lot sir it worked you are a life saver , so basically whenever and wherever we have to use images we will use it like this only
@fantasticyuvi8104
2 жыл бұрын
@@andreaswu7973 and sir can you also tell my how to put a video from local computer in place of that - landing page image which is same in every section , (gallery section, work , home page ) how to change that with a video.??!!
@codecommerce
2 жыл бұрын
You guys are awesome dude! Thank you!
Hey Sir, Please upload a video on How to use Next Auth Google Provider for authentication with JWT token.
@obey_giant
2 жыл бұрын
He made a video about that like a week ago
@vrajroy1976
2 жыл бұрын
@@obey_giant He used Session in oAuth, but I want to learn how to use jwt tokens in oAuth.
Hello on minute 55:02 when i refresh the page and i click the left button on slides the images just disappears Have a nice day and thank you😃
@i.d.1988
Жыл бұрын
If you have not solved the issue yet, you probably forgot to add slides.length as a variable example const length = slides.length; const nextSlide = () => { setCurrent(current === length - 1 ? 0 : current + 1); };.
The repo isnt working sir
great video sip some water once in a while to avoid that kind of voice distortion :)
@codecommerce
Жыл бұрын
Haha thank you sir!
cannot for the life of me get the scroll effect to work in the navbar
59:02
Can you build a e-commerce site?
@codecommerce
2 жыл бұрын
That will be coming in the future!
Where source code?
Thanks for the great tutorial, I goota issue while coding the navmenu, as per your tutorial you didn't added 'handleNav' function in the mobile section div, my code was giving error, I have solved the solution with {nav ? : }
"left-[-100%]" didn't work for me but "-left-full" did. Hope this helps someone as it tripped me up a bit.