Personal Website Tutorial with Next.js 13, Sanity.io, TailwindCSS, and TypeScript

Рет қаралды 176,360

Күн бұрын

Learn how to build a personal website with Next.js 13 for the frontend and Sanity.io as the content backend. You will also be introduced to TailwindCSS for styling and TypeScript for type safety and improved developer experience. By the end of this tutorial, you will have a fully functioning, deployed personal website that you can continue building on.
✏️ Kapehe Sevilleja developed this course.
💻 Code: github.com/kapehe-ok/next-san...
🔗 Boosted free plan with Sanity.io: www.sanity.io/youtube
🔗 Next.js links: nextjs.org/docs & nextjs.org/blog/discord
🔗 Sanity.io links: www.sanity.io/docs & slack.sanity.io/
🔗 TailwindCSS: tailwindcss.com/docs/installa...
🔗 TypeScript: www.typescriptlang.org/
🔗 Kapehe's Twitter: / kapehe_ok
🏗 Sanity provided a grant that made this course possible.
⭐️ Contents ⭐️
⌨️ (0:00:00) Intro
⌨️ (0:03:48) Finished project
⌨️ (0:06:06) Starting Next.js
⌨️ (0:09:17) Starting Sanity.io
⌨️ (0:12:04) Overview of Sanity.io
⌨️ (0:15:05) Sanity.io Manage Dashboard
⌨️ (0:16:28) GROQ query language
⌨️ (0:18:03) Embedding the Sanity Studio
⌨️ (0:20:38) Routing in Next.js 13
⌨️ (0:27:37) next-sanity library
⌨️ (0:31:09) First Sanity schema
⌨️ (0:39:05) Displaying data
⌨️ (0:42:38) First GROQ query
⌨️ (0:45:03) Mapping over projects
⌨️ (0:49:47) Setting up TypeScript types
⌨️ (0:54:34) Adding TailwindCSS
⌨️ (1:06:40) More on the Studio
⌨️ (1:09:52) Images in Next.js 13
⌨️ (1:13:52) Individual project pages
⌨️ (1:22:41) Styling project pages
⌨️ (1:31:21) The NavBar
⌨️ (1:35:38) Next.js organizational folders
⌨️ (1:41:50) Pages schema
⌨️ (1:58:28) Deploying to Vercel
⌨️ (2:01:33) Sanity real-time updates
⌨️ (2:03:22) Recap
⌨️ (2:04:29) Outro
🎉 Thanks to our Champion and Sponsor supporters:
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Erdeniz Unvan
👾 Justin Hual
👾 Agustín Kussrow
👾 Otis Morgan
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news

Пікірлер: 400

@Kapehe Жыл бұрын

Thank you everyone for checking out my tutorial! It really means a lot to me. And I'm super excited to see all your personal websites!! ❤Happy coding!

@tramasrarasoddplots Жыл бұрын

Thank you for sharing your knowledge with us!

@Showmatic Жыл бұрын

And looks like Jason got you using Arc browser 😂

@rrahll Жыл бұрын

Awesome, thank you!

@rrahll Жыл бұрын

Do you have your own channel on yt or only twitter?)

@petergabriel9246 Жыл бұрын

@@rrahll yt

@codingm7002 11 ай бұрын

Wow, the useful VS Studio keyboard shortcuts alone make this tutorial worth watching! Thanks Kapehe!

@akshayaileni5258 Жыл бұрын

Much needed course as new app directory is introduced ❤️

@nickharbaugh 9 ай бұрын

This is a phenomenal tutorial Kapehe! Accessible, comprehensive and fun. Thank you so much!

@nozoke 7 ай бұрын

This is definitely the best tutorial I've seen in a very long time. It's extremely easy to follow and really comprehensive. I wish that you create dev content often. Thanks a bunch .

@Gangbuster74 Жыл бұрын

Kaphe been following her since couple of years great teacher

