Build and Deploy a Full Stack Blog NextJs + Sanity.io | JavaScript, React
Рет қаралды 17,521
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 KZfaq: @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
@adnanamin3666 Жыл бұрын
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.
@KozaKrisz Жыл бұрын
Thank you Elena! It was very inspiring and informative!
@webelart_en Жыл бұрын
I am happy to hear it! :)
@imakethesites3048 Жыл бұрын
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.
@webelart_en Жыл бұрын
👍 Thank you for the comment and helping.
@imakethesites3048 Жыл бұрын
Thanks so much, this is a lot better than the blog sanity produced to make a next/sanity blog!
@alexzahrai4703 5 ай бұрын
Fantastic walkthrough!
@MotivateSphereOfficials Жыл бұрын
Thanks sweetHeart ❤❤❤ this is a very helpful lesson
@emmanuelomonzebaguan726 Жыл бұрын
What an excellent way of teaching, make refrerrance to documentation that was superb, Kudos
@tamalefrank5830 Жыл бұрын
She deserves way more subscriptions......
@webelart_en Жыл бұрын
Thank you! ❤️
@aselemidivine8759 Жыл бұрын
Thanks so much for this video, it's so engaging and educating.
@webelart_en Жыл бұрын
❤❤❤
@mdshowrov1661 Жыл бұрын
Love from Bangladesh 🇧🇩🇧🇩🇧🇩
@haian_ Жыл бұрын
Mantap keren
@RizwanAli-xj1wk Жыл бұрын
nice keep it up
@webelart_en Жыл бұрын
Yep!! Will do! 💪 Thank you!!! ❤️🔥
@RizwanAli-xj1wk Жыл бұрын
@@webelart_en add some modern functionality like beautiful Ui and function for code...
@webelart_en Жыл бұрын
@@RizwanAli-xj1wk What do you mean?
@sophieroche7869 Жыл бұрын
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?
@webelart_en Жыл бұрын
Yeah, need to study. Hear you.
@DavidKernsIII Жыл бұрын
Thanks for making this. Is this based on the latest version of Sanity Studio? I know they recently pushed a big update.
@webelart_en Жыл бұрын
I used sanity studio which was available on the moment of record video :)
@ToadyEN Жыл бұрын
Great video :) very informative Also; peace to the people of Ukraine and Russia
@dr.margulis7773 Жыл бұрын
Awesome tutorial. 👍👍👍 Many thanks, dear Helena. 👏
@webelart_en Жыл бұрын
Thank you! ❤😎
@josecardons6221 10 ай бұрын
once it´s deployed you can create new posts?
@romanmed9035 Жыл бұрын
You livecoding is well. i understand it speaking (listening).
@webelart_en Жыл бұрын
Amazing!! 🔥
@romanmed9035 Жыл бұрын
@@webelart_en thanks
@aaliraza4004 Жыл бұрын
hi can you make a video on navigation schema in sanity with drop-down menu thankyou
@webelart_en Жыл бұрын
Maybe in the future, but not now :) Thank you for watching. ❤
@user-ts7cj7rj7j Жыл бұрын
amazing! if I follow it well, seo things will work well?
@webelart_en Жыл бұрын
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. :)
@user-ts7cj7rj7j Жыл бұрын
@@webelart_en thank you!
@itsyourboyt4683 Жыл бұрын
I love you
@webelart_en Жыл бұрын
I love you too! ❤️
@josecardons6221 10 ай бұрын
how can I delete posts? from sanity panel
@neelpatel8309 Жыл бұрын
can i use react js instead of nextjs in this tutorial, that will work right ?
@webelart_en Жыл бұрын
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).
@uutbudiarto114 Жыл бұрын
R U from Indonesia? 😊
@webelart_en Жыл бұрын
No, from Russia :)
@uutbudiarto114 Жыл бұрын
oh sorry, because I see some examples of titles using Indonesian. thank you your video is very cool 👍
@saikrishnamuntha62 Жыл бұрын
Hi Elena do tutorial on Nextjs + Typescript + Redux toolkit on crud application
@manindrasammanathegreat8253 Жыл бұрын
🤍🤍🤍
@khaliqqureshi6465 Жыл бұрын
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
@webelart_en Жыл бұрын
❤
Elena Litvinova — The Art of Web Development 🛸
Рет қаралды 2,6 М.
Fabiosa Best Lifehacks
Рет қаралды 34 МЛН
BEN EAGLE
Рет қаралды 30 МЛН
Jaydan Urwin
Рет қаралды 8 М.