Build a Dark Modern Animated Website with Next.js 14, GSAP, Prismic, Tailwind, and TypeScript

[@TrostCodes]

I love this style of site and knew we had to build one together! I'm excited to see what you build and how you customize it to be your own! There's a bunch of great GSAP and Tailwind techniques to learn here, in addition to the solid foundation of Next.js and Prismic. Please share your final site, I'd love to see it!

[@irfansaeedkhan7242]

where to tag you ?

[@paradox9091]

Hi, Love your video but would you do like clone rebuild the other web sites like linear diagram or raycat that would be great

[@TrostCodes]

@@irfansaeedkhan7242 I'm on Twitter @TrostCodes if you end up posting it there!

[@TrostCodes]

@@paradox9091 Ah that's an awesome idea - I've got some ideas for other sites, but after those if there's more demand for this style site I'll look into something like that! I really like making sites that you can make your own, so I'd definitely put a twist on the site in some way.

[@gianatiempo]

Initialize project doesnt work unless using Chrome (failed to log in). After installing Chrome just for the log in and running "npm run dev" it fail with a cryptic error: [next] ⨯ node_modules/@prismicio/client/dist/createClient.js (259:0) @ Client.getFirst [next] ⨯ Error: No documents were returned [next] at async Index (./src/app/page.tsx:41:18) Looks promising but I dont think i will try it again... Both initial commands failed and there is not much help in the community forums or anywhere else.

[@Yesterday_i_ate_rat]

Thanks for this project, I'm going to adapt this design in a personal portfolio way

[@TrostCodes]

I can't wait to see how you adapt it, I'd love to see it!

[@jeandesauw7646]

This tutorial is very interesting for the interactive and modern design it teaches you to build, but on top of that, it introduced me to Prismic: a tool I've been missing for my freelance web design work! Thank you so much! I'll be recommending and using this technology!

[@TrostCodes]

Jean, I'm so happy to hear that! Thanks for the kind words, and I'm thrilled you enjoy building with Prismic as much as I do. I'd love to see what you end up building with it!

[@KunalKumar22BLC102]

At timing 1:35:00 , I am unable to find repeatable and non repeatable zones in my prismic slice machine, it just shows fields option how to work on the repeatable fields

[@Prismic]

Yes, correct a recent product update made it so that 'repeatable zone' is now a 'group' field that you can find by clicking Add Field and choosing Group. You'll add fields to this group in a similar way as I do for the repeatable zone.

[@adampage8621]

@@Prismic Does this change affect how we pull in the case study data?

[@digitalsahara6670]

Hi there got a error when starting the project which says no documents were returned. is there a issue with the starter kit by any chance?

[@jclucas6997]

I had the same problem. What worked for me is to delete the project in prismic and on my pc. Redid everything and then it worked.

[@Prismic]

Hey! This question was addressed on the forum; you can see it here: community.prismic.io/t/no-documents-were-returned-dark-modern-website/15520

[@TrostCodes]

I added a Troubleshooting section to the doc that should help you get unblocked. prismic.notion.site/Course-Resources-Dark-Modern-Website-9eda931a8b3743b9b3aaf0b7a561403b We're also pushing a fix soon so that people in the future won't hit this error!

[@adampage8621]

Getting an error at 2:43:30 with item.case_study (Property 'case_study' does not exist on type 'never'.ts(2339)). Anyone know the fix?

[@StudyLaboo]

I got the same error, and this fixed by "Repeatable Group". I also replaced "slice.items" with "slice.primary.case_studies".

[@tinotaylor]

GSAP with next js? Didn't think those worked well together.

[@AyanDas-rn9uk]

Love the video. Great information and prismic is a great tool for web dev. I want to know how can I use my own database to store all the different pages and make the admin panel call apis to my own database? @Prismic

[@bmediax]

Love this! More more more GSAP!

[@TrostCodes]

GLADLY! I love GSAP myself, so if you're hungry for it, I'm happy to cook up some more GSAP meals!

[@marcelino-dev]

Thank you for sharing another excellent video! I'm currently working on building my personal portfolio website with a blog section using Prismic CMS. I was wondering how long the free plan will remain available?

[@TrostCodes]

Hey Marcelino! That's awesome to hear-the free plan will be available indefinitely! We have zero plans to remove Prismic's free plan, and we see it as super important for supporting the developer community.

[@zainuldin9095]

Thank you for nice tutorial. please can you cover how to make vercel glob animation in which they may use svg path animation.

[@TrostCodes]

Hey Zain, thanks for the kind comment! I could try to add something like that to a future site - where is the animation? Is there a specific Vercel page where they have it?

