Тёмный

Build a Blog with Next.js and a Headless CMS (Strapi) 

NL Tech
Подписаться 3,7 тыс.
Просмотров 47 тыс.
50% 1

Опубликовано:

 

29 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 109   
@vothanhtien4869
@vothanhtien4869 8 месяцев назад
Can you please give me this github link, I need to review some things I don't understand
@CristianIntriago_
@CristianIntriago_ 6 месяцев назад
Awesome brother! I learnt a Lot!
@MrSeredan
@MrSeredan 6 месяцев назад
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?
@PavelDonchev
@PavelDonchev Год назад
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.
@nltech1
@nltech1 Год назад
Thank you!
@dhaloh
@dhaloh 8 месяцев назад
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.
@nltech1
@nltech1 8 месяцев назад
I’m very glad you enjoyed the content. Thank you for the praises, you’re too kind!
@sujalvanjare06
@sujalvanjare06 Год назад
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.
@nltech1
@nltech1 Год назад
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.
@sujalvanjare06
@sujalvanjare06 Год назад
@@nltech1 Thanks , waiting for new videos , keep it up.
@fodortibor95
@fodortibor95 8 месяцев назад
great tutorial, thanks! but the link to your linkeding profile is not working
@nltech1
@nltech1 8 месяцев назад
You are correct. I fixed it. Thank you!
@instrido580
@instrido580 8 месяцев назад
Half the tutorial is a CSS course. Wasted time.
@kiranmagadum5330
@kiranmagadum5330 6 месяцев назад
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.
@instrido580
@instrido580 6 месяцев назад
@@kiranmagadum5330 Read the title of this course. Re-assess your comment. Don't call yourself a DEVELOPER, period. Such a shame.
@electrolyteorb
@electrolyteorb 5 месяцев назад
​@@kiranmagadum5330your pfp says all... This tutorial is indeed a waste of time
@muradqumizakis8428
@muradqumizakis8428 8 месяцев назад
when deploying my next.js. app how will i be able to access the strapi admin panel from my next app?
@nltech1
@nltech1 7 месяцев назад
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.
@arsenico-of3yn
@arsenico-of3yn 5 месяцев назад
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.
@mariusorani
@mariusorani 3 месяца назад
If you‘re here for strapi, jump to 1:06:31
@Nicklessable
@Nicklessable 11 месяцев назад
loved it! amazing tutorial. your channel will go places for sure!
@nltech1
@nltech1 11 месяцев назад
Thank you! Glad you liked it!
@cassiaqueiroz5512
@cassiaqueiroz5512 2 месяца назад
Preeetty amazing! This video really helped me. Thank you!
@nltech1
@nltech1 2 месяца назад
@@cassiaqueiroz5512 Thank you! I’m glad you found it helpful!
@VeiloR
@VeiloR 2 месяца назад
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
@rickydawn4431
@rickydawn4431 Год назад
More on Strapi / NextJS please! Like comment systems, or Tailwind CSS etc - this video was great, have subbed.
@nltech1
@nltech1 Год назад
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.
@devewu672
@devewu672 Год назад
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.
@nltech1
@nltech1 11 месяцев назад
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.
@Trip2Saturn
@Trip2Saturn 11 месяцев назад
I haven’t found it eather. Sanity has definitely more CMS abilities. But it’s not free.
@MrSonicastra
@MrSonicastra 5 месяцев назад
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.
@copaceticobserver
@copaceticobserver Месяц назад
Hi would you recommend strapi as a cms for freelance websites?
@nltech1
@nltech1 Месяц назад
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.
@copaceticobserver
@copaceticobserver Месяц назад
@@nltech1 thank you!
@MaximeOnDev
@MaximeOnDev 3 месяца назад
Loved the Strapi part ! thanks man ! Subscribed What is the best way to deploy then ? any free option ?
@salmaabousaid1745
@salmaabousaid1745 Год назад
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.
@nltech1
@nltech1 Год назад
Thank you! I’m glad you got some clarity!
@Love-id8gu
@Love-id8gu Год назад
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! ❤❤❤❤❤
@nltech1
@nltech1 Год назад
Thank you! Glad you liked it. I already have planned the upcomming videos and I have plans to build similar applications to Notion.
@everurstruly
@everurstruly 8 месяцев назад
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
@rutdvajrawal7933
@rutdvajrawal7933 2 месяца назад
Thanks for this video it is really helpful sub to you and liked the vid
@GUCMAJ
@GUCMAJ Год назад
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
@nltech1
@nltech1 Год назад
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.
@GUCMAJ
@GUCMAJ Год назад
💪👌 Thank you @@nltech1
@secretarybailey770
@secretarybailey770 Год назад
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.
@nltech1
@nltech1 Год назад
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.
@zergzerg4844
@zergzerg4844 8 месяцев назад
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
@nltech1
@nltech1 7 месяцев назад
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 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-dZMx-6TqLVM.html
@zergzerg4844
@zergzerg4844 7 месяцев назад
@@nltech1 Cool, thanks for the link. I found an other solution it's CKeditor.
@artistejiro
@artistejiro 8 месяцев назад
I can't seem to install strapi on my macbook Air. It's always throwing errors
@nltech1
@nltech1 8 месяцев назад
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.
@TestDemo-x3g
@TestDemo-x3g 11 месяцев назад
Awesome video!!!❤❤❤ Please🙏 make more videos and explore relational data model Strapi in-depth
@nltech1
@nltech1 11 месяцев назад
Thank you! Will do!
@DailyMindfulMotivations
@DailyMindfulMotivations 9 месяцев назад
By far the best nextjs / strapi video I have ever seen ❤
@nltech1
@nltech1 9 месяцев назад
Thank you! I'm very glad you enjoyed it!
@DailyMindfulMotivations
@DailyMindfulMotivations 9 месяцев назад
​​@@nltech1btw, do you have this on your github? I searched for it but couldnt find it.
@zzzzzzzzzzzzzzzzzzz13142
@zzzzzzzzzzzzzzzzzzz13142 9 месяцев назад
Greets from your neighbor Türkiye 🇹🇷
@editin232
@editin232 Год назад
Great walk tough, learned a lot, thanks for sharing!
@nltech1
@nltech1 Год назад
Thank you! I’m glad you learned something new!
@rafalmo5258
@rafalmo5258 Год назад
Nice tutorial Sir. After the restriction on roles for free users was removed, Strapi became extremely amazing.
@nltech1
@nltech1 Год назад
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.
@kashyapkumbhani3457
@kashyapkumbhani3457 Год назад
Awesome Video !! Please Share Project link as well
@nltech1
@nltech1 Год назад
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.
@DarianBenam
@DarianBenam 9 месяцев назад
Awesome tutorial. Thanks for posting this!
@nltech1
@nltech1 7 месяцев назад
My pleasure!
@kevyyar
@kevyyar 6 месяцев назад
how would you push to production on vercel platform? could you make a tutorial on how to do that bro?
@amza_web
@amza_web 6 месяцев назад
pls where can I get the images and files used in this video so I can finish the project
@randyharsh3046
@randyharsh3046 6 месяцев назад
hi can you share source code?
@scorpion32
@scorpion32 5 месяцев назад
What about deployment
@josephgodwin8729
@josephgodwin8729 Год назад
Thank you for this. Subscribed!
@nltech1
@nltech1 Год назад
Thank you!
@berkeleystudentcooperative
@berkeleystudentcooperative Год назад
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?
@kyjano
@kyjano 11 месяцев назад
It's just "Button.Icon", without the "const" *Edit: Oh, I just saw you already got to the right answer :)
@zoki5388
@zoki5388 Год назад
You should add timestamps.
@nltech1
@nltech1 Год назад
You're right. I had timestamps, which got lost at some point or I did not save them correctly. I added them again, thanks!
@iamyaaay5825
@iamyaaay5825 5 месяцев назад
To get your rem values you needed to divide pixels by 16, not 18. Its browsers default typography size usually
@nltech1
@nltech1 5 месяцев назад
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.
@mikhacavin
@mikhacavin Год назад
subscribed!
@nltech1
@nltech1 Год назад
Thank you!
@Benthetech-qn2lf
@Benthetech-qn2lf 5 месяцев назад
100th comment
@adriangonzalez2659
@adriangonzalez2659 10 месяцев назад
Nice video, but shouldn't the blog pages be static with use client? Doing it server-side wouldn't be efficient for SEO purpouses
@nltech1
@nltech1 10 месяцев назад
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.
@okopyl
@okopyl 7 месяцев назад
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.
@nltech1
@nltech1 7 месяцев назад
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.
@okopyl
@okopyl 7 месяцев назад
​@@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?
@vothanhtien4869
@vothanhtien4869 8 месяцев назад
please instruct me 1:28:52s, I don't understand
@divyanshugupta1042
@divyanshugupta1042 Год назад
could you do the same tutorial using headless wordpress?
@nltech1
@nltech1 Год назад
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.
@divyanshugupta1042
@divyanshugupta1042 Год назад
@@nltech1 oh okay! subscribed for future videos..
@secretarybailey770
@secretarybailey770 Год назад
headless wordpress is seriously a nightmare
@divyanshugupta1042
@divyanshugupta1042 Год назад
@@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.
@facundomarconi9561
@facundomarconi9561 11 месяцев назад
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!
@nltech1
@nltech1 11 месяцев назад
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.
@facundomarconi9561
@facundomarconi9561 11 месяцев назад
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!
@sahasdangol1778
@sahasdangol1778 9 месяцев назад
amazing video.
@nltech1
@nltech1 9 месяцев назад
Thank you!
@TimBresnon
@TimBresnon 8 месяцев назад
where is the git repo for the next js ?
@losmandev
@losmandev 6 месяцев назад
How do you host it?
@berkeleystudentcooperative
@berkeleystudentcooperative Год назад
At 44:12 it seems like you also get the same error 🧐 but your page still renders. curious
@berkeleystudentcooperative
@berkeleystudentcooperative Год назад
And at 44:42 you delete 'const' from the beginning of the line. I missed that the first few times I watched.
@nltech1
@nltech1 Год назад
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.
@randalgomez4522
@randalgomez4522 11 месяцев назад
✌️ 'Promo sm'
@harik2791
@harik2791 Год назад
why strapi cms updates is not getting reflected in next js ?
@besthealthyyou
@besthealthyyou Год назад
disable cache on your browser. Inspect, go to network, disable cache, refresh page.
@nltech1
@nltech1 11 месяцев назад
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.
@amidoucisse4415
@amidoucisse4415 11 месяцев назад
Amazing tutorial
@nltech1
@nltech1 11 месяцев назад
Glad you liked it
@berkeleystudentcooperative
@berkeleystudentcooperative Год назад
Attempting to validate button.js I get "Identifier 'Button' has already been declared" on the Button.Icon line.
Далее
How to Use WordPress as a Headless CMS
1:12:25
Просмотров 43 тыс.
▼ КАПИТАН НАШЁЛ НЕФТЬ В 🍑
33:40
Просмотров 346 тыс.
The Big Headless CMS Lie (James Mikrut)
18:14
Просмотров 60 тыс.
Only Noobs Build Beautiful Websites
18:13
Просмотров 138 тыс.
Laravel vs Rails for Javascript developers
19:50
Просмотров 2,7 тыс.
Web Dev The Right Way
12:35
Просмотров 33 тыс.