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.
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.
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
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.
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.
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.
Hey, great video that's very helpful for me as a beginner. I'll have a look on more of your content! Do you have an idea for a tutorial to setup your dev tools, like you did. Like compiling after each step and so on? Regards Oliver
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?
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 th-cam.com/video/dZMx-6TqLVM/w-d-xo.html
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.
Absolutely. It is open source, so you have 0 costs and user friendly (so that you can train them to use the CMS easily). You just have to figure out a good deployment process (and cloud provider) to simplify that for your clients.
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.
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.
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.
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.
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?
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.
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.
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!
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.
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.
@@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.
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?
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.
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 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!
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
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.
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!
Preeetty amazing! This video really helped me. Thank you!
@@cassiaqueiroz5512 Thank you! I’m glad you found it helpful!
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.
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.
Greets from your neighbor Türkiye 🇹🇷
Awesome tutorial. Thanks for posting this!
My pleasure!
Awesome video!!!❤❤❤
Please🙏 make more videos and explore relational data model Strapi in-depth
Thank you! Will do!
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.
Loved the Strapi part ! thanks man ! Subscribed
What is the best way to deploy then ? any free option ?
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.
Great walk tough, learned a lot, thanks for sharing!
Thank you! I’m glad you learned something new!
Hey, great video that's very helpful for me as a beginner. I'll have a look on more of your content! Do you have an idea for a tutorial to setup your dev tools, like you did. Like compiling after each step and so on?
Regards
Oliver
Thank you for this. Subscribed!
Thank you!
great tutorial, thanks! but the link to your linkeding profile is not working
You are correct. I fixed it. Thank you!
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.
Awesome brother! I learnt a Lot!
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
th-cam.com/video/dZMx-6TqLVM/w-d-xo.html
@@nltech1 Cool, thanks for the link. I found an other solution it's CKeditor.
Can you please give me this github link, I need to review some things I don't understand
If you‘re here for strapi, jump to 1:06:31
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.
Hi would you recommend strapi as a cms for freelance websites?
Absolutely. It is open source, so you have 0 costs and user friendly (so that you can train them to use the CMS easily). You just have to figure out a good deployment process (and cloud provider) to simplify that for your clients.
@@nltech1 thank you!
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
amazing video.
Thank you!
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.
Thanks for this video it is really helpful sub to you and liked the vid
Amazing tutorial
Glad you liked it
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
how would you push to production on vercel platform? could you make a tutorial on how to do that bro?
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.
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 :)
subscribed!
Thank you!
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.
where is the git repo for the next js ?
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.
What about deployment
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.
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.
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!
please instruct me 1:28:52s, I don't understand
How do you host it?
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.
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.
hi can you share source code?
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!
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
100th comment
✌️ 'Promo sm'
Attempting to validate button.js I get "Identifier 'Button' has already been declared" on the Button.Icon line.