Build and Deploy a Blog with Next.js 13 | React, Tailwind.css, Sanity.io | Tutorial 2023

Learn how to build and deploy a modern blog using Next.js 13, React, Tailwind.css, and Sanity.io in this tutorial. Discover the step-by-step process and powerful technologies needed to create a dynamic and visually appealing blog in 2023.
👨🏻‍💻Github Repository: www.janmarshal.com/courses/bu...
☕️ Buy me a coffe: www.buymeacoffee.com/janmarshal
Ressources used:
Next.js: nextjs.org/
Tailwind.css: tailwindcss.com/
Sanity.io: www.sanity.io/
Timestamps
00:00 Intro
00:25 Demo
01:05 Installation
03:10 Coding Application
19:10 Sanity.io Setup
33:00 Coding Application
01:00:00 Deployment
‪@TailwindLabs‬ ‪@sanity_io‬ ‪@VercelHQ‬
#tailwindcss #nextjs13

[@janmarshalcoding]

To show new blog posts when deployed, you will have to do the following: Above both of your export default functions, add the following: export const revalidate = 60 // revalidate this page every 60 seconds You have to do this because with server components by default, the response gets cached forever. So what you have to do is add a revalidate tag. This tells vercel to revalidate the page every 60 seconds. This would mean the first request would be fresh, then all subsequent requests would get cached data for 60 seconds, and after 60 seconds, the first request would again revalidate the fetch and show updates. You can change the revalidation seconds to whatever you want. If you want to deploy sanity studio to the web: 1. cd sanity 2. npm run deploy

[@eduardoandrade7312]

First of all, thank you very much, amazing tutorial. Could you help me, in which file should I add export const revalidate = 60?

[@Mil_Bixby]

@@eduardoandrade7312I think you have to add them right about the export default functions on both page.tsx files. Worked for me. Now I just need to figure out how to sort by the createdat date!

[@charleschukwuemeka8482]

You just earned yourself a subscriber, I have been on this revalidation issue for quite sometime now, and I am so happy that finally, I am done with it. Thank you so much, the least I can do is to recommend your channel. Keep it up Bruh.

[@aliyuabdulrazak3216]

@@charleschukwuemeka8482 pls can you put me through the revalidaton? It’s not working for me

[@charleschukwuemeka8482]

@@aliyuabdulrazak3216 Do what the comment suggested. Example, if your fetch is written here... Just above it, a line above it, write the export const revalidate = 60... This revalidates (by fetching again) the page every 60 seconds. That should work.

[@nicolaslupo5021]

Hey Jan! Thanks a lot for this wonderful content! Cheers from Argentina!

[@alyssoncarval]

Could'nt be happier, I was looking for a video like this for too long, proud that I finally found it. Thank you so much, you are very talented.

[@alyssoncarval]

Man, you have no clue how much your content help people out. Please don't stop with your tutorials.

[@nanimys]

Beautiful content!!!

[@kacperwalter]

Man Thank You for this video! :D

[@yossiyun]

Thank you so much for this🙏

[@chinwubachukwudi4483]

Great tutorial. thanks

[@BorrachoyLoco]

Thanks bro

[@sellimenes]

Hey there! Thank you for your effort and content. For next videos, can you please show Sanity demo also? And you can talk about why you chose Sanity, but not Strapi for example. Because, I am looking for a blog project with Strapi, and I found you. I have no knowledge about Sanity.

[@loydcose2780]

Great content! Learned a lot. +1 subscriber and like. Thanks!

[@tsykin]

Unfortunately, i didn't manage to follow up on this, but thank you for this great content! If I may ask, please, make more beginner-friendly guides in the future 🙏

[@MrMagicSandwich]

Nice tutorial! Thank you and good luck with future videos!

[@janmarshalcoding]

Appreciate it 😄

[@prodtrxllbeats]

Great Video. But how would I display the image for each blog on the All Posts page?

[@sohrabkhan101]

How do i render code and highlight the text with react portable text?

[@tanuj_b_]

Superb Video Bro, I really liked it and yeah i am definitely using sanity for my blog page!✨:-)

[@janmarshalcoding]

Thank you 🙏

[@saqlainafroz4421]

I did everything correctly but at the end while deployment I am getting the same error and even with .vercelignore it's not working. I am using windows 11 and latest node.js version

[@fathan1247]

can u make this kind of project but with strapi?

[@koshurcoder]

Hello, i want to create a blog using nextJs. I am familiar with mongoose. But i want to know does sanity makes work easier?

[@zzzzzzzzzzzzzzzzzzz13142]

das bestern!

[@devadharsank]

you can show your website also your left side screen so that we will understand much better

[@MohanadHani]

Thank you for your effort! Great video. I just have one question. What if I want my client to access sanity and change/add blog posts?

[@janmarshalcoding]

