Build and Deploy a Full Stack Blog NextJs + Sanity.io | JavaScript, React
Vložit
- čas přidán 1. 06. 2024
- Every web developer dreams about own blog where he/she will be able to share knowledges, own stories, everything whatever she/he wants. In this video we will create a full stack block on technologies sanity.io and react (next.js). Furthermore at the end of video we will deploy this project with vercel.com.
🍀 Support the channel: www.donationalerts.com/r/webe...
☕️ Buy me a coffee: buy.stripe.com/5kA7sL9574SG7x...
🥰 Buy my brushes for Procreate: webelart.com/illustration.
✍️ My telegram channel: t.me/webelart_en
🪆 Russian CZcams: @webelart
💁🏼♀️ My instagram: / webelart
🦄 Company LinkedIn: / webelart
❤️ GitHub start project: github.com/liveldi/my_blog_start
Links:
😌 Build and Deploy a Modern Full Stack ECommerce React Application with Stripe • Build and Deploy a Mod...
😌 date-fns: date-fns.org
😌 React icons: react-icons.github.io/react-i...
😌 Sanity client: www.npmjs.com/package/@sanity...
😌 Sanity block content to react: www.npmjs.com/package/@sanity...
😌 Sanity image-url: www.npmjs.com/package/@sanity...
😌 Final example in production: mysuperblog.vercel.app
😌 An useful article about Sanity kittygiraudel.com/2021/07/16/...
😌 Documentation Sanity www.sanity.io
😌 Documentation NextJs nextjs.org
00:00 Intro.
04:22 Setup NextJs project
07:55 Setup Sanity.io
13:10 Start with create schema Post
16:00 Copy start project
18:00 Schema for Post: string, text, slug, image, date, block + image
28:19 Validation.
31:00 Publish post
31:50 Groups in schemas
34:10 Create more posts
38:40 Prepare client project: copy components, styles and etc.
42:10 Upload posts and connect with Sanity using getServerSideProps
46:00 sanityClient + imageUrlBuilder
51:10 GROQ language
56:50 Create layouts - cover
58:20 Fill all components with basic information + snippet rafce
01:06:15 Work with section cover: Section, Cover, SocialNetworks, BuyMeCoffee + ScreenEgg
01:16:50 Prepare post layout: Title, PostGrid, Post + Button
01:29:40 Pagination
01:40:25 Create layout for opened post.
01:43:50 getStaticPaths + getStaticProps
01:50:00 Continue layout for opened post: date-fns, sanity block content to react.
01:57:50 meta titles in NextJs (Head).
01:59:35 push to Github + Deploy on Vercel
🦉 Final Github Link: github.com/liveldi/my_super_blog
What I loved the most is how you incorporate docs to teach. It really shows how to read docs and incorporate them in the project. Keep up the good work and good luck.
Awesome. Inspired. Happy.
Thanks so much, this is a lot better than the blog sanity produced to make a next/sanity blog!
Thank you Elena! It was very inspiring and informative!
I am happy to hear it! :)
What an excellent way of teaching, make refrerrance to documentation that was superb, Kudos
Fantastic walkthrough!
Thanks sweetHeart ❤❤❤
this is a very helpful lesson
For anyone who is stuck at the deployment because "title is undefined on [slug]", it might be if you're using getStaticPaths and fallback: true, but haven't set values to show when you run build. I changed true to 'blocking' and the build finally worked.
👍 Thank you for the comment and helping.
Thanks so much for this video, it's so engaging and educating.
❤❤❤
She deserves way more subscriptions......
Thank you! ❤️
Love from Bangladesh 🇧🇩🇧🇩🇧🇩
Thanks for making this. Is this based on the latest version of Sanity Studio? I know they recently pushed a big update.
I used sanity studio which was available on the moment of record video :)
Mantap keren
nice keep it up
Yep!! Will do! 💪 Thank you!!! ❤️🔥
@@webelart_en add some modern functionality like beautiful Ui and function for code...
@@RizwanAli-xj1wk What do you mean?
Awesome tutorial. 👍👍👍
Many thanks, dear Helena. 👏
Thank you! ❤😎
Hi Elena! Loved your tutorial (also love to watch women teach code ❤). I was just wondering, what about sanity for deployment? Is it already hosted as soon as you create a project with them?
Yeah, need to study. Hear you.
You livecoding is well. i understand it speaking (listening).
Amazing!! 🔥
@@webelart_en thanks
Great video :) very informative
Also; peace to the people of Ukraine and Russia
once it´s deployed you can create new posts?
amazing! if I follow it well, seo things will work well?
Thank you! I didn't work a lot with SEO part, I mean I didn't add headers, titles and etc. I think that just added title, but you can do this as a homework. :)
@@webelart_en thank you!
I love you
I love you too! ❤️
can i use react js instead of nextjs in this tutorial, that will work right ?
With nextjs we also deployed project. You can use, of course, react js, but you will not be able to repeat everything in this lesson. Also you will need to create additional server for reactjs (nodejs).
hi can you make a video on navigation schema in sanity with drop-down menu thankyou
Maybe in the future, but not now :) Thank you for watching. ❤
how can I delete posts? from sanity panel
R U from Indonesia? 😊
No, from Russia :)
oh sorry, because I see some examples of titles using Indonesian. thank you your video is very cool 👍
🤍🤍🤍
Hi Elena do tutorial on Nextjs + Typescript + Redux toolkit on crud application
How are you waiting for my Janjab to Do? Allah Hafiz will be online after a month. To all of you friends and public of Anssa No Fakbok all over the world. May Allah bless you all. Amen. Zindabad Forum Abdul Khaliq Qureshi Government Service
❤