Build SEO Optimized Blog with Next.js, Tailwind CSS & Contentlayer – Full Tutorial

Course developed by @CodeBucks

⭐️ Contents ⭐️
⌨️ (0:00:00) Intro + Demo
⌨️ (0:10:10) Setup and Installation
⌨️ (0:13:34) Tailwind CSS Setup, Dark Mode and project files
⌨️ (0:19:09) Adding Fonts
⌨️ (0:26:56) Navbar Component
⌨️ (0:46:31) Setup Contentlayer
⌨️ (1:08:31) How to render a Blog
⌨️ (1:13:11) Creating Home Cover Section
⌨️ (1:34:16) Featured Posts Component
⌨️ (1:50:11) Recent Posts Component
⌨️ (2:00:46) Footer Component
⌨️ (2:16:31) Blog Page
⌨️ (3:02:06) Creating TOC Component
⌨️ (3:20:51) Category Page
⌨️ (3:45:31) About page
⌨️ (3:58:26) Contact page
⌨️ (4:14:11) Insights Component
⌨️ (4:23:41) Store blog views using Supabase
⌨️ (4:49:16) Adding SEO
⌨️ (5:18:36) Adding Dark Mode
⌨️ (5:30:36) Making it Responsive

⌨️ Adding Sitemap
⌨️ Image Optimization
⌨️ Adding Favicon and manifest file
⌨️ Adding google's structured json-ld for SEO

Correction:

🎉 Thanks to our Champion and Sponsor supporters:
👾 davthecoder
👾 jedi-or-sith
👾 南宮千影
👾 Agustín Kussrow
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Justin Hual
👾 Otis Morgan
👾 Oscar Rahnama

--

[YYHo-kwbi]

I am following your tutorial step by step. The explanation is so intuitive!

[thekontuli]

Found and ran with this before the top-dogs 😉
Great minds think alike...

[CodeBucks]

I hope you all enjoy and learn from this tutorial!✨ Big thanks to Beau and Freecodecamp!🙌

[dragosabalasi]

can we acknowledge the fact that the time on his computer says 3AM

[slimiissa]

Thank you, thank you, thank you, I was wating it, thank you very much

[oluwaseunladeinde]

Thank you for sharing @codebucks. It's very easy to follow. The way you took us through the journey was really worth the time. Would check the final part for sure.

[webdesign]

Unhandled Runtime Error
Error: either NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY env variables or supabaseUrl and supabaseKey are required! - How to solve this error - please update updated code with Git repo also

[falcongold]

40:45 for icons from svg to react component
43:00
2:43:40
3:44:00
4:16:07
4:20:00
4:42:00

[Yahya_Umar]

I enjoyed your videos! Do you have any plans to create a tutorial on building an inventory management system using Next.js? Your tutorials are fantastic, and I'd love to see one on this topic! I also want to include some Python and machine learning, as well as utilize free APIs for data integration.

[mahendranath]

Thank you so much for a great content✌👌👏🙌🤞👍

[ctrl-shift-run]

Looks brilliant and I'm going to follow along with a new finance and python blog that I'm starting. Although I wonder why I wouldn't just go and use wordpress.

[Davidgetz]

I loved it all until I realized that contentLayer is not supported in nextjs 14. I have to change some code in json.oackage but I am uncomfortable with the idea of ​​it not being supported in contentlayer anymore. If you look, the official page no longer shows the documentation.

[FatemehDamarchilou]

It isn't possible to thank you enough

[barcannon]

I just completed my course no. 419 and FCC now wants me to learn one more

[timothy]

Contentlayer doesn't work with Nextjs 14. npm ERR is the result. Forcing it will not help as well and now that the contentlayer website's down and has been down since last week or more. Lost my confidence for this library and will not be considering it for future MDX-related projects.

[cforcoder]

I am also Writting tech blogs in hashnode 😊

[warrenb]

4:33:30 SQL Query (I wish this was in the source code) I spelled "function" incorrectly and the Suprabase AI did not find it, so I would ignore their AI for now. I hope this helps one person.
create
or replace function increment (slug_text text) returns void AS $$
declare view_id int;
begin

select id into view_id from views where slug = slug_text limit 1;

if view_id is not null then
update views set count = count + 1 where id = view_id;
else
insert into views (slug, count) values (slug_text, 1);
end if;
end;
$$ language plpgsql;

[eleah]

Very good. I'd like to redo this in remix if I could ever get around to it.

[aadames]

Why are the line numbers present before you added the showLineNumbers to the code?

[biscotty]

For some reason, in the sortBlogs function ca. 1:15 I needed to wrap `blogs` in curly braces both in the arguments in `utils/index.js` and in the call in `HomeCoverSection.js`. Using simply `(blogs)` gave an error.