Build and Deploy BLOG with Tags - Next.js 14, Sanity CMS and Tailwind

Подписаться 1,1 тыс.

Просмотров 20 тыс.

50% 1

In this tutorial, we'll build and deploy a blog with tags as special features, using Next.js 14, Typescript, Tailwindcss, and Sanity CMS.
👨🏻‍💻 Github Repository:
/ github.com/stefandjikic/next-...
🛠️ Step-by-Step Tutorial:
- Project setup and initialization.
- Building dynamic pages with Next.js.
- Embedding Sanity CMS into Next.js application for content management.
- Styling blog using Tailwind CSS for a modern and sleek appearance.
- Implementing tags to organize and filter your content effectively.
🔗 Resources Mentioned:
Next.js
Sanity CMS
Tailwind CSS
🕐 TIMESTAMPS:
0:00 - Intro and Overview
4:08 - Create Next App
5:45 - Tailwind configuration
8:12 - Code cleanup
9:14 - Coding application: Layout
14:00 - Next themes
24:45 - Base styles
28:15 - Theme switcher
33:23 - Logo
36:50 - Sanity: Create a project
41:56 - Multiple Layouts in Next
48:34 - Style Sanity Navbar
51:50 - Sanity: Create Schemas
1:06:45 - GROQ - Basic Overview
1:09:21 - Get Posts from CMS
1:28:34 - Tags functionality
1:33:40 - Single Post Page
1:52:00 - Display Images from Sanity
1:56:40 - Tags Page
2:05:30 - Posts Per Tag Page
2:18:50 - Number of posts per tag
2:22:50 - Final Touchups
2:23:53 - 404 Page
2:27:30 - Deploy
/ ‪@sanity_io‬
/ ‪@VercelHQ‬
/ ‪@TailwindLabs‬

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

15 июн 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 45

@mistersir3185 14 дней назад

Man! Oh Man! You got no idea how happy I am that I finished this tutorial, followed everything you did. Even managed to fix some bugs and learn stuff myself along the way. What a way to learn! I truly hope you continue to push more invaluable materials like this on your channel in this style. Love it! Look forward to seeing more contents like this. Thank you!

@codewalkempire 13 дней назад

Thank you man! This means a lot!

@mistersir3185 13 дней назад

@@codewalkempire yes, this is exactly what I was looking for too! I personally would love to see kind of like a barber appointment reservation or some kind of reservation app with a cool UI. I hype you’ll come out with another tutorial soon. Look forward to it. 🙏👍

@Mark-sc2ew 2 месяца назад

Thank you! I had my blog up and running but I was having issues getting images from the block content. Got it working now thanks to this. Also really like your tags implementation. 🙂

@nylsaj 5 месяцев назад

Thank you, thank you! I have tried going through a few tutorials and this is the only one I’ve found that is actually up-to-date. You clearly explained everything so it was easy to follow along. Thank you for taking the time to make such a thorough tutorial. My blog is finally getting deployed. I look forward to more content from you!

@codewalkempire 5 месяцев назад

Thank you! This is the reason why I started my channel, and comments like this truly motivate me to continue my work! Stay tuned for more!

@alexa-stargaming3349 6 месяцев назад

Most useful stuff I found for my project. Very well explained!

@codewalkempire 6 месяцев назад

Thank you!

@Offiziersmesser 6 дней назад

Hello there, amazing tutorial. I can't appreciate you enough. Could you perhaps do a video on revalidation of tags or content whenever we create, update or delete content in the studio. I know one can do that via webhooks in sanity. I'd appreciate a tutorial on that as you are really good at explaining concepts.

@BurbenogExpert 6 месяцев назад

Great video my friend. I could totally build and deploy the website! Big thanks!

@TheArmandoMartinez 5 месяцев назад

Thanks. nice page 👍

@AbderrahmaneBelarbii 3 месяца назад

thx , you made it easy ... keep up u deserve a lot more then 100k sub

@codewalkempire 3 месяца назад

Thank you! This means a lot!

@startupBossInsights 5 месяцев назад

Please do more nextjs and sanity projects ❤

@codewalkempire 5 месяцев назад