Thanks 😀, cd in to your sanity folder and then run "npm run deploy" to deploy your sanity studio to the web

[@mrperfect9028]

Awesome job! Can you please share your VS Code, ZSH theme and fig setup?

[@janmarshalcoding]

Thanks, VS Code: Aura Theme, ZSH no clue 🤷🏻‍♂️ and fig should be the default

[@cetinsangudev2563]

Hello. Thanks for the great content. Appreciated it. I'm getting an error on deploying to Vercel, Error: Cannot find module '@tailwindcss/typography'. How could i solve it?

[@janmarshalcoding]

1. npm install -D @tailwindcss/typography 2. open tailwind.config.js and add tailwindcss typography to the plugins: module.exports = { theme: { // ... }, plugins: [ require('@tailwindcss/typography'), // ... ], } docs: tailwindcss.com/docs/typography-plugin

[@marcincirocki623]

If I create website with sanity and vercel from which data bandwidth i will use. Photos are hosted on sanity or vercel servers? Sorry, Iam confused with all that services.

[@janmarshalcoding]

Well, you use bandwidth from both providers. But that's normal. No data is stored at Vercel, since Vercel is only a hosting provider and not a CMS. That means all data is stored in sanity and on their servers. But since we use Next.js, it comes automatically with image optimization(Image Tag). This is free for 1000 images, after that it costs some money. Read more here: vercel.com/docs/image-optimization/limits-and-pricing

[@victorekea]

Cool video, Jan. How did you customize your terminal to give you hints?

[@janmarshalcoding]

thanks ✌🏻, fig.io/

[@randomotaku6684]

now i am creating more data but it is not reflecting on nextjs running platform and it is reflecting on the sanity studio what should i do ?

[@janmarshalcoding]

Did you add a revalidate tag

[@itsjmendez]

Great tutorial🤌

[@janmarshalcoding]

Appreciate it, thank you 🤌🏻

[@itsjmendez]

@@janmarshalcoding Q: How can you create a shareable link/URL for the blog post? I've noticed that when I share the URL with another person, it doesn't load properly, and instead, the default Next.js page with a '500 Internal Server Error' is displayed.

[@janmarshalcoding]

@@itsjmendez Interesting, can you send me the link

[@itsjmendez]

I don't have the site live right now. But I just noticed that if you publish the blog and want to share the link to someone else of a specific blog post, for example: url/blog/my-first-blog-post, it won't work. I believe there has to be some sort of verification that checks if the slug was passed through params. If not, verify the current URL to get the slug and then fetch the specific blog post data. What do you think? Thanks for your previous reply!

[@alihankucukkaya473]

Nice tutorial bro. I'm trying to follow the video without typescript but when it comes to interface.js I had a hard time converting it to JSX format. I'd be happy if you could help me. Thanks for your help.

[@janmarshalcoding]

Hey, since you are using jsx you cant use interfaces since this is a typescript feature. You should just skip this step since it is not applicable to your project. So when ever i do "as xyz" or "data: Data", I just provide types. This not needed for you so just dont do it 😉

[@alihankucukkaya473]

@@janmarshalcoding Thank you so much☺

[@KaiyoOcean]

So question, I what if i have another user that wants to create a blog post but doesn't have code, is there a way they can access the area to write a blog post without having to download vscode downloading the zip, creating the post and uploading it to vercel???

[@janmarshalcoding]

Deploy sanity studio and then invite users

[@KaiyoOcean]

@@janmarshalcoding and from there how can they uploaded or create a blog? Will it be online?

[@geraldamankwah159]

please could you add commenting under a block

[@Mil_Bixby]

I run into an error, "Error: Cannot read properties of null (reading '_createdAt')" when I copy and paste the date constructor to the page/[slug]/page.tsx page. So when I click on the blog post to show the actual post it renders that error message.

[@janmarshalcoding]

You probably linked it wrong. How does url look like? The href should be the following href={`/post/${post.slug.current}`}

[@Mil_Bixby]

@@janmarshalcoding you’re right. Spent two days figuring out it was a syntax error.

[@josephchu2324]

So apparently when i get to mark 49:30, where hes getting the data from the api, I'm getting a 404?

[@HrissW]

Same prob

[@HrissW]

How?

[@marceljoshua6062]

when I use PortableText it says "Error: Cannot read properties of null (reading 'useMemo')", and when i use PortableTextComponent to its components attribute, it says: Type '{ types: { image: ({ value }: { value: any; }) => void; }; }' is not assignable to type 'Partial'. Types of property 'types' are incompatible. Type '{ image: ({ value }: { value: any; }) => void; }' is not assignable to type 'Record'. Property 'image' is incompatible with index signature. Type '({ value }: { value: any; }) => void' is not assignable to type 'PortableTextTypeComponent | undefined'. Type '({ value }: { value: any; }) => void' is not assignable to type 'FunctionComponent'. Type 'void' is not assignable to type 'ReactNode'.ts(2322) react-portable-text.d.ts(166, 3): The expected type comes from property 'components' which is declared here on type 'IntrinsicAttributes & PortableTextProps' how do i fix this?

[@janmarshalcoding]

Your probably did not return it correctly --> const PortableTextComponent = { types: { image: ({ value }: { value: any }) => ( ), }, }; make sure the image component is imported

[@marceljoshua6062]

@@janmarshalcoding it's still not working. I think the error is in PortableText, not PortableTextComponent

[@janmarshalcoding]

@@marceljoshua6062 No clue send me the github link and i can check it out once i have time

[@marceljoshua6062]

​@@janmarshalcodinglooks like i somehow cannot reply your comment with any link. is there any other for me to share my repository?

[@tharishaperera9345]

@@marceljoshua6062 I had the same problem. I made a mistake and have used "{ }" to wrap the instead of using "( )". It should be "( )". That fixed my issue

[@Diego_Cabrera]

So everytime you make a new blog post through the cms the website will update by itself? Or do you have to run build again?

[@janmarshalcoding]

Since it is a api call you dont have to rebuild anything. In that sense everything is automatic and will update by it self

[@slmnzaheer]

@@janmarshalcoding Hi Jan, could you explain this? Because when I deployed the website on vercel and made changes to the blog posts that I made during testing, it wouldn't show the changes. It keeps showing the old posts I made.

[@janmarshalcoding]

​@@slmnzaheer Hey, Well, when I was creating this tutorial, I was kind of new to Next.js.js 13 so I thought this would work like it did with the pages' router. But with server components, you have to revalidate your fetching, since, by default, the response gets cached forever. So what you have to do is add a revalidate tag. So above both of your export default functions, add the following: export const revalidate = 60 // revalidate this page every 60 seconds This tells vercel to revalidate the page every 60 seconds. This would mean the first request would be fresh, then all subsequent requests would get cached data for 60 seconds, and after 60 seconds, the first request would again revalidate the fetch and show updates. You can change the revalidation seconds to whatever you want.

[@slmnzaheer]

@@janmarshalcoding thank you so much! Looking forward to your future content!!

[@abdullahalmasud9313]

How can I do this without typescript?

[@mistersir3185]

To work with Next you need TS.

[@joscript7846]

​@@mistersir3185it a lie, it's optional

[@janmarshalcoding]

Just enter no to typescript when installing

[@Don_Verissimo]

hard -mode

[@mementomori2294]

Hello everyone, I did everything according to the video. But I have the following error (Can someone tell me what the problem is? Unhandled Runtime Error Error: Cannot read properties of null (reading '_createdAt')

[@janmarshalcoding]

Hey, your interface is probably incorrect, here is the right one: export interface Post { title: string; overview: string; content: any; _id: string; slug: { current: string; }; _createdAt: string; } also console.log the data to see if you get creatd at as a response also check if your fetching is correct: const query = `*[_type == "post"]{ _id, _createdAt, slug, overview, title, "imageUrl": cover.asset->url }`;

[@mementomori2294]

@@janmarshalcoding Sorry for such a stupid question, but where to check the fetching? everything is ok with the interface, the console returns: "Failed to load content for webpack://react-devtools-extensions/react-devtools-shared/src/backend/console.js (Fetch through target failed: Unsupported URL scheme; Fallback: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME)"

[@mementomori2294]

@@janmarshalcoding even stackoverflow don't know what a problem hahaha

[@janmarshalcoding]

Hey Anton please check the reply on www.buymeacoffee.com/janmarshal Thanks for your support 🙏🏻

[@myveritasforever]

Never ever Stream on YT while you are high.

[@janmarshalcoding]

LMAO, what are you talking about

[@effekt.design]

You are amazing. 🤝 Everything clear, to the point and very quick! On a side note, (from a content creation prespective) if you can decrease the amound of "pretty much" during your speech it would help push your content to an even better state. I am also guilty of repeating the same word over and over again but I am being consious of it slowly for my content so you might benifit from this. Apart from that keep grinding, left you a sub and a like so this video is pushed out to as much people as possible!

[@janmarshalcoding]

Thank you for your feedback 🙏 edit: I just checked out your channel and website. Some high-quality stuff keep it up.

[@effekt.design]

​@@janmarshalcoding Thanks to you , I was actually able to set up my website now using Sanity as a backend to my case studies and to store the newsletter emails as well, I had to do some digging around to find out how to create documents in their documentation, but it wasn't that difficult :) Thanks for the feedback! Appreciate it 🙏

[@pcastillogarita]

Hi there, how do I add a block code in the post, I'm using code-input but in the portabletext give me this output in console: [@portabletext/react] Unknown block type "code", specify a component for it in the `components.types` prop

[@kennedyfreitas7548]

i am getting the same error but for image, how did tou fix it ??