[@arielelias2413]

Yes, this kind of modern designs we need in our develop community. Thx so much. We are specting for the next one!

[@karan_0207s]

Really informative video, its my first time exploring a cms with nextjs . I hope we will get more such videos!

[@neeshsamsi]

More GSAP definitely. Really uplifts the experience. Would love some dedicated time on that

[@TrostCodes]

I love hearing that, and that's a great call! Maybe in the next course we set aside a bit of time to directly teach GSAP basics before getting into the rest of it. Thanks for the feedback!

[@quentmadeit2623]

I followed the portfolio video and love it! I'm really excited to see you guys are making another site! Please keep making these video, they are really helpful for learning how to put together a future proof website.

[@TrostCodes]

That's awesome, Quent, thanks so much for the comment! I've got more sites planned, so it's great to hear you want more. I love the way you put it: "future proof websites." You're spot on, that's super important and something I'll always try to make with these courses!

[@mohammedsaad0761]

+1 would love to watch and learn from the upcoming build videos.

[@irfansaeedkhan7242]

this is epic, wow finally some one setting the top notch benchmark

[@TrostCodes]

That's so kind of you to say, Irfan! Thanks for the support and I hope you enjoy the course!

[@tfdesign4072]

damn this was a great tutorial!!!

[@angelDova_]

Loved the video and the Gsap. Def recommend using more of it in your future videos!

[@peruvianidol]

Nice job, Alex! I was riveted the entire 5.5 hours. ♥

[@pklass4859]

StarGrid doesn't work. I copied the Code from the snippet. Failure same as the Code from the final Github. Can you please give me the Code Snippet for the Tutorial at 1:20:50? I hope this will help others with that problem too

[@nuzairibrahim7522]

Lovely design 🤩🌹😍☺️😀😁😄

[@TrostCodes]

Thanks SO much Nuzair! That's super kind of you 🥰🥰

[@abdurrehman0206]

For anyone wondering what the font is and which VS theme it is, here’s the information: Font : Dank Mono Theme : Oh Lucy

[@SItgix]

really nice tutorial. so nice that i build it twice in a week just to deepen the concepts, please more of this and please more gsap stuff !

[@treyrader]

I didn’t know you could have nEXtjs without React.

[@hazard-funk]

Very helpful tutorial! I though some materials were gonna be behind a paywall but NO! its right there for FREE!?!? Amazing job making this tutorial.

[@patriksjeren]

This one seem a bit old compared to what you get today when installing a new prismic solution. I don't have non repeatable and repeatable fields? I can select group for repeatable fields but having problems getting the case studies to play like they should with the code presented here. The error is "Property 'case_study' does not exist on type 'never'." in the isFilled and return of the same parts. But maybe I have missed something. Will try that slice from scratch again.

[@TrostCodes]

Hey @patriksjeren! The repeatable zone has been replaced by the "group" field. So now to create repeated groups of fields, we use that instead. I've added a section to the Troubleshooting part of the docs for this course that contains more info and an image showing the difference.

[@FreeTrial0315]

I make this website full after that I fell like a developer and thank you man , please make more unthoughtful project like that

[@TrostCodes]

FreeTrial, that's WONDERFUL to hear, because you ARE a developer! Congrats on the site, I'd love to see it!

[@Pixelaze]

More gsap please.

[@Karthikmohan2310]

very helpful. more, more, more gsap please..

[@AjaySingh-jz8qx]

Mind blown after watching the tutorial

[@TrostCodes]

That's to hear Ajay! Thanks so much for the kind words and support, it really means a lot and helps me make more ❤

[@HenryHard]

Always getting an error if I try to create a Slice "An unexpected error happened while creating slice Hero". If you know what could be the reason for this, I would be very grateful for your help. Cheers

[@fxpin9293]

Hi, thanks for this great content. Did someone manage the CaseStudy part with the new version of prismic ? I'm struggling to map my items

[@TrostCodes]

Hey @fxpin9293! The repeatable zone has been replaced by the "group" field. So now to create repeated groups of fields, we use that instead. I've added a section to the Troubleshooting part of the docs for this course that contains more info and an image showing the difference.

[@cubeunicorn4055]

what fonts you are using in the vscode?? PLease tell me?

[@TrostCodes]

Hey CubeUnicorn! The font is called Dank Mono - you can find it and my theme and other things here - trost.codes/uses/

[@cubeunicorn4055]

@@TrostCodes thank you

[@billalchami8638]

Exactly what I need, Nextjs with Prismic, + some bonuses like TS, Tailwind & GSAP (the most welcome bonus) Awesome stuff, keep'em coming please 🔥

