Build a Blog with Next.js and a Headless CMS (Strapi)
In this video we'll build a blog application from scratch, starting with only a simple design in Photopea. I will first implement the design to a modern front-end web application using the Next.js framework and React.js. After that we will setup a Headless Content Management System (CMS) and integrate it with Next.js. I will also demonstrate how to setup next so that it statically generates all of the blog pages during build time for optimal performance. Along the way we'll touch on multiple interesting concepts, such as project structure, utility-based stylesheets (CSS) architecture, building reusable and responsive card components with container queries, fetching data with async/await and more.
0:00 Introduction
0:24 Design
0:46 Create a Next.js Application
4:15 Adding SASS and Global Styles
6:55 Grid System
12:48 Fonts
15:05 Typography
18:30 Header Component
22:12 Footer Component
25:25 Card Component
1:00:05 Blog Details Page
1:06:04 Headless CMS (Strapi) Setup
1:14:44 Integrate Strapi with Next.js
References:
- nextjs.org/docs
- docs.strapi.io/dev-docs/intro
Social Media:
Email: nikola.n.lazarov@outlook.com
Twitter: / nikelaz
LinkedIn: / nikola-lazarov
#headless #cms #nextjs
Nice video,keep it up. Data 'slug' can also been generated by UID select and link the title to it, then the slug will automatic been the title with dashes.
Great walk tough, learned a lot, thanks for sharing!
Thank you! I’m glad you learned something new!
Awesome video, I was mostly interested in the Strapi part, but the video is probably super helpful to put all pieces together for people who are just starting.
Thank you!
Thank you for this video! before watching it I was so confused of how I need use strapi with nextJS, now it's all good.
Thank you! I’m glad you got some clarity!
loved it! amazing tutorial. your channel will go places for sure!
Thank you! Glad you liked it!
Thank you for this. Subscribed!
Thank you!
Was really hoping to see some more technical content modelling techniques and decisions. Please consider making a video like this and a blog maybe. I appreciate the consistent clarification on Strapi concept and terminologies. Thank you
More on Strapi / NextJS please! Like comment systems, or Tailwind CSS etc - this video was great, have subbed.
Thank you! I will definitely make more videos on Strap and Next. I have a lot of videos on Next.js already, including a full course. I will probably make one or more videos and explore Strapi in-depth as it is an interesting topic.
Awesome tutorial. Thanks for posting this!
My pleasure!
I love your organization. Very well made video. As someone who has been coding for a few years but still has a lot to learn, I have to say, you're truly a master of styling. I can see that very clearly. Your code is just phenomenal. Your structure is perfection. Going to follow everything you post.
I’m very glad you enjoyed the content. Thank you for the praises, you’re too kind!
Awesome brother! I learnt a Lot!
By far the best nextjs / strapi video I have ever seen ❤
Thank you! I'm very glad you enjoyed it!
@@nltech1btw, do you have this on your github? I searched for it but couldnt find it.
best video so far on Next js 13 app router and connecting to Strapi cms⭐, can you Please go deep in the new next js app router , and Strapi cms in feature videos it help will me a lot, because finding the good tutorials like this is so Rare.
Thank you! I do plan to make future videos with Strapi and explore its functionalities more in-depth because there are a lot of capabilities. Regarding Next.js's app router, I don't know if you have taken a look at my Next.js series. My idea was exactly to explore the new router in-depth with a lot of technical details about how it works underneath and I believe I have a few videos that do just that.
@@nltech1 Thanks , waiting for new videos , keep it up.
Nice tutorial Sir. After the restriction on roles for free users was removed, Strapi became extremely amazing.
Thank you! I couldn't agree more. I personally recommend Strapi for a wide range of projects I'm involved with which require a CMS.
Greets from your neighbor Türkiye 🇹🇷
subscribed!
Thank you!
Amazing tutorial
Glad you liked it
Awesome video!!!❤❤❤ Please🙏 make more videos and explore relational data model Strapi in-depth
Thank you! Will do!
amazing video.
Thank you!
Hello! That was a great video. Is there another way to fetch a blog using the blog ID while still maintaining the slug in the URL? This approach would improve performance compared to fetching all blogs and then filtering for the one you need.
thanks for the video, I like the way you talk. but I did not understand why you do not use semantic elements in the development of the blog, so that there is more benefit from learning?
To get your rem values you needed to divide pixels by 16, not 18. Its browsers default typography size usually
I do that because the base font size in this case is set by me to 18 and the design takes that base font size into consideration.
great tutorial, thanks! but the link to your linkeding profile is not working
You are correct. I fixed it. Thank you!
Can you please give me this github link, I need to review some things I don't understand
Awesome video!!! 🙌 Please make a Notion clone using Next.js stack, Prisma, PostgreSQL, Next-Auth, React-Hook-Form + Valibot, Shadcn UI, Typescript, Tailwind CSS.... Thank you very much! ❤❤❤❤❤
Thank you! Glad you liked it. I already have planned the upcomming videos and I have plans to build similar applications to Notion.
Awesome Video !! Please Share Project link as well
Thank you! Unfortunately I by mistake I didn't share or keep the project files for this video. Will make sure to include them in my next videos.
how would you push to production on vercel platform? could you make a tutorial on how to do that bro?
Nice video - just my 2c, I'd probably spend less time on the styling - of the hour and a half video an hour of it is purely styling/setup. Great work though, really enjoyed the Strapi stuff.
Thanks! I debated a lot weather I should include a large styling part, but in the end decided to include more content knowing that you can skip with the timestamps. I will using more ready-made components for faster styles next time tough, as this really is very extensive.
I loved Strapi when learning the basics. Afterwards due to the terrible support / documentation which constantly is changing I lost too much time and the projects became inefficient when too much custom logic was part of it. There is a community and even a discord group - however more or less every second fancy issues will never be solved. Also the field ui is not usable for heavy content cms solutions. The UX is only usable when you have just a handful fields. There is also no native build in conditional field validation for forms in the backend. This is a no go for a modern CMS. Its so sad - as Strapi has a fantastic service container also the backend framework is great.
Sorry to hear that. What CMS do you use now for content-heavy sites? I'm curious because I use enterprise CMS systems every day (on very content-heavy corporate sites) and they have pretty much the same UX.. just fields in a stack. I would be interested to explore a CMS that has a better content editing UI, because I agree it is quite tedious managing content in a content type with like 70 fields in a stack layout.. just haven't found anything better so far.
I haven’t found it eather. Sanity has definitely more CMS abilities. But it’s not free.
pls where can I get the images and files used in this video so I can finish the project
I'm have an error in button.js: "'const' declarations must be initialized" The console message underlines "Button" in "const Button.Icon = ({ iconType }) => {" But I can't find it. Any idea what I should be looking for?
It's just "Button.Icon", without the "const" *Edit: Oh, I just saw you already got to the right answer :)
I didn't get why I'm getting a different object structure from api ? On youy video at 1:14:18 you're getting the data array with contains the Content field and html-data inside but I'm getting a huge markdown object inside of the Content field with a lots of properties like paragraph , heading and etc. Is this customize some how or did the strapi developers just change the response body ? I'm using 4.16.2 version , on your video you used 4.12
There are two different rich text fields in Strapi - markdown and blocks. Apparently you chose the blocks type which is why you are seeing this response. I have a video on how to render that field type as well: Render a Rich Text (Blocks) Field in React 🚀 Strapi Course #9 kzhead.info/sun/l76GqJFui6OCiYU/bejne.html
@@nltech1 Cool, thanks for the link. I found an other solution it's CKeditor.
Great lesson but no instructions on how to put it into production now. Ideally it should be some free heroku and vercel. This would be very useful, please make a video like this
Thank you! I will definitely make a video on that topic. I’m still not sure on the exact format but once I clear up the idea I will make it. Ideally I want to cover multiple cloud providers.
💪👌 Thank you @@nltech1
why strapi cms updates is not getting reflected in next js ?
disable cache on your browser. Inspect, go to network, disable cache, refresh page.
As the @workplayproductions8358 pointed out, the most likely reason is you are running into cache. Next will automatically cache requests. If you are running in dev mode, just hard refresh with ctrl + f5 and you should see the new data. Alternatively you can also completely disable the cache.
could you do the same tutorial using headless wordpress?
I will definitely do a future video which will incorporate headless WordPress. I am not sure at which point I'll get to that tough, as I have multiple interesting topics planned before that.
@@nltech1 oh okay! subscribed for future videos..
headless wordpress is seriously a nightmare
@@secretarybailey770 that is true but you cannot deny the fact that wordpress is currently the most popular CMS platform, thus it's better to stay updated with technologies being used heavily in the market.
How do you host it?
when deploying my next.js. app how will i be able to access the strapi admin panel from my next app?
You need to deploy the Strapi and Next.js applications. They are two separate applications, but you can run them on the same server depending on the scale of the application.
At 44:12 it seems like you also get the same error 🧐 but your page still renders. curious
And at 44:42 you delete 'const' from the beginning of the line. I missed that the first few times I watched.
Yes, you found the issue. Button is already defined in this type, my intention was to add another property to it - Icon. As a component is also an Object, I can do that. It’s not absolutely necessary tough, you can just define a ButtonIcon component in the same file and some people prefer that style.
Nice video, but shouldn't the blog pages be static with use client? Doing it server-side wouldn't be efficient for SEO purpouses
Could you elaborate why you think that client-side rendering would be more efficient for SEO purposes? Generally, a server-side rendered page is regarded as more SEO friendly the page is pre-rendered on the server and every crawler can retrieve the page metadata and pre-rendered content. Also keep in mind that most modern search engines handle client-side rendered pages very well as well, as the robots will render JavaScript.
where is the git repo for the next js ?
Very good video. How could I give my client an admin panel so they can upload, modify and delete their post, without having authentication. Thank you so much!
The admin panel for content management would be the Strapi admin. I don't think there is an option to give your client access to it without authentication because that is very unusual. That way anyone with a specific URL would be able to change the content? That is very unsafe and you will not find it implemented in any content management system by default. You would have to create a custom user interface with that, which makes post requests to an API (you can achieve that with Strapi), but I would advise you strongly against that. Why not just create an account for your client and give him the appropriate permissions, so that he can edit only what he needs? That's the standard workflow when working with content management systems.
Of course, that's what I was referring to. That is, I could use Strapi to invite my client and thus, I could give him Content Editor permission, which from the administration panel in configuration I can send an invitation to my client with the role of "Editor" and thanks to this I save myself from creating a Login in my front, plus my client did not ask me for that. Would you know where I could deploy Strapi? Should I just send him the deployment link so he can use the Strapi admin panel? Thank you very much for the previous response!
What about deployment
please instruct me 1:28:52s, I don't understand
I can't seem to install strapi on my macbook Air. It's always throwing errors
Make sure you have Node.js LTS version 18 or 20. You also need Python if you want to use Strapi with SQLite (which is the database used for the default development quickstart project). Beyond that you could be getting errors for many reasons, but with the provided info, I can only give you some information about the dependencies.
You should add timestamps.
You're right. I had timestamps, which got lost at some point or I did not save them correctly. I added them again, thanks!
hi can you share source code?
100th comment
✌️ 'Promo sm'
Meaning i need to spend 2 hours just to connect a CMS to Next.JS? No, thanks, i'll stick to hard-coded pages and content then.
If that works for you, it's fine. With larger scale projects that is no longer an option and non-technical people need to edit content as well. A more lean option for small sites is a static site builder using files as content source like markdown. It's frequently used for blogs and documentation sites for example. Just mentioning it in case you are exploring other options.
@@nltech1Makes sense. Whhat's the static site buider? That think where you don't make a frontend yourself but instead put some ready-made awful looking components onto your website?
Half the tutorial is a CSS course. Wasted time.
Lol don't call yourself a frontend developer if you don't like css. Go do something else. The video was great and Informative. I loved the unique way of using saas with next. It was amazing.
@@kiranmagadum5330 Read the title of this course. Re-assess your comment. Don't call yourself a DEVELOPER, period. Such a shame.
@@kiranmagadum5330your pfp says all... This tutorial is indeed a waste of time
Attempting to validate button.js I get "Identifier 'Button' has already been declared" on the Button.Icon line.