Build Blog App with Next.js 14 | Strapi v4 Headless CMS and Tailwindcss

00:05 Overview of Strapi v4
02:45 Learn More (Resource)
04:00 Create next js 13.5+ project
06:30 Design Layout with Tailwindcss
08:35 Create and design categories components
13:20 Create and design blogs components
19:30 Create and design blog detail page
26:25 Create Strapi Project and Overview
29:10 Create Blogs and Categories collections
32:50 Add Data in Strapi Dashboard for Blogs and Categories
36:35 Create Strapi Api Token
37:40 How to make strapi apis public
40:00 use strapi access token in next js 13
41:35 Integrate strapi api for categories in next js 13
48:10 Integrate strapi api for blogs in next js 13
57:10 Integrate strapi api for single blog post
01:05:10 Show blogs for selected category with Context api
01:18:40 Fix few console warnings
01:19:55 Outro

#nextjs13 #nextjs14 strapi #cms #blog

React tutorials:

JavaScript Tutorials and Projects:

Angular Tutorials:

Angular 16 Crash Course For Begineers:

Tech Tutorials - Random:

Join our facebook group:

Contact us for development services:

Source Code (Give it a Star ⭐️ )

[Arshahdul_ahmed]

At 53:00 in your code, you've utilized JavaScript to truncate text length from JSON. However, when solely handling text on the frontend, such an approach could be considered suboptimal. Instead, considering your use of Tailwind CSS, leveraging its utility class "line-clamp" would be more appropriate. This class allows you to specify the number of lines to display based on the width of the parent element, facilitating efficient text truncation.

[GregPeters]

Thank you! I was looking for something exactly like this!

[melkhywong]

it is always the indian youtuber that can makes me understand and stright to the point.

[TopycAI]

You legend. I have been looking for a headless CMS solution for creating extensive content for my SaaS project's organic traffic growth. You helped me SO much!

[devorer]

thank you! really useful nextjs 14 tutuorial

[someone-on-earth]

1:05:27 im using the new app router, so the src folder is not in my installlation, where do I add this context folder ? should it be the same level as the app folder ?

Edit: tried creating the context folder as the same level as that of the app folder, and it worked

[carlobaumgartner]

Started with this - very cool. Can you also show deployment?

[ol]

Thanks man, amazing tutorial!
Is it possible to deploy all together (Next and Strapi )

Appreciate it.

[lebroli]

Cool! thanks. Very well explained. I just having a issue when i change the data in strapi it dosn't reflect on the site, i can see it change it on the localhost server side but it]n the site it just stays with the first information it's grabbed. Is no updated and i have no erros you have an idea why? thanks

[shhboomshhboomz]

Is anyone having trouble with the strapi installation? Im using node.js version 20.0.0 but an error is thrown saying im using node.js version 21.1.0? Any help with this is greatly appreciated.

[digitalgyaniofficial]

what if i want "all blogs" button?

[galihdc]

TypeError: Cannot read properties of undefined (reading 'data'). how to solve this pls, this error coming from components/Blogs

[ignaciofigueroa]

Great! how can I deployment the project?

[vicentecarita]

No funciona.. Hay información que falta, porque incluso con tus mismos archivos no funcionan.

[farhadjaman]

very basic level tutorial, you didn't event cover all the CRUD operation from the frontend.