@Kapehe Жыл бұрын

thanks! that means a lot! 🤙

@dhruvshah8310 Жыл бұрын

Thank you so much Kapehe and freecodecamp for this! Wonderful tutorial!

@amelianceskymusic Жыл бұрын

Please use the standard VS Code theme, it took me over an hour because of = (==) 43:25 and → (->) 44:23

@flor.7797 Жыл бұрын

=> or →, I'm guessing => 🥲

@flor.7797 Жыл бұрын

I thought you meant -> but the problem was also == not = 😥

@jhonnyknoxville8909 Жыл бұрын

Incredible comment "Unhandled Runtime Error; Error: expected ']' following expression" an hour in back with this theme, thanks for "==" man, you saved me and f*ck this theme

@RadioFlood Жыл бұрын

broooooooooooooooooooooooo, thank you!

@andresrairan8834 Жыл бұрын

@@flor.7797 Gracias, no conocia ese theme, me salvaste

@himynameishonza Жыл бұрын

Amazing video! I am using Next and Sanity for years and this is a great recap of the new important stuff. Thanks! 👋

@sachinmore8938 Жыл бұрын

You are a great Presenter Kapehe! Thank You!

@RizaHariati 11 ай бұрын

Very simple yet very rich tutorial. I learned a lot of new things. And I like the way you talk. I wish I could talk like that. Thank you Kapehe!

@jtr549 2 күн бұрын

I'm glad I tried this, even though all I learned is that building a website on a new platform like this is an absolute money pit of time and effort to solve problems that shouldn't even be problems.

@panamerican0 11 ай бұрын

Ugghhh didn't want to use the app directory yet, but looks amazing! Thanks for making this available!

@utilisateur387 11 ай бұрын

Great tutorial, thank you Kapehe!

@aivoric 9 ай бұрын

Thank you. Great insight into how sanity works.

@logh88 7 ай бұрын

For anyone who is struggling with the data display bug on refresh: the only solution that I found (for now) is to hit the refresh with the cache-invalidate command (ctrl + shift + R)

@ricklove6689 6 ай бұрын

Thank you - using the 'Hard Refresh' works!!

@waffletube5707 6 ай бұрын

To be clear, use in the browser. For MacOS use CMD + Shift + R

@spuknan 6 ай бұрын

Is there any solution for this to avoid doing hard refresh?

@ricklove6689 6 ай бұрын

@@spuknan - I resolved a similar issue in another project by adding 'export const revalidate = 60' in both the main page.tsx and the post[slug] page.tsx, just above the export default function.

@angelkaragiozov 6 ай бұрын

Bravo Kapehee, super useful, more of these, MC and Happy New Year! :)

@fancybaguette 11 ай бұрын

If you happen to run into the following error "Unhandled Runtime Error Error: expected ']' following expression" while following the tutorial, it's caused because of the invalid groq query. It's hard to see on the video because of Kapehe's vscode theme, but you need to use DOUBLE equal signs at the beginning of the query like so: groq`*[_type == "article"]{ And the arrow at the image part is a dash plus an greater than sign: "image": image.asset->url,

@freshlysqueezedknowledge 10 ай бұрын

omg, this drove me crazy! Thank you !1

@VP-nd9yy 10 ай бұрын

thanks

@paulab9310 10 ай бұрын

Thank you so so much! I was going crazy trying to figure our where is that missing "]". Also, next or sanity could be pointing where the syntax error is better.

@andreacamargo5176 9 ай бұрын

thanks fancy, that error was driving me crazy!!

@firasatali8395 9 ай бұрын

Thank you @fancybaguette, I was gonna through my laptop out of the window, because of this error.

@JasonGreen-jt5qt Жыл бұрын

Thank you for a great lesson!

@Kapehe Жыл бұрын

Thanks for watching!

@abdqudus 9 ай бұрын

