Personal Website Tutorial with Next.js 13, Sanity.io, TailwindCSS, and TypeScript
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
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!
Thank you for sharing your knowledge with us!
And looks like Jason got you using Arc browser 😂
Awesome, thank you!
Do you have your own channel on yt or only twitter?)
@@rrahll yt
Wow, the useful VS Studio keyboard shortcuts alone make this tutorial worth watching! Thanks Kapehe!
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 .
Please use the standard VS Code theme, it took me over an hour because of = (==) 43:25 and → (->) 44:23
=> or →, I'm guessing => 🥲
I thought you meant -> but the problem was also == not = 😥
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
broooooooooooooooooooooooo, thank you!
@@flor.7797 Gracias, no conocia ese theme, me salvaste
This is a phenomenal tutorial Kapehe! Accessible, comprehensive and fun. Thank you so much!
Much needed course as new app directory is introduced ❤️
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!
Kaphe been following her since couple of years great teacher
thanks! that means a lot! 🤙
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!
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.
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 😂
Amazing video! I am using Next and Sanity for years and this is a great recap of the new important stuff. Thanks! 👋
Thank you so much Kapehe and freecodecamp for this! Wonderful tutorial!
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,
omg, this drove me crazy! Thank you !1
thanks
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.
thanks fancy, that error was driving me crazy!!
Thank you @fancybaguette, I was gonna through my laptop out of the window, because of this error.
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)
Thank you - using the 'Hard Refresh' works!!
To be clear, use in the browser. For MacOS use CMD + Shift + R
Is there any solution for this to avoid doing hard refresh?
@@DiarioDeUnBoludo - 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.
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.
Ugghhh didn't want to use the app directory yet, but looks amazing! Thanks for making this available!
Bravo Kapehee, super useful, more of these, MC and Happy New Year! :)
Love from india ❤best free resource for coders in the world...Thnks free code camp....
You are a great Presenter Kapehe! Thank You!
@ 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.
Great tutorial, thank you Kapehe!
Thank you. Great insight into how sanity works.
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.
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.
My files are not transferring at all 😮💨
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
Genial, muchas gracias por este valioso contenido
Thank you for a great lesson!
Thanks for watching!
Im not sure, ive ever commented on KZhead but Kap, you are the best 🎉🎉🎉🎉
Thank you so much!!! Super clear explanation and very nice voice!
Thank you very much for this content, I`ve love this video. It help me a lot!
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?
I have the same issue here and I couldn't fixed it yet
Very helpful. Thanks Kapehe.
Thanks for the tutorial. 🙏🏻
Thanks, that's really cool stuff.
thank you Kapehe. learned a lot
Great job! Your account is an excellent resource for anyone looking to learn about [programming ]. 🤩
Thanks, pretty useful to learn Next.js 13
Thank you this is awesome!
This actually looks something like i might pull off
Me everytime freecodecamp uploads
Nice!!
Thank you so much, you save my life!
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
sanity is interesting...thanks for this FCC
Fantastic video, learnt so much from it. What's your setup to record these sessions? In particular the tool to change tab in browser?
I was in dire need of this. Thanks #freecodecamp
Great video.. Any suggestions on managing datasets with this setup? Trying to have a sandbox/live env of the cms.
Would this work for being my developer portfolio showcase? or for a small e commerce site?
Yayyy. Done and dusted!
That free aditional festures 🙌🙌🙌
great tutorial
Nice, thanks a lot
Needed that
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}
Were you able to resolve the issue?
This is how must be real tutorial. Thank you for acting like real teacger🎉
49:15 doesn't get updated data in NextJs frontend even though i changed and updated through Sanity desk many times, Please help anyone??
I'm also getting this error. Have you gotten any luck?
@@jemimahkwakuyi7879 Unfortunently, Not yet. However when i try with page router or whenever i make client component, It works
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!
I ran into the same issue. Try adding the "styled-components" package to the project. Should fix it
Greetings! 🎉
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.
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.
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.
Really love this video! I'm curious, what font are you using in your VS Code?
Operator Mono!
i would really like to know
It was fun. 😁😁
Is it possible to make the sanity pages static? Because I would like to use something like next-sitemap to create sitemaps for them.
Hello Kapehe ! what would it if i make private sanity project rather than public? where should it mention ?
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!
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
@@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!
@@yaser8354 worked for me. thanks so much! '💖
@@iamnimish Great! 🌟
@@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!
Error: Cannot read properties of null (reading 'name') return {project.name}; how to fix this?
I'm stuck at 1:19:50. after refreshing the page I'm get this error
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?
Thanks!
you are fun ! 😍
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.
I've built 5 or 6 sites according to this tutorial, and it's been working splendidly...until today! Updating one of my schemas didn't take, studio didn't refresh, and now after trying to update and back out the update of Sanity, just everything is broken and the migration guide on the Sanity site for v4 to v5 is coming up 404. I am using the app router as in this tutorial. I really love Sanity but I'm just ramping up several sites and this is not fun to have to spend all day getting back to something that was working fine! Where's the migration guide!
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?
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?
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?
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
Anyone tell me why the localhost is refusing to update the content on the front end after publishing.
I'm also getting this error? Have you solved this??
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
6:27 , can I please can a guide to a terminal like that , or which terminal is used here ?
why my updates are not showing on next js while i am updating form the studio
Thank ❤
great tutorial. Does anyone have an implementation I can look at where I can manage my sanity code in a totally separate repo, and ping data from a separate Next app?
Thank you dear Kapehe for this great tutorial. When i add something in the admin page for some reason it doesn't get fetched and showed on the screen. Have you also had such a problem?
I'm facing the same problem
hard refresh your home page in your browser (cmd + shift + R on macos)
@@tonywest9146 hard refresh your home page in your browser (cmd + shift + R on macos)
when i try to update sanity it does not reflect on the alive website, i changed fetch functions to cache: no store, it didnot work. Than i have tried to revalidate:60 but it does not work too. What can i do?
i have solved by adding this to main page.tsx export const revalidate = 60;
@@allyk904 bro I made my home page a client component by using "use client" at the top of the file and it worked
Solved this by adding the useCdn:false on the sanity-utils.ts:: export async function getProjects(): Promise { const client = createClient({ projectId: "XXXXXXXX", dataset: "production", apiVersion: "2023-08-09", useCdn: false });
I was able to see my projects from sanity however when I went to add the third project it didn't show up. I then edited my first 2 projects and those edits are not being reflected in Next. Anyone else come across this? I have no errors and have checked my config with the source code as well.
I think it's just a problem with the rehydration between the frontend and backend, simply adding a revalidation fixed the problem for me. const revalidate = 60 const query = groq`*[_type == "project] {_id, _createdAt, name, "slug": slug.current, "image": image.asset->url, url, content}` const data = await client.fetch(query, {next: {revalidate}}); return data;
@@padukes I tried this but did not help... 😔
@@fertavora Try putting this code at the bottom of your layout.tsx file (in the root of the site folder, not studio folder). export const revalidate = 3; Keep in mind that Next.js caches data by default; which is why when you do cmd(ctrl for windows) + shift + R you should see your new data because you did a hard reset on the browser.
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?
I'm at 1:44. Had a terrible time trying to figure out why the Pags schema wasn't showing up. I finally figured out that page needs to be added to the sanity.config.ts. (`schema: { types: [project, page] },`). This was never relayed in the video.
thanks
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?
For me updating the studio as it happens at 49:00 does not update on the page where I'm fetching the data. I have to do a hard refresh(ctrl + shift +r) for it to update with the updated data. When I deploy to netlify, it doesn't update at all no matter what I do. Please I need some help cos I doing this for a client and I've got a deadline to meet.
Hi, I'm having the same issue it is frustrating because I need to learn sanity with Next. Please hit me up if you have solution !
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?!
thank you so much for this. please how do we go about adding pagination to a project like this. please I need help on this
Next comes with router integrated, check it the documentation
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?
Is there a way to sort your sanity posts on your rendered website by the createdat date strings?
I''m stuck at min 30. My localhost:3000/admin didn't work. Uncaught syntax error: ündefined" is not valid JSON. I follow all steps. I have both servers up and running. The only difference is that in the file sanity.config.ts I added at the end this line of code: export default config. Otherwise it gives me an error in admin/page.tsx. (Error is "module has no default export")
Same issue here màn, so weird and annoying these frameworks.
you ever figure it out?
Is that an extension she is using that prompts the green light bulb and it imports the file/object/package needed?
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.
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?
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
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.
If you've already learned vanilla JavaScript and CSS, now you can enjoy learning to do the same things over again with TypeScript, the latest and greatest framework and a newer version of CSS. It never ends. I would not want to be a web developer.
agreed
It's getting ridiculous
if you truly understand js and css, typescript and tailwind is only a matter of googling. which is a skill you likely learnt from the start. hell most of the types needed are given to you if you use vs code just ctrl c, ctrl v
@@Eric-qs6mq So you just have a never-ending task of Googling newer ways to do things that you can already do instead of actually being creative..
you wouldn't want to be any developer at all if you don't like constant learning... ;)
Thanks you!, So how can I add sitemap with this structure? Thanks you very mucn
Hi! I am super curious about her bottom-up terminal. Which emulator/plugin is it?? 😀
@Birnesh Eswar I think it is warp :)
why we have created schema in the next-app, why not in the sanity-studio repo ?
What font family/theme is she using in her vscode? 🤔