The next one is React/Vite, but after that, the plan is to do a couple of Next and Sanity projects, so stay tuned :)

@sergio_originblank 5 месяцев назад

It would probably be a good idea to showcase how to add metadata in a future iteration.

@codewalkempire Месяц назад

Here it is :) ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-a2ovCcxXqNo.html

@ezraleong8195 4 месяца назад

Great content. Finished it yesterday. I was wondering if anyone has a code snippet of how to render a ToC with as well.

@codewalkempire 3 месяца назад

Hey, just published video on that topic! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-72wJs51jY4s.html

@19bprojects82 5 месяцев назад

I’m getting an error with the PortableText saying block type undefined specify a component for it in the components.type please help.

@DomaciZadatak 6 месяцев назад

Coding in Java is easier with your videos!

@a7kerkh 6 месяцев назад

It’s JavaScript

@luuuizpaulo 3 месяца назад

Nice video! One thing that puzzles me is that the Sanity Studio is then publicly available? That looks quite strange to me

@codewalkempire 3 месяца назад

Thanks! Actually it’s not, you still need to authenticate yourself in order to access it :) In earlier versions you would deploy it under “*.sanity.studio” dolain or any other domain actually. I mean you can still do it like that but a lot of people nowadays find it to convenient do to it like this when you're using it with Next.js :)

@luuuizpaulo 3 месяца назад

@@codewalkempire very interesting!

@aguud 6 месяцев назад

Is your monitor bigger than 1080? because I watch from 1080 the font size looks very small

@codewalkempire 6 месяцев назад

It is 1080 but I should have probably zoomed it in a bit. Thanks for the feedback, I’ll update my settings for the next one. Cheers!

@aguud 6 месяцев назад

@@codewalkempireI have completed the tutorial, and everything is running smoothly. Thanks for the video

@codewalkempire 6 месяцев назад

I'm very glad to hear that!@@aguud

@ioannisme7495 5 месяцев назад

amazing clear explanation, but how does he know all of these?

@codewalkempire 5 месяцев назад

A lot of professional experience and ofc reading docs :) Thank you!

@jcenlo 5 месяцев назад

Hi , i am getting a error in console, only when you open a post and add a tag ===>>> app-index.js:34 Warning: A props object containing a "key" prop is being spread into JSX: let props = {key: someKey, index: ..., level: ..., value: ..., title: ..., description:, is something about the implementation or is a sanity Error? the platform is working but my TOC is killing me

@codewalkempire 5 месяцев назад

Hi @jcenlo, it seems like a sanity-related error, but I only got it in a development environment. Now everything seems fine.

@adriancolinas1 3 месяца назад

Hey friend, I need support to migrate a blog from Wordpress to Sanity, can you help me with it?

@koshurcoder Месяц назад

WordPress is different kind of world. I believe you know it already. That is built with php and I don't think any of those hepty plugins will make use of anything in next. I am moving one of wp projects to Next. Only I could is the user interface and content, that too manually.

@mohammadshahzil6656 Месяц назад

Whenever I am publishing a new post from sanity then it is not getting displated and neither it is getting fetched in console. Even after deleting the previous published post it is showing me same errror only. HELP PLEASE!!!!!

@codewalkempire Месяц назад

Make sure you are using "revalidate" when fetching. If not the blog will show you cached results. Hope it helps!

@mohammadshahzil6656 Месяц назад

@@codewalkempire yeahh it worked finally for me ..thanks✅

@vinyldisk3382 3 месяца назад

im getting a mutation error whenever i edit or create on a deployed site, i embedded sanity the same way, it works on my computer. I made sure environment variables are properly added, CORS are added as well with credentials enabled (and disabled), still i can't do anything on the CMS, can you help me?

@codewalkempire 2 месяца назад

Did you include a token in you're ENV's? You need that in order to write to your dataset from outside of the Studio.

@vinyldisk3382 2 месяца назад

@@codewalkempire i did and it still throws an error, its an editor token so idk why it happens, most of the tutorials ive seen didnt even cover adding the tokens, i put a write token in the sanity config file and a read token on the client config file