Im not sure, ive ever commented on KZfaq but Kap, you are the best 🎉🎉🎉🎉

@awbranch 10 ай бұрын

Very helpful. Thanks Kapehe.

@rafatansari112 8 ай бұрын

As others have commented, I was also stuck at the same issue where my admin page updated data won't reflect on nextJS frontend on refresh or redeploy. Tried useCdn:false and adding { next: { revalidate: 10 } } after groq query both of which didn't worked for me. Finally after 2 hours, I think I get what was the problem. So, the issue isn't with the code if you're following the tutorial well. Whenever we update any data in admin dashboard, just clicking on publish won't publish the data. We have to refresh the admin page after we are done updating the content. After doing this, when you hit refresh on nextJS frontend page, you will hopefully get your updated content from Admin page. Hope it helps!

@waffletube5707 6 ай бұрын

As someone else suggested, using a hard refresh in the browser works. Kap just uses CMD + R, but CMD + Shift + R (on MacOS) worked for me.

@tenr01 6 ай бұрын

This needs to be a pinned comment at this point. Thank you! I think cache settings on next.js 14 need to be addressed as well to solve this error A normal user is not going to hit hard refresh 😂

@andresrairan8834 Жыл бұрын

Genial, muchas gracias por este valioso contenido

@riacharda 11 ай бұрын

This was such a great tutorial! I'm definitely going to use Next and Sanity for my portfolio site. This was also an intro to Tailwind for me. I wonder how you set media queries through class names.

@demiansims728 Жыл бұрын

Thank you, Kapehe. Very clear and easy tutorial. I was able to build out my own portfolio and modify as needed. Also good to learn some Tailwind.

@user-xr8nh2kw4b Жыл бұрын

@ 37:53 "I'm going to write some WISHFUL coding here..." - I think this is my new favorite phrase, as I have done this many times and never had a word for it.

@ankursinger102 Жыл бұрын

Love from india ❤best free resource for coders in the world...Thnks free code camp....

@user-sb9ve6zd6p 7 ай бұрын

Thank you so much!!! Super clear explanation and very nice voice!

@pedrofranciscodominguez832 11 ай бұрын

Thanks, pretty useful to learn Next.js 13

@FeyodorPavlovich 8 ай бұрын

thank you Kapehe. learned a lot

@leandrojackson9631 Жыл бұрын

