How to personalize a Next.js site with Contentstack and Uniform in 10 minutes

hey tony what is up welcome to another episode hey man good good everything is great how about you how you doing all good ready for some friday stuff some friday action this is gemstack friday with tnt [Music] i'm dynamite hey everyone i got some jam stack news for you starting with notion api going general availability now you can build out headless site with notion that's really cool um yeah for me it's it's a it's a really surprise because uh the tool is really for collaboration but taking that and making now a website out of it by utilizing apis and that's really cool so public beta uh take a look give give give it for a spin see how it works you there's already starters out there with next js and you can build that out really easily if you have a lot of content you've been storing a whole bunch of stuff in notion that's pretty cool all right moving along to gatsby new version 3.5 was released they're focusing on now on performance and experimental ssr as part of this release so it's interesting how next and gatsby they're both like focusing on performance and every release it's always performance performance cli startup so different things but uh i don't think this releases that uh that of a grade there's nothing much there but obviously ssr in gatsby now uh that's something interesting and uh gotta give it a try sanity has launched sanity exchange this week that's really nice so you can find plugins there learn what's new and share your own plugins with uh with the developer community so i like to search around and read all about security authentication so first thing that i saw here on this page was next auth sanity plugin that's real nice i don't have to build anything i can just go here install it get it into my sanity studio and i'm done all right moving along next i got node.js since we talked about jam stack javascript i thought maybe i can throw some stuff in here that's more of a non-static side generator world so pretty cool uh some updates here uh they added a diagnostic channel uh you can send some messages now uh also they have support for crypto module for ui uuid that's interesting just uh some they're keep improving keep adding new features into node.js so that's pretty nice netlify update so now you can configure build plugins by deploy context so think of it this way you build a site and you need to do some stuff at that time so you have these uh enormous devops that you used to build and now you have this advanced uh cdn platforms such as netflix that has built-in devops into it and how can you keep expanding your devops platform and how can you do post-build steps right so one of the ones that i use is really cool is a site map i generate a sitemap for my site and then submits it to google automatically i don't have to do any of the manual stuff with a enablement of plugin it's already part of the the whole process that's really nice and just explore you can just add them all into your tamil files configure them there and they will run and they even give you some examples here down the page um down the page so image optimization site map so pretty nice give it a try amazon cloudfront announces the edge compute capability now as january availability so that's cool now you have another platform that will provide you with um with that functionality so everybody's moving the edge compute edge handlers so now you have options all right so we talk a lot about jam stack we talk about optimization we talk about speed so an article i wanted to share with you guys this week was uh optimizing web vitals using lighthouse adios money if you follow him on twitter he writes all about optimization improvements to your front-end uh web to your website and to your front-end code and here he goes kind of through a refreshing how you can get your site and core web vitals to that perfect score and how can you actually take advantage of google lighthouse tool to help you do that corvette vitals are creeping up on us in around junis time it will kick in so make sure your site is optimized to the best and last but not least a little uh tool that i wanted to share with you simple login there's so many sas products out there we keep adding emails everywhere we're registering we're exposing our email we get a lot of spam sometimes so this tool will actually generate aliases for you for each website and then you'll get all of the stuff in your one mailbox so security in mind pretty nice give it a try all right that's it for me give it a thumbs up if you like what you hear here if you want to see something else something different let us know in comments thank you so in this episode what i wanted to do is actually go through like a scaffolding setup through our uniform platform to create like a gemsex site that we can personalize but also that has content stack as a back-end so i thought maybe we can share screen and you can just kind of talk me through it and then together we figure out what to do and we actually show it on the screen on this video what do you think let's do it all right so let me just click share screen and then we can go from there here we go time to do some interesting stuff we talked about all the time now the extraction i kind of want to go through stuff and maybe even show a bit like code things you know so what i just did i went to uniform.app this is our dashboard right so let's just go for a new website and this will be the jam stack fridays websites whatever let's okay sure very creative very creative okay so we're just gonna go with a starter jam stack yes continue okay so tony tell me what are we looking at here what is all this we are looking at i don't know there's many ways to call this but this is our onboarding flow uh for customers or for partners or whoever wants to use personalization whoever wants to use just the best way to onboard the new modern technologies we will help you do that exactly so today i want to use content stack i want to go to netlify and i want to use next let's not do analytics for now because i haven't actually set up an account i haven't used analytics in a while maybe this is this is kind of good right so i think when i click continue a whole bunch of scaffolding stuff automatically will happen so let's see okay so we have to log into content stack i might have already been logged in oh no not yet okay um and uh while you're typing that the google analytics that we skipped it can be easily added later because yeah it goes as a part of environment variables so super nice okay so that's cool so i have a content stack account so right i work on the mega line so i do have a couple of stacks but like let's just put it in our uniform systems right that's the best place because we work at uniform okay so press here to create the stack okay so we're gonna make a content stack stack i love that and it's gonna be called uniform optimize starter sure let's do it let's do it how long we're gonna wait that would be nice right if it worked my internet is quite good well that was fine okay so let's install the uniform optimize extension sure let's go i love how fast this is okay install the uniform starter content also cool so we're kind of doing api calls behind the scenes right to just fill up the the content here back it's all of this brings back joy into web development yes because you know when i used to work at agency right we called this the magic button we all wanted one button to press and then it would scaffold like a server a ci stack a front end a back end and all of it and it this is kind of it because um we didn't really have that in the end and now i'm seeing that it works so it now wants me to deploy the netlify sure so i'm logged into netlify already because i use that all the time okay so uh it wants me to connect to github to make a repository for me right yep because during the build process it will have to build based on some code obviously yeah okay so it how how is this so smooth so this is like a netlife template i think right yep okay okay so my repository name will be uniform optimize next contents like starter if i change it so this will change to get in github right correct so in your github repository in your github one of the repositories will have this name let's stick with that unimaginable boring name it's all good so we actually have a content stack api key so this is going to go in the to the environment variables right correct wow okay so if you're building failing or for some reason then maybe you have a problem with your keys and those environment barriers are incorrect but you can change this always right it's just now this will just go in so do i need to copy paste something like this no nothing so uniform is pre-populating all the data for you so you just save and deploy yep save and deploy and you see that google analytics right there optional you can always add it later yep oh that's cool so it actually just made a new website inside my my personal team here and it's starting up the build they're like i like it so let's go back here and see well let's just click done deploying yep okay so okay now we need to set up the automatic publishing so this is like a web hook right so when i do a change correct that the website is redeployed okay so find your netlify site well we're we're here we're good it's just building now so this is my netlify site get your build hook we configure the build in netlify called uniform okay copy its url we can do that deploy settings there should be some build stuff here right yeah there it is okay so this i have to copy yes and then we paste it here continue some camera changes for me for a second oh it's all good it's all good that's how these things go yeah we're winging it a little because i kind of enjoy just trying stuff out on a video while we live record it and give my feedback along the way because just like you tony like i think we've been at web development for a long long time right and so when something just works or not and giving some feedback live like we do now we we actually have the ability to do that because we've been around for a while and i signed i will probably sign sound a little bit biased now but this worked really well it's just me i don't know it it is i mean this is like amazing like just right it just works let's go and have a look at that uh deploy okay so that actually deployed oh wait no it's still in progress yeah go ahead maybe hit that yeah we'll see that i think it's done if you let's go all the way down oh it actually is live yep okay so let's have a look and there we go so this is now a gemsec website based on next with content from content stack on netlify and we did that in five minutes yeah i think so that's a good start so how about let's look in github to find my um my code right okay so we are now we are now in github and i found my gemsec friday's website so i'm just gonna clone that real quick so we just saw it work right and then here we can actually start adding personalization okay let's see if i can do this [Music] okay let's install it but while we're installing let's have a look at content stack yep login i think i'm already logged in yes i am nice okay so not mac alliance obviously in uniform we actually have uniform oh this is the one we started right yes we didn't actually add a name there that is interesting what is your first name well the name for this stack oh yeah no it's interesting it's part of the onboarding just same same name but you can change it if you want yeah sure well maybe not for now but yeah um well let's have a look at that website again so the site is here so this is like a header and we have some talks list and stuff like that okay so you can go so go back to dashboard go back to the dashboard maybe and click on that home page on top page exactly and there we go here we have the hero the conference talks why you should attend that kind of all um connects to hero list why you should attend like what you see okay cool so the personalization well let's just see if that how that works right so now i go to the developers talk track right i'm interested in developer stuff and when i go back home this now was personalized to home to hero for developers that just worked but this is jam stack right so it feels really dynamic to me so now i went to marketers and let's go to marketers again and now this is a marketer hero okay cool and so i think here when we go to the home page we actually have different options right uniform conference developer hero marketer hero that's the stuff we just saw right so this is without personalization so let's open this guy yeah default you need some default variants so sure something gets loaded when exactly if you don't personalize you want something else that's not personalized right so this is the part i wanted to show because now we're adding the intent tag of developer to this component here right so so let's go on yeah yeah so this comp this component is um for our developers who are interested it's an array list of objects and every one of those objects is a content type within 10 tech together with it and that's kind of how we need to nest it in content stack in order for us to be able to consume it yeah on the front end so take me through in the code where we can see where it chooses that variant okay let's go ahead and step out into components components sure and go to personalize hero there it is and scroll down to personalize component line 31 okay so that's that's the one i wanted to to look at because this is basically a component that uniform built that's called personalize you give it the variations and then those this is just json data i think based on what we see here right this is all json stuff that comes out and so that's those variations and then based on the personalization score from the tracking that we did like clicking on developer it chooses the right one here right and then it just uses the hero component to fill that out correct okay what you can also maybe explore further go ahead into a lib folder yeah and go into content stack if there's anything like that yeah content stack yep and this is an interface that allows us to communicate with headless cms consume the data and pass it as props into our component oh yeah here because the personalized hero fields is actually now it has this uniform option personalization lists which is actually it's it's kind of the hero options field right that's this one correct okay yeah so that's how it connects to it like this is some fun stuff and so now i can also run it locally right but i don't think we have to change a bunch of code maybe what we can do because tony you have you don't have that much time today how about we actually add some personalization right sure so what if you want to run and logo about if you want to run it locally all we have to do is just copy paste the environment variables oh yeah but i haven't done that now so for now let's let's let's leave it um we can um we'll put some links in the description for people who want to explore how to do this and there we have a lot in the docs right okay so how about we go into personalization and add like an intent for personalization so what should we do click on that plus button on the right and let's give it a name whatever you want what intention do we have do we want to granular i don't know our you know what's like how about we do it like that i enjoy next right because i have my next hat on i'm i i'm interested in next content for example let's just call it next i would not i don't want to go into like a personalization specifics in this but eventually what you would do you probably will do a developer and knox would be in an enrichment but we can cover exactly other series that goes quite deep so let's let's wait with that shall we just do a query string yep let's do query string so what that means is if i click on a link about next and i go on our on the website we just built and there's a query string about next that's basically what that does right so let's do next the query parameter should be ut you can um something and then framework sure and then it should equal next yep you can leave all the defaults and just say let's just let's just copy this because i'm gonna have issues typing okay so let's publish this stuff yep so we just added a signal that is a query string to an intent that is that i enjoy next content which i do we're running on next by the way but that's different story let's go to the cms now and add a variation for the fact that i like next yep right so we have to create a new entry a new hero in that wrapper okay create so dim likes next [Music] we have something uploaded yet yes we do i look like this guy um okay so now we reach the intent tags and then there is next it's isn't available fancy well we clicked on publish didn't we but yes yeah okay let's save this stuff so do we now need to um publish like the hero itself or how does no just just go ahead and hit publish on the bottom and then all of them production publish now yes publish yep publish with reference okay so now that this content is there do we we kind of need a new deploy right it's all oh it already started yeah of course we have the hook in place correct smooth smooth okay this is amazing that if even though i have to run and i have such we have such a limited time we can actually get it done we're actually going to get this stuff done while tony has to run into another meeting i like it okay so now we're doing a next build here um by the way did you notice how fast this build is actually that's cool but that that's on netlify end and of course next builds quite well yep okay so um let's let this run for a second so the whole point is that we if we now add let's say there's a tweet about nux right and it goes to this conference what they could do is add this utm parameter into that link that i click as a developer and it says hey are you interested into next or next click on this link and it goes here and so if that url is there we can personalize directly on the page so let's see is this almost done maybe you have to refresh a bit i think it is done yeah yeah okay before before you do that go ahead and clear maybe uh click free forget about myself yeah so i'm just like i don't exist okay so now do utm framework equals next that's what we said right and there it is tim likes next i like it when we try to demo something and i haven't done that very often that it just works that is pretty cool okay so this actually worked and now i can still go to developers and then come back and now it's developer again and yeah so maybe for now let's let's keep it at this because this this kind of worked really well and we have a jam sex site that we deployed in like five minutes and we personalize it and we have the code locally and we can just poke around in it and i'm gonna be fun i'm gonna be on time in my meeting how about that so and i'm looking at my camera right now blinking rat that my battery is low how about that everything fits so tony thank you for um talking me through this and i'm gonna have a bit of fun editing um speak soon speak soon cheers have a good weekend bye