Next.js Blog Website | How to Build a Blog App with Nextjs 13

⭐ Become a full-stack web dev with Zero To Mastery Courses:

👇 Follow Me On Social Media:

(00:00) Intro
(00:05) Welcome
(00:27) What We're Building
(01:39) Basic Project Setup
(03:39) TailwindCSS Setup & Typography
(08:17) Run in dev mode
(10:05) Basic Navbar
(14:10) Profile Image
(18:26) Adding Social Icons to the Navbar
(21:42) Providing default metadata
(22:32) Adding Markdown files for Blog Posts
(24:28) BlogPost type
(25:13) Reading Markdown with gray-matter
(29:23) Posts component
(32:31) ListItem component Pt. 1
(33:42) Formatting dates
(34:56) ListItem component Pt. 2
(37:28) Create a dynamic route
(38:01) Dynamic Post Pt. 1
(40:45) Custom 404 page
(41:04) Generate dynamic metadata
(42:54) Generate HTML from Markdown
(46:29) Dynamic Post Pt. 2
(48:37) Evaluating the Project Build
(51:08) Improving the build with generateStaticParams
(53:37) Features You Can Add

📚 Tutorial References:

🚀 More References & Tools:

#nextjs #blog #website

[greentea]

Hi Dave! I just wanted to tell that I have started learning web dev around 6 months ago. From that point I have watched your big tutorials on Javascript, Typescript, React and Redux. These courses helped me to gain confidence in what I am doing, and now I am very close to getting my first Junior Front-end dev job.

This is possible due to your brilliant courses, so thanks sir and keep it up!

[akintobby]

Dave isn't one of the best. He is the best. Thank you so much for all you do sir✊🙏

[bobdpa]

I really look forward to these next videos. Thanks Dave!

[reniadd]

Hi Dave! wanted to let you know that I really appreciate all your work, thank you! It is amazing how Next.js 13 is changing all the time! Yesterday I had "next": "13.2.4" version and today they have released a new one with a tailwind - "next": "13.3.0"

[DoGzTheFiGhTeR]

I just wanted to say thanks for another great video, Dave. I've watched all of your lessons and I'm over the moon that you're doing next js tutorials. You are by far the best around.💯👍

[codernerd]

The videos series is great, and likely the most up-to-date you can find on YouTube only bad point to mention is that Dave seems to think the SRC directory can't be used with the APP directory this is 100% false those options are completely unrelated. The only thing that the "SRC directory" does is give your project a more clean root and be more organized. By having most of your source code in the SRC directory including the APP folder. It works 100% with the App directory feature.

[sherlockholmes]

Thanks for another insightful video, on a side note, I really do like when you make mistakes while building things because later on you explain what those errors actually are and how you can easily fix those, this will really enhance debugging and code jumping skills for beginners who watch your videos.

[chukwuemekamusic]

thank you Dave... I wish Nextjs will update their site with your code.

[doors]

Friday Tuts from Chef Dave! Beep beep!
😋👍

[thekamol]

We've been waiting for this! Thanks, Dave!

[FalioV]

Another really awesome video. As fellow developer I always appreciate such a smoothly configuration as you did with Tailwind. Because as we know, no matter how good the docs are, there is always a "problem" we need to jump over 😀Once again, good job!

[bruce]

Dave, thanks for taking the time to make these videos and share your knowledge!!!

[benzagon]

Great video Dave! And it works perfectly with Next 14 aswell! 😁

[stonedizzleful]

This is such good content. Exactly what I was looking for!

[drAbubakar-gwiv]

Thanks dave bhai i learn more and more best from your vidios

[hungkietly]

Great tutorial. This helped me a lot. Thanks, Dave.

[ruksharalam]

A concise tutorial on next js. Would love more project based next js tutorials.

[carlandres]

Thanks again Dave! I'm hoping you can make a series about Time Complexity Analysis, maybe in the faraway future!

[kk]

I can easily understand it Thanks a lot Dave!

[DB-dkmj]

Thanks, Dave! All works just like it should!