Thank you very much for this content, I`ve love this video. It help me a lot!

@user-hi3ud3um7m Жыл бұрын

Thanks, that's really cool stuff.

@shantanusingh7600 10 ай бұрын

Thanks for the latest course as i was watching a video which was 2 years old and it didn't have sanity.json file and it drove me nuts for hours and it turns out that the new version has some changes.Thanks

@dawid_dahl 10 ай бұрын

Thanks for the tutorial. 🙏🏻

@Developer921 Жыл бұрын

Great job! Your account is an excellent resource for anyone looking to learn about [programming ]. 🤩

@michaeljosephasprec Жыл бұрын

Thank you this is awesome!

@Arensman1025 Жыл бұрын

If anyone is getting an unknown error around 1:40:00 after adding the '(site)' and '(studio)' folders and moving all the files around, try deleting your '.next' folder and running 'npm run dev' again.

@KinzaSheikhOfficial Жыл бұрын

My files are not transferring at all 😮‍💨

@mira-films1169 Жыл бұрын

Thank you so much, you save my life!

@aruha2847 Жыл бұрын

Yayyy. Done and dusted!

@juraijahmed1321 Жыл бұрын

This actually looks something like i might pull off

@yanceq2690 Жыл бұрын

Me everytime freecodecamp uploads

@Kapehe Жыл бұрын

Nice!!

@Jesus_777.2 10 ай бұрын

That free aditional festures 🙌🙌🙌

@michaelserres9291 11 ай бұрын

Fantastic video, learnt so much from it. What's your setup to record these sessions? In particular the tool to change tab in browser?

@oxynetz Жыл бұрын

sanity is interesting...thanks for this FCC

@chachoDev24 10 ай бұрын

Great tutorial, I have an issue though, the information from sanity studio does not seem to be updating I entered some real data instead of the first seccond and third but it's not displaying I used useCdn: false in the config object but it's still showing the same old version. I have not deployed it yet, i'm still on my localhost environment. Has anybody fixed this?

@hassanalsafi9590 4 ай бұрын

I have the same issue here and I couldn't fixed it yet

@techme6053 Жыл бұрын

Needed that

@cryptocurrencyworld155 11 ай бұрын

great tutorial

@benjaminikuesan1638 8 ай бұрын

Nice, thanks a lot

@optimaflo 11 ай бұрын

Great video.. Any suggestions on managing datasets with this setup? Trying to have a sandbox/live env of the cms.

@abdulrehmanbaber2104 10 ай бұрын

you are fun ! 😍

@devashishrai3458 Жыл бұрын

I was in dire need of this. Thanks #freecodecamp

@fullstackpedro Ай бұрын

so clear when someone is actually knowledgeable about what they doing vs just reading from a script not having a clue that a a configuration file like for schema would not end be TSX lol

@josephmgift 10 ай бұрын

It was fun. 😁😁

@jacobphillips9235 Жыл бұрын

Thanks!

@lindseyhoward4763 Жыл бұрын

Really love this video! I'm curious, what font are you using in your VS Code?

@AbhishekKalia-od7ni Жыл бұрын

Operator Mono!

@marvelpro06 6 ай бұрын

i would really like to know

@pxnchx93 Жыл бұрын

Would this work for being my developer portfolio showcase? or for a small e commerce site?

@albinmiftari1832 Жыл бұрын

Is it possible to make the sanity pages static? Because I would like to use something like next-sitemap to create sitemaps for them.

@jlv3391 Жыл бұрын

Greetings! 🎉

@waffletube5707 6 ай бұрын

Tailwind question. When I installed Next.js it created a tailwind.config.ts file. When we get to the Tailwind install portion of the video at 54:35 there is no mention of the .ts file. I can't seem to find much about it. Now I have two config files for Tailwind, a .ts and a .js. How do I reconcile this?

@serychristianrenaud Жыл бұрын

Thank ❤

@MrMaraxli Жыл бұрын

This is how must be real tutorial. Thank you for acting like real teacger🎉

@waffletube5707 6 ай бұрын

I've seen some tuts suggest using defining environment variables for our sanity project id, dataset and api version, but this one does not. Why is that? Is it more prevalent when using Pages router or depending on the project?

@JusTheWebDevNJIT Жыл бұрын

Thanks Kapehe! this tutorial was great! I have a strange issue that I can't seem to figure out for some reason when I connect my sanity studio to my next app the studio is unstyled? Im confident I followed along correctly, but when I go to the /studio route in my browser there is no UI. any help would be great!

@viktorsnaer Жыл бұрын

I ran into the same issue. Try adding the "styled-components" package to the project. Should fix it

@andreacamargo5176 9 ай бұрын

Hi, i am having a trouble with rendering the dataset from sanity in real time. When I create a new item, they dont render a time in the front next api, i thinks it is a problem with cache. do you have it too? please, someone can give me an insight.

@sirius8ly Жыл бұрын

Hello @Kapehe. I am working on integrating sanity into my app but on the dynamic routing, I am still getting route/[object object] Has there been any changes since you published this vid? Thanks you and thanks for the great content. EDIT:: To answer my own question, I had to add .current to the end of the slug url /${post.slug.current}

@burgerxxiii 8 ай бұрын

Were you able to resolve the issue?

@pablopenia Жыл бұрын

I havea doubt, aready see the docs, but can't find the answer. What happens if I decide to change my schema in the future. Lets say I have a product schema for e-commerce. But in some point I need to add an extra field for this product, or all products. I know I can edit the schemas, but what happens with old products? Should I write an script to modify old data, or there is a more automatic approach to do it? Just asking for curiousity I don't have to do it.

@Mil_Bixby 8 ай бұрын

Is there a way to sort your sanity posts on your rendered website by the createdat date strings?

@waffletube5707 6 ай бұрын

Can you explain a little further why we made this "barrel file"? Before the refactor we just exported our schema from the schema file and imported it to sanity.config. After refactor we now import the schema to the index file, export that, and then import *that* to the sanity.config. But why? How does that help? Maybe it'll make more sense as I move along.

@brenoocanha5914 9 ай бұрын

When I add a new project and refresh the page, it isn't there. It only appears after i modify de groq query, is this related to the next cache?

@abuhossain4274 11 ай бұрын

Hello Kapehe ! what would it if i make private sanity project rather than public? where should it mention ?

@evanmarshall9498 9 ай бұрын

How come you have to define type slug = string when creating [slug]/page.tsx when you had already defined that within types/Page.ts and call it in the getPage function within the sanity-utils.ts file?

@CodeWithSuvash 10 ай бұрын

49:15 doesn't get updated data in NextJs frontend even though i changed and updated through Sanity desk many times, Please help anyone??

@jemimahkwakuyi7879 10 ай бұрын

I'm also getting this error. Have you gotten any luck?

@CodeWithSuvash 10 ай бұрын

@@jemimahkwakuyi7879 Unfortunently, Not yet. However when i try with page router or whenever i make client component, It works

@asapsvicide9742 8 ай бұрын

Would we get a Unhandled Runtime Error if the user is to mess with the dynamic route URL? Previously I think we'd use fallback: false to deal with that, but how do we deal with it here?

@tenr01 6 ай бұрын

Is that an extension she is using that prompts the green light bulb and it imports the file/object/package needed?

@timothycavinder7440 6 ай бұрын

At the beginning there was going to be a photo gallery. But I don't see it on the finished project. Am I missing something? How does a person make a photo gallery to be part of this project? I would like to do so. Thanks.

@aurora23301 Жыл бұрын

Hi, I am facing trouble with using video in sanity. i have video files in sanity which i want to display in my nextjs app but the url is not exactly a cdn link. Is there a way i can use the video url? Please help

@mcha_yt 10 ай бұрын

Great course but i have a question how do i deploy it to firebase? when i go to the dynamic pages it redirects me to the home page? is there somthing i have to do?!

@gerryhoekema2561 Жыл бұрын

I am trying to get from the login (3333 host) screen to the Manage Sanityio DashBoard. I can't figure out how to get the pop-up screen where we search for if. Right click doesn't work and the video just has it appear. How do I do that?

@ThandolwakheMthimunye-he5ov Жыл бұрын

6:27 , can I please can a guide to a terminal like that , or which terminal is used here ?

@jemimahkwakuyi7879 10 ай бұрын

I did everything but the frontend wasnt updating with the backend. I added use client to make it update equally in the page.tsx file. Theres an eslint error. Im at 1:10:29 i hope it fixes itself. Took me hours to get here, because of this error

@L.A.Frazier 9 ай бұрын

I've used VS Code for 5 years and never knew that "Collapse Folders in Explorer" toggle existed 🤯

@RadioFlood Жыл бұрын

Error: Cannot read properties of null (reading 'name') return {project.name}; how to fix this?

@RadioFlood Жыл бұрын

I'm stuck at 1:19:50. after refreshing the page I'm get this error

@efrazapata 7 ай бұрын

Hello, thank you very much for the video, I have a problem (1:20:00 ) when I try to enter the Slug, the following appears: Error: Unable to parse value of "$slug=undefined". Please quote string values. when adding the Quote `{slug}` in the getProject it shows me Error: Cannot read properties of null (reading 'name') please help. Thank you so much.

@PrestonL1 10 ай бұрын

I'm having some trouble adding an _document.js file to add google font links. I want to use google fonts to customize it. I've tried adding a page/_document.js within the app folder, in the root, and within (site) but it's not connecting the links with google fonts. Any tips? ChatGPT can't figure it out for me. I know it's gotta be something simple that I'm missing. Thank you.

@KumparanLirik Жыл бұрын

in groq query, inside of categories i have a title, how to display title = article only

@paradoxalJohn Жыл бұрын

Has anyone else actually tried this? I'm following this step by step but I couldn't manage to either properly embed sanity or route '/admin'. When I try to go to this route, like Kapehe did at 30:05, the page is blank and terminal running the server outputs this: "SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse ()". I'm pretty sure I did everything correctly up to this point. EDIT: Solution in the first answer below!

@yaser8354 Жыл бұрын

Yep, the same error here, but try the using arrow function and export default like so: const StudioPage = () => ... export default StudioPage I think it is related to next v13.3.0

@paradoxalJohn Жыл бұрын

@@yaser8354 Hmm, weird. Did using the arrow function help you solve it? I'll try this tomorrow and see if it works, thanks for the help!

@iamnimish Жыл бұрын

@@yaser8354 worked for me. thanks so much! '💖

@yaser8354 Жыл бұрын

@@iamnimish Great! 🌟

@paradoxalJohn Жыл бұрын

@@yaser8354 Hey, it worked! Thanks a lot, for real. I will use this in a very important project that might help me get into my university's robotics league. If I do, I'll come back here and thank you again. I'd never have guessed that this was the problem!

@yaser8354 Жыл бұрын

What font family/theme is she using in her vscode? 🤔

@shakilhossain7967 10 ай бұрын

why my updates are not showing on next js while i am updating form the studio

@iamnimish Жыл бұрын

30:32 can anyone help me ? im having a white screen and no sanity login button or elements

@vladbalan5513 11 ай бұрын

I am not seeing my des toop appear, I keep seeing no document types even though all the code works in my VS Code. Any things I should look out for?

@grizsko7401 Жыл бұрын

is the admin route well protected?

@kasper369 11 ай бұрын

what if i dont want my next app to depend to sanity content cloud. Just sanity embedded in next with local data or data stored in some other db other than sanity cloud.

@quoctrungprc 9 ай бұрын

Thanks you!, So how can I add sitemap with this structure? Thanks you very mucn

@vilmarvieira4829 Жыл бұрын

nice

@MashaKovach Жыл бұрын

First of all, thank you so much for the video. I wonder, what environment do you use to switch between the site and the admin studio? It looks something like desktop version of Sanity or is it UI of a MacBook?

@ItsMe-od1js Жыл бұрын

After moving thing into new folders (site) and (studio) nothing is showing on /admin/, I check the files and folders and everything seems to be the same.

@josephmgift 10 ай бұрын

Anyone tell me why the localhost is refusing to update the content on the front end after publishing.

@jemimahkwakuyi7879 10 ай бұрын

I'm also getting this error? Have you solved this??

@josephmgift 10 ай бұрын

First I added "use client" in all the components but will bring an error after deployment. I have been looking at Next.js Revalidation. So I think the only solution is revalidation. I will tell you if I succeed.@@jemimahkwakuyi7879

@junaidiqbal4104 Жыл бұрын

why we have created schema in the next-app, why not in the sanity-studio repo ?

@SerafinBGG 10 ай бұрын

After i map over the projects i dont get anything rendered,and i dont know why i check my code and compare it with the source of the tutorial but cant seem to find the issue,any ideas ?

@harshrupapara7866 11 ай бұрын

hey does anyone know what vsc theme Kapehe was using??

@locanh5483 9 ай бұрын

I did like this but when I changed my content, the local applied but in production env, it was not updated util I redeployed. Does anyone have the same issue?