[@JustPerfectDesigns]

Awesome tutorial. Thank you. Quick one, please what's your vscode font and theme? I really love it

[@bisaanimations]

Is there a way to get the slice machine code to work on VS Code? I keep getting an error command saying that the "zsh: command not found: npx" each time i try to run the slice machine code

[@m.josefaolivalbato3440]

El TP-link tiene wifi pero no llega internet a mi Tv

[@luizricardo.design]

Amazing tutorial! I would like to make a suggestion for the next one in NextJS, as you are using it in conjunction with GSAP, you could add preload and page transition, in a project I was working on I couldn't do it with the Prismic API due to the server.

[@Deus-lo-Vuilt]

Thank you very much for this project, I hope you can upload more content with Nextjs, it is much appreciated!

[@movietime5333]

at minute 13, hour 1, it starts to get very confusing, I got the slice, I got the page, but I don't see the form that you see ...

[@briananderson8632]

I've never used a CMS quite like Prismic before, but this tutorial was great! I will definitely use this to create my own portfolio website so that I can make updates and changes on the fly to the content and have it go out immediately. One question I have is can I integrate custom components into my Prismic project or does everything have to be done via slices? For example, if I wanted to have some static content that wasn't controlled by Prismic how would I do that? Maybe just an empty slice with my custom components?

[@ab_azmi5584]

I always wonder how this kind of web are made. Now you just give the knowledge for free.Thank you

[@tokomnyori6730]

Everything is working smoothly but StarGrid is not displaying.

[@rajatsingh383]

What terminal is it ? Ui is so impressive!

[@Dr.TimeWizard]

Just starting this and someone who is rather new to tailwind I couldn't get it to work. Had to stop the server and run npm run build --watch, and then restart the server to get it to work.

[@nootopian]

Lovely stuff. Just to let you know the chapters are missing the integrations section.

[@gibbell]

At the 30:07 mark, I'm unable to create a "Single type". I keep getting "Internal Error: Custom type not saved". I even tried creating a "Reusable type". Same error message. Local host 3000 and 9999 works fine. I'm unable to continue with the training.... 😞

[@StudyLaboo]

I got the same error, and this fixed by "Repeatable Group". I also replaced "slice.items" with "slice.primary.case_studies".

[@gibbell]

@@StudyLaboo Which file do I modify? Or is it on the Prismic site? A little bit confused.

[@StudyLaboo]

​@@gibbell oh sorry for misunderstanding! I was talking about at 2:43:30 with item.case_study

[@scorpion32]

You lot should support yarn , it's a lot faster than npm , took me ages to initialize the project

[@HelveticAIKnowledge]

after downloading this, how can we modifiy and adapt the text to our own project?

[@Samuelsward96]

Stargrid is not working for me. What could be the issue?

[@Prismic]

Hey Samuel, did you try comparing it against the final file in the github repo? Also make sure it’s a “use client” component.

[@jellycoding]

Ok... you are a much better creator than me. But my screens are bigger than yours... LOL

[@Learnwithjoseph]

quick question on the porolio each time update or add some new staff on my prismic i have to deploy again any idea

[@TrostCodes]

Hey @learnwithjoseph! Check the part of this video at 04:09:05 and see if all of that stuff is set for you. If you have all of that set and it's still not working, please reach out in the Prismic forums and we'd love to help!

[@Learnwithjoseph]

so i need to add the api for revd

[@Learnwithjoseph]

@@TrostCodesi do have the folder

[@TrostCodes]

Nice!@@Learnwithjoseph Did you add the webhook in Prismic so that it hits your revalidate path when you publish or unpublish documents?

[@marcelino-dev]

I've encountered a caching issue while hosting my Next.js project on Netlify. Following Prismic's documentation, I attempted to create a webhook using Netlify's provided link, but it didn't resolve the issue. Thankfully, Netlify introduced a new runtime version, v5, which you can opt-in to use. After enabling it, you'll need to create a webhook from the Prismic dashboard that triggers a call to your domain, such as yourdomain/api/revalidate, whenever the content is published. This will solve your caching issue if you're on Netlify and it is the same on Vercel as mentioned in the video. I hope this helps.

[@VP-qd2ed]

how di d you manage to get thisd button can ou please exlain is there a css generator

[@tokomnyori6730]

More more more.... gsap please. 😅

[@Iamroot27]

There’s an issue with this video , right from setting the project up 17:02 , how did you get another page and homePage suddenly

[@TrostCodes]

Great question! I didn't explain that well enough, those are two pages that come with the minimal starter template. When you run the initial commands that we copy and paste from Prismic, they get pushed to your Prismic repository. You can see the starter template here with those same two pages - nextjs-starter-prismic-minimal-ts.vercel.app/

[@Iamroot27]

@@TrostCodes i created mine from the beginning like three times now but when I start my development I get ‘const home = await client. getByUID("page", "home");’ Error: The provided ref is no longer accessible, it has expired. Master ref is: ZfgEjhAACIAFWlp. how do I fix this please

[@Iamroot27]

I’ll love a reply , because I’m about to create something really fantastic with prismic

[@TrostCodes]

@@Iamroot27 Hey, seems you might have an error with the Next cache - try deleting the .next folder in your project, restarting your server and running npm run dev again

[@Iamroot27]

@@TrostCodes still the same await error, no documents were returned

[@anmol-mythyaverse]

Can someone give a list of the reference websites mentioned or referred to at the start of the video?

[@Prismic]

At the bottom of this blog post frontend.horse/articles/the-linear-look/

[@anmol-mythyaverse]

@@Prismic Thank you so much!

[@Walediwura]

Please what theme and fonts do you use, I really love it

[@abdurrehman0206]

Same Question . Did you find out?

[@abdurrehman0206]

Dank Mono Font and Oh Lucy Theme

[@vijaymohansrirangam2805]

which theme do you use for your vs-code?

[@AppraisedVoice]

What font does he use for his VS code its so nice

[@peacewithstoic]

We need a svelkit version of it pleaseeeeeeeeeeeeeeeeeeeee

[@Prismic]

Well, here it is! kzbin.info/www/bejne/rGaxlK1rdsiLoKs See you there.

[@brhoom.h]

what about if I build this with Nuxt?! what is your opinion? does it work? well I get benefits from this approach?

[@Prismic]

Yes, it's totally possible building the same site with Nuxt! You can start from the same minimal starter, Nuxt flavoured, here: prismic.io/dashboard/new-repository?framework=nuxt and start building! We'll also have similar tutorial centered around Nuxt coming later this year.

[@brhoom.h]

@@Prismic thank you so much 💓

[@mahdiandalib186]

can you create angular tutorials also?

[@techinsider3611]

please make a tutorial for sveltekit

[@BielAltimiraTarter]

Just installed prismic and got an error when running for the first time "No documents were returned", giving up at this point.

[@Prismic]

Hey! This question was addressed on the forum; you can see it here: community.prismic.io/t/no-documents-were-returned-dark-modern-website/15520

[@TrostCodes]

I added a Troubleshooting section to the doc that should help you get unblocked. prismic.notion.site/Course-Resources-Dark-Modern-Website-9eda931a8b3743b9b3aaf0b7a561403b We're also pushing a fix soon so that people in the future won't hit this error!

[@avhiro]

What font are you using?

[@abdurrehman0206]

Dank Mono Font and Oh Lucy Theme

[@londelidess]

I waited for you

[@TrostCodes]

I hope it was worth the wait! What other kinds of websites would you like to build? I've got some fun ideas, but would love to hear yours!

[@londelidess]

@@TrostCodes I love your content of CSS lessons like last time of made a portfolio. I also really like Prismic compared to other headless CMS I use at work. I just wanna keep seeing your prismic and CSS combo. I have a idea though. I want to see a project you connect outside db or storage out of prismic in case I can use huge data which is too heavy for prismic itself.

[@abdelrahmanzaitoun4402]

How amazing

[@TrostCodes]

Thanks so much, Abdel!

[@greatmoments777]

❤

[@TrostCodes]

Thanks Great Moments!🥰

[@sharhilzofi]

More, more and more GSAP 😍

[@nileshgadekar270]

More more more GSAP please

[@mohammadabbas1623]

Man o man

[@TrostCodes]

Thanks Mohammad! Hope you enjoy the course! 🚀

[@mohammadabbas1623]

@@TrostCodes Can I modify this site and use it for my agency landing page?

[@TrostCodes]

@@mohammadabbas1623 Absolutely! You can use it for whatever you'd like!

[@tokomnyori6730]

Thanks

[@chudchadanstud]

Wow incredible and sleek...but it doesn't work in the real world. Most of your userbase use mobile and most of those have a weak cpu. If I see fancy animation within 2 seconds of opening a site, I click the back button. I don't have time for this. Imagine walking into a store and staff are doing some ritual or dance to welcome you. Fun the first time. Annoying the 100th time.

[@gl1033]

This font used in the theme is disgusting, but everything else seems great 👍

[@jasonhall6526]

Wow, I love how you need to jump between like four different windows to work on one component! Prismic is amazing!