Blog with Next.js and and Strapi CMS

  Рет қаралды 49,612

Devistry

Devistry

Күн бұрын

Create a blog using the Next.js React framework, and Strapi CMS.
Code: github.com/jgbijlsma/blog_nex...
Discord: / discord
Sections:
00:00 - Intro
06:43 - Installing Next and Strapi
10:00 - Writing blog posts in Strapi
18:26 - Next overview
28:20 - Getting blog post data with next
44:14 - Navbar and routing
48:32 - Styling with Sass
01:01:05 - Building the homepage
01:10:18 - Building the posts overview
01:14:12 - Building the post preview links
01:20:05 - Building post pages
01:32:26 - Rendering markdown content

Пікірлер: 75
@Ctrl_Alt_Elite
@Ctrl_Alt_Elite 2 жыл бұрын
NOTE: June 6th 2022 --> Strapi endpoint to view JSON response is now prefixed with /api/ So to access posts append --> /api/posts
@davidbayoo
@davidbayoo Жыл бұрын
this should be pinned
@Cosmic_Chimp
@Cosmic_Chimp Жыл бұрын
thanks bro
@stephenasiedu76
@stephenasiedu76 8 ай бұрын
What about the description if you style some of the elements it appears in an object form,I Don’t know how to display it
@maxmcleod6817
@maxmcleod6817 2 жыл бұрын
I've been struggling to make a start on my own blog post, I would constantly get lost on what I needed to do next. This video has helped me tremendously! Not only have I learnt some new technologies, but you've helped me get a better idea on how to approach future projects! I'll be building off of your tutorial as a template to create my own blog page to add to my portfolio. Thank you very much for all the help!
@ihsen
@ihsen 2 жыл бұрын
What a gem! I have been using Nextjs for months, but never understood it as I did in this Tutorial. Thank you!
@Neon1024
@Neon1024 2 жыл бұрын
A great tutorial for just making an actual project. Reading about 'Jamstack' it all gets a bit too confusing what tools to use, but here, with Strapi and Nextjs it seems to slot together really well. Good job
@flojj
@flojj Жыл бұрын
Okay I'm sharing just in case some people are following the tutorial as of now (end of 2022), around 42:00 here are some updates: As some people have already mentionned in the comments, the new endpoint to access to strapi data is /api/posts But the new thing is that the request is now also different: one should ask the data object which contains the attributes object which contain our strapi data (title, description, content). Which means: in the getServerSideProps() function, one should: return { props: { posts: postRes.data.data } } } and in the Home() function: {post[0].attributes.title} And everything should be fine :)
@houssincarnelian9562
@houssincarnelian9562 Жыл бұрын
hey flo can you please tell me how to make email verification after user register in strapi
@stephenasiedu76
@stephenasiedu76 8 ай бұрын
What about the description if you style some of the elements it appears in an object form,I Don’t know how to display it
@illhebi
@illhebi 2 жыл бұрын
This has to be one of the best tutorials I've experienced on KZfaq. Thank you so much for the clear explanations and walkthrough :)
@fullmastrinio
@fullmastrinio 2 жыл бұрын
Great vide, thanks for explaining. I looked at other videos and no one touched on the stuff you covered so keep up the good work!
@st1tch204
@st1tch204 2 жыл бұрын
This must be one of the best tutorials I've ever seen, thanks!
@goldenknowledge5914
@goldenknowledge5914 Жыл бұрын
29:50 is the reason why his teaching style is so good. subbed.
@DIN_A8
@DIN_A8 2 жыл бұрын
Thank you so much! This tutorial was really really good and based on what i learned here, i start creating my Portfolio / Personal Web Page. New follower earned
@ddld3873
@ddld3873 2 жыл бұрын
Great video ! You explain everything so clearly thank you !
@kidstoysdiversao6553
@kidstoysdiversao6553 2 жыл бұрын
Thank you so much for this video. You’re an amazing teacher!
@waifufx
@waifufx Жыл бұрын
Thank you very much sir, very good explanation of getStaticPaths and suing SASS was even better.
@SamuOrdieres
@SamuOrdieres 2 жыл бұрын
Really nice project and video. Very usefull. Thank you for sharing!
@lucascubilla869
@lucascubilla869 Жыл бұрын
Thanks for this!, the explanation about the three types of renderings where so clear, for everyone that's struggling to understand watch from 28:30
@slavavisuals
@slavavisuals 2 жыл бұрын
Great detailed video! Thank you so much!
@_isaac_muniz_
@_isaac_muniz_ 2 жыл бұрын
Thank you so much! It would be nice if you had included some SEO tips in the tutorial, cause is the main reason I wanna learn Next.js.
@makhshafzaidi7964
@makhshafzaidi7964 Жыл бұрын
Good Video. Helped a lot.
@MohamedEzzZeeda
@MohamedEzzZeeda 2 жыл бұрын
Great Tutorial that make a good value to me, thanks very mutch.
@rezazimohamedabdessamed5465
@rezazimohamedabdessamed5465 Жыл бұрын
Clean explanation thanks! just in the minute 43:00, when you talked about getStaticProps, yes it executes only once on the build step and deliver the HTML and json on the user request. But in development period it executes on user request as there's no build.
@marijnstollenga1601
@marijnstollenga1601 2 жыл бұрын
Really informative!
@blvckpvnk4498
@blvckpvnk4498 3 жыл бұрын
great video dude!
@jacobroling2287
@jacobroling2287 2 жыл бұрын
Awesome video!
@gauthamvijayan
@gauthamvijayan 2 жыл бұрын
Superb video thanks.
@MaxProgramming
@MaxProgramming 3 жыл бұрын
Wow! We have NextJS video out!
@paullazcano2077
@paullazcano2077 2 жыл бұрын
What a nice video! thanks
@erickwillian5341
@erickwillian5341 2 жыл бұрын
Mando muito, very good explanation!
@abdu1wahid105
@abdu1wahid105 Жыл бұрын
Very good tutorial. Liked.. subscribed. I think I'll try adapting it to use tags and slugUrls instead of ID's as that is more performant for the SEO which NextJS is optimised for. Cheers
@maxjohnson7623
@maxjohnson7623 2 жыл бұрын
Thank you so much!
@carinvid
@carinvid Жыл бұрын
love it!!!!!!!!!!!
@kamalchoudhary8364
@kamalchoudhary8364 3 жыл бұрын
Thank for the amazing video. I have a question that is little beyond this project but relevant. If you could help me, I will be very thankful to you. I am using Cloudinary for media storage. If I upload an image to Strapi, it gets uploaded to Cloudinary correctly. But I receive only that image in Strapi Media Library. I mean I don't get its other versions inside Strapi i.e. thumbnail, small, medium, etc... However, I can see that those images are generated on Cloudinary. On the local version, I am not using Cloudinary and I can see the 3,4 versions of every image in the media library.
@VigneshPT
@VigneshPT 2 жыл бұрын
Thanks a lot, watched the entire video. The link to the repo is broken, so I would really appreciate if you could update the link with the right repo link.
@Gigabyteserviceofficial
@Gigabyteserviceofficial 3 жыл бұрын
how to create our own OAuth server in strapi, so that other sites or apps can use our server as login with our site. just like login with facebook
@marcodev3375
@marcodev3375 2 жыл бұрын
How straps handle media content like images & videos? Where the location actually stored?
@Deepsouthbro
@Deepsouthbro 3 жыл бұрын
This video is great! Any chance you could give us a walkthrough on how to deploy?
@imankit12feb89
@imankit12feb89 3 жыл бұрын
make repo on github.. then upload on vercel
@SarmadGardezi
@SarmadGardezi 2 жыл бұрын
@@imankit12feb89 How to upload on standard hosting ?
@matthewchukwu1306
@matthewchukwu1306 2 жыл бұрын
@@imankit12feb89 Backend deploy. How to deploy Strapi and postgres
@CamiloDominguezH
@CamiloDominguezH 3 жыл бұрын
When you import the css modules react will create a unique name to the class to avoid name clashing.
@Devistry
@Devistry 3 жыл бұрын
Yeah I noticed that. That's nice to have scoped styling. Rather not do it through js objects though.
@ayandak47
@ayandak47 2 жыл бұрын
@@Devistry the github link you put doesn't work??
@candyman3537
@candyman3537 Жыл бұрын
My next app has different structure. I even don't have a pages folder. Instead, I have a pages.tsx and layout.tsx. But I can't add blog page like what you did.
@cryptodev2615
@cryptodev2615 2 жыл бұрын
How do we upload our strapi backend to heroku?
@zergzerg4844
@zergzerg4844 7 ай бұрын
I didn't get it. If I execute npm run build will I get an app with dynamic pages which will be generate a new content added in strapi dashboard , or not?
@nekoneko9135
@nekoneko9135 Жыл бұрын
anyone have the source code? i cant access it, it seems to be deleted or something...
@devilonstudio7587
@devilonstudio7587 2 жыл бұрын
Please, how can I use slug instead of id
@pratt_p1
@pratt_p1 2 жыл бұрын
I don't know if I'll get an answer but I'll still ask, What's the alternative to render that `htmlContent` inside a or a aside from the danger way `` ?
@imApodro
@imApodro 2 жыл бұрын
Hi, it appears that the Git is in 404. What version of Strapi is used ? V3 or v4 ? Thanks!
@blazi_0
@blazi_0 2 жыл бұрын
What about deployment ? I mean we are fetching from local host right?
@tejender_kumar
@tejender_kumar Жыл бұрын
How we are gonna deploy this on vercel?
@gabrielballester8390
@gabrielballester8390 Жыл бұрын
Hi, do you still have the github code repo?
@masrenda
@masrenda 11 ай бұрын
How to deploy this project Mr
@chucrutdr
@chucrutdr 2 жыл бұрын
16:58 my problem is with all that config, i cannot still see anything, 404 not fonud D:
@chucrutdr
@chucrutdr 2 жыл бұрын
solved, new versions includes sub route /api/posts
@tupac0199
@tupac0199 2 жыл бұрын
@@chucrutdr thanks bro
@ArjunKocher
@ArjunKocher 2 жыл бұрын
Were you able to finish the tutorial? I am facing the TypeError: Cannot read properties of undefined (reading 'title') 41:45
@djpe4ka
@djpe4ka 2 жыл бұрын
@@chucrutdr and another structure of response. posts = postsRes.data.data. {posts[1].attributes.title}
@Ctrl_Alt_Elite
@Ctrl_Alt_Elite 2 жыл бұрын
@@djpe4ka Thank you ❤ saved me from a headache lol
@wouteroomen7318
@wouteroomen7318 Жыл бұрын
Is this all doable with the Community Plan from Strapi?
@Devistry
@Devistry Жыл бұрын
AFAIK completely doable.
@GoutamReddydazz
@GoutamReddydazz 2 жыл бұрын
discord link is invalid now
11 ай бұрын
code url dead
@jmoon6048
@jmoon6048 2 жыл бұрын
at 41:54 - TypeError: Cannot read property 'titles' of undefined. Can someone please help! will pay for your time!
@i-001
@i-001 2 жыл бұрын
I'm having the same issue. Were you able to fix it?
@jmoon6048
@jmoon6048 2 жыл бұрын
​@@i-001 This video was made more than a year ago. Your best bet is to try determine the exact versions of the node packages used and follow the tutorial with that. I know Strapi has changed quite a bit within the last year and I have had to make minor changes using updated documentation for similar projects in order to get desired results. Would be nice if Devistry would go the extra mile and help us out!
@GabrielMilanezMartinsdaSilva
@GabrielMilanezMartinsdaSilva 2 жыл бұрын
@@jmoon6048 @i I solved the problem after watching this video: kzfaq.info/get/bejne/jKeSodib3r67oGQ.html
@liborzdimal7189
@liborzdimal7189 Жыл бұрын
Strapi JSON structure is different now. Simply use props: { posts: postsRes.data.data, }, instead of props: { posts: postsRes.data, }, and {posts[0].attributes.title} instead of {posts[0].title}
@i-001
@i-001 Жыл бұрын
@@liborzdimal7189 thank you! I should have looked at the documentation
@hamidhashemi616
@hamidhashemi616 2 жыл бұрын
what is ur english accent?its hard to understand what are u saying.even youtube subtitle generator has problem with ur accent
@laura-lea-the-person
@laura-lea-the-person 2 жыл бұрын
Great Video. The Code isn't available and the discord link isn't working. And how can I get the posts from the date descending. The newest first. Greetings from Germany
Strapi v4 Crash Course
1:25:29
Laith Academy
Рет қаралды 151 М.
Inside Out Babies (Inside Out Animation)
00:21
FASH
Рет қаралды 24 МЛН
Strapi.js Crash Course | Headless CMS
25:06
Traversy Media
Рет қаралды 364 М.
Strapi crash course: build a full application with Strapi 4
2:16:12
Artcoded //by Jib
Рет қаралды 62 М.
JPEG is Dying - And that's a bad thing
8:09
2kliksphilip
Рет қаралды 259 М.
Static Blog With Next.js and Markdown
46:40
Traversy Media
Рет қаралды 102 М.
CHATGPT - its main SECRET | GUIDE Part 5
19:48
Scripter
Рет қаралды 121
Build and Deploy a Modern Full Stack ECommerce React Application with Stripe
3:34:12
Хакер взломал компьютер с USB кабеля. Кевин Митник.
0:58
Последний Оплот Безопасности
Рет қаралды 2,4 МЛН
Мой новый мега монитор!🤯
1:00
Корнеич
Рет қаралды 5 МЛН
Лучший браузер!
0:27
Honey Montana
Рет қаралды 1,1 МЛН
Это iPhone 16
0:52
Wylsacom
Рет қаралды 1,9 МЛН
КРАХ WINDOWS 19 ИЮЛЯ 2024 | ОБЪЯСНЯЕМ
10:04