Back to Browse

Build and Deploy a Full Stack Blog NextJs + Sanity.io | JavaScript, React

19.9K views
Oct 15, 2022
2:04:48

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 https://vercel.com. πŸ€ Support the channel: https://www.donationalerts.com/r/webelart β˜•οΈ Buy me a coffee: https://buy.stripe.com/5kA7sL9574SG7xCfZ3 πŸ₯° Buy my brushes for Procreate: https://webelart.com/illustration. ✍️ My telegram channel: https://t.me/webelart_en πŸͺ† Russian YouTube: @webelart πŸ’πŸΌβ€β™€οΈ My instagram: https://www.instagram.com/webelart πŸ¦„ Company LinkedIn: https://www.linkedin.com/company/webelart ❀️ GitHub start project: https://github.com/liveldi/my_blog_start Links: 😌 Build and Deploy a Modern Full Stack ECommerce React Application with Stripe https://www.youtube.com/watch?v=4mOkFXyxfsU&list=PLRzQpWc3zNPmI79v5cwYaf76cfzKJSape 😌 date-fns: https://date-fns.org 😌 React icons: https://react-icons.github.io/react-icons/ 😌 Sanity client: https://www.npmjs.com/package/@sanity/client 😌 Sanity block content to react: https://www.npmjs.com/package/@sanity/block-content-to-react 😌 Sanity image-url: https://www.npmjs.com/package/@sanity/image-url 😌 Final example in production: https://mysuperblog.vercel.app 😌 An useful article about Sanity https://kittygiraudel.com/2021/07/16/a-micro-client-for-sanity/ 😌 Documentation Sanity https://www.sanity.io 😌 Documentation NextJs https://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: https://github.com/liveldi/my_super_blog

Download

0 formats

No download links available.

Build and Deploy a Full Stack Blog NextJs + Sanity.io | JavaScript, React | NatokHD