Next.js Conf - Stage S

Today we'd like to show you the future of Next.js  but first we have to go back to the start. When we created Next.js in 2016  it was a server rendered framework   for building React applications. Over time we added tools like automatic static  optimization to help developers achieve a   consistently fast experience whenever possible,  next we became the first hybrid framework   adding support for static site generation  then we added incremental static regeneration   helping you scale static with faster builds and  the ability to fetch new content without a rebuild   developers could choose on a page by page  basis which strategy worked best for their   requirements we tried not to be dogmatic about a  single solution and instead empowered developers   with flexibility. What we found though was that  speed and personalization were often at odds. Server-side rendering allowed us to personalize  content for our users by computing the HTML on the   server for each request however it was difficult  to have consistent performance and reliability   guarantees. Static site generation allowed us to  consistently serve fast content by caching files   at CDN edges around the world close to our users  however we lost the ability to modify the HTML   based on the user's request. We can make content  more static to solve speed or we can make content   more dynamic to solve personalization the  challenge is to do both at the same time   what if we could have the power of dynamic at  the speed of static our solution is to embrace   the edge but what is the edge? Like CDNs  the edge sits between origin servers   and our users but unlike CDNs that store  static content only edge servers can both   store and process data. Let's hear from Suzanne  about how we're addressing this challenge. Suzanne: Today we're introducing middleware in  Next.js and edge functions on Vercel. Middleware enables you to  use code over configuration. This gives you full flexibility in Next.js because  you can run code before a request is completed   based on the user's incoming request you  can modify the response by rewriting,   redirecting, adding headers, or even streaming  HTML this works out of the box using next start   or deployed as an edge function on Vercel edge  functions lets you run code close to your users   they use a strict runtime that  supports standard web APIs like fetch   this runtime is built on V8 an open  source and high performance JavaScript   and web assembly engine using V8 provides  a hundred times faster startups than Nodejs   on virtual machines or containers that  means there are no cold starts, ever. Middleware can be used for anything  that shares logic for a set of pages:   authentication, bot protection, redirect  handling, unsupported browsers, feature flags,   A/B tests, server-side  analytics, logging and more. When self-hosted middleware works out  of the box by conforming to the standard   next build output any hosting provider can be  configured to support middleware at the edge   and Vercel supports this new runtime for all  users today. When using Next.js on Vercel   these edge functions are  deployed globally by default   as a developer you don't need to  worry about configuring infrastructure   and Vercel automatically optimizes your Next.js  application for the best performance. First, let's   look at our base case: a static commerce item  with no personalization this page loads quickly   and if I open up my VPN and change to another  region across the world it still loads fast.   This is because our static assets like HTML CSS  and JavaScript are cached at every edge on Vercel.   Now let's try the same thing with a  dynamic internationalized commerce page   based on the user's location it offers  a discount on the price of the mug   this still felt really fast because our logic for  determining the user's location and returning the   discounted price is deployed in US East.  If we switch back to Japan you'll notice   it's significantly slower why is that while  our static example was cached and immediate   our dynamic personalized example had to query data  from our origin server in a single region US East   due to cost or complexity teams often don't set  up a multi-region deployment for their data layer.   This puts speed and personalization at odds.  We can make content static to solve speed or   we can make content dynamic to solve  personalization. Using middleware deployed as   an edge function to Vercel we can have dynamic at  the speed of static let's take a look at the code.  We can define a middleware using  _middleware inside the pages folder. Since this middleware is underneath the /edge  folder it will run before all requests to   slash edge this function looks at a user's  location and then rewrites the request to   /edge/${country code} Let's try it out. After I  turn on the VPN we can navigate to /edge in Japan   it's instant but notice the url didn't  change under the hood our middleware is   rewriting this request to /edge/jp  which has been cached at the edge   giving us high performance  personalization with no delay or layout shift. Lee: What Suzanne just showed us lays  the foundation for the future of React   and Next.js. At React Conf 2017 Guillermo showed  Next.js to the world with a Hacker News clone.   This demo showed the ability to server  side render React applications with   zero configuration. I'm excited to share we've  rebuilt that demo to use React server components. React server components allow us to render  everything including the components themselves   on the server this is fundamentally different from  server-side rendering where you're pre-generating   HTML on the server with server components there's  zero client-side JavaScript needed making page   rendering much faster. This improves the user  experience of your application pairing the   best parts of server rendering with client-side  interactivity. We've been working with the React   team at Facebook to prepare Next.js for React 18,  server-side streaming, and React server components Let's take a look at the updated Hacker News  clone. On the left I have the client side   rendered version of our Hacker News clone on the  right I have the React server components version   I'll use a Chrome extension to reload both tabs  at the same time on fast network speeds you'll   notice they load about the same but not all our  users have the same device and internet speeds   as developers. Let's simulate a throttled  network speed and compare the results again. If we reload both examples you'll notice that  the server components version renders instantly   this is because we moved computation from  the user's device to the server whether it's   my local dev server or the edge. What if the  API itself is slow and not the user's device   if we look at a completely server rendered example  you'll notice we see a browser loading spinner and   a blank white page while we wait for results from  the server it's either all your HTML or nothing   with server components you can stream HTML from an  edge function immediately and progressively show   updates as your data comes in Next.js now enables  you to do data fetching at the component level all   expressed as JSX. Using React server components  we can simplify things. Special functions like   getStaticProps and getServerSideProps are  no longer needed and this future aligns with   the React hooks model of co-locating your data  fetching with your components. You can rename   any Next.js page to .server.js to use a server  component then you can also use client components   which hydrate and become interactive allowing you  to add client-side functionality like upvotes. React server components are ready to try today  under an experimental flag inside Next.js.   This removes the choice of static or dynamic and  improves your core web vitals by serving minimal   or no JavaScript to your users server  components give developers a new choice   on where components render either the client or  the server. This enables the future of Next.js   to give us one more thing what if we could  have all the benefits of incremental static   regeneration at the per component level this would  remove the choice of all or nothing page caching   and enable granular caching at the component  level we're exploring a data component which   works like a React suspense boundary this  allows you to add properties like fallback   revalidate and even surrogate keys defining  your caching semantics at the component level. So if we revisit our slow server rendered  example from before and use the data component   we can instantly see a static cache result   of our data even if the API is slow  then we can use the revalidate prop to   clear our cache and fetch new data similar  to the model that we've established with ISR   React server components and granular component  caching are made possible by innovations like   edge functions that support streaming eliminate  cold boots and deploy globally by default. We think the future is at the edge we want  every developer to enjoy access to the best   infrastructure for all their projects today  we're making edge functions available for   all Vercel users. With edge functions we are  giving you the power of dynamic with the speed   you expect from static. Middleware gives you  back the flexibility you had with servers   while allowing you to push code  to the edge of our network. Get started for free today at vercel.com/edge  Finally Next.js 12 brings us the future of React.   With server components you're able to combine  static and dynamic data fetching allowing you   to render pages at the edge close to your users.  Upgrade to Next.js 12 today to try it out. Hi my name is Steve Sewell and I'm going to talk  to you today about high speed edge personalization   with Next.js I'm incredibly excited to  talk to you about this because we will be   mostly covering the Next.js team's latest  announcement just from today edge middleware   we're going to talk about what problems this solves, how to use it with interesting  personalization tooling and a whole lot of other  exciting content. Let's just go ahead and dive in. First who am I? I'm the founder and  CEO of a company called builder.io. We're a headless no code platform optimized for  Next.js. Plug us into your Next.js site and let your non-developers create the pages and  personalized variations that they wanted   while making sure that it meets your expectations,  uses your design system and is high performance   all the time leaving you without needing to work  on this huge backlog of simple requests for pages   and tests. Let's jump in a little deeper into  what we're going to talk about here. So first   I want to briefly cover how is personalization  implemented in the past, you know, what are the   things that went well and what did we learn from  that we're going to improve upon? Then what are   current common patterns for personalizing with  Next.js and what are the trade-offs? Then we're   going to talk about personalizing Next.js with  edge middleware and then integrating tooling   because you probably don't want to hard code  all the the personalizations, you want to hand   off a good set of tools to be able to handle a  lot of this for you so your non-technical teams   can create the tests within your guidelines and  then you cannot have to worry about the details. So let's talk about the problem that  we're addressing here in the first place.  Traditional solutions to personalization are slow.  So in the past you'd probably send a request to a  remote server. You would have to actually send the   request around the world, uh it could take 100-200  milliseconds just to reach the destination,  then the server will pull a bunch of dynamic data  assemble a page on the fly and send it back around   the world. In a lot of cases blocking JavaScript  within, prevent the page from being visible, pulling in personalizations or other information  and then you end up with your page. Now that's   quite slow, we want to have fast pages that are  immediately visible and personalized. And so   what we really want is static generation right?  It's fast but everybody sees the same content.   Your home page is the same page for everyone  and how a lot of people trying to address   this with Next.js currently is they will load  placeholders or empty boxes that then will pull   client-side some slightly more personalized  information like the amount of items in your cart   or maybe some more specific personalized  products or other things of that nature. So let's look at this in a diagram  form so what we don't want is this.   We don't want round trips to an origin server  fetching and rendering personalized data on   the fly and then sending blocking javascripts  that might add additional content injections   that are unique to the visitor that ultimately  are going to give you very poor mobile speed.   I'm estimating one second for this but that's  being generous in a lot of cases we've seen   much much worse in the field. What we want instead  is a cached response! We want it locally so from   the edge, an edge network, so it's physically  very close there's almost no travel time between   the edge server and your visitor and we want  it cached we want to be immediately available.   So the response time is 10 milliseconds  no blocking JavaScript you just get your   personalized page without any other  hiccups or problems in the way. Now the question then is how do you do that,   because before today this was not  a very straightforward process. So let's talk about the solution how  you can actually get the best of all   worlds with this latest feature  and integrate with other tools. So first what do we want? We want high speed  optimization with edge middleware we want when   somebody visits the homepage of our website we  want different audiences to see different content   for example if somebody only shops men's  collections let's show more products from men's   collections, same with for women for a return  visitor maybe we can show a special deal to them   we don't want this stuff using blocking JavaScript  server-side rendering or all kinds of other issues   uh like lazy loading purely in the browser  we want to immediately hit our audience with   personalized content because if we're showing  everybody the same content all the time   it's not going to be optimized for anybody there's  no point showing irrelevant products irrelevant   content irrelevant things and traditionally  there's always been this trade-off we sometimes   call the conversion paradox you start introducing  more tools more lazy loading all this stuff to try   and drive an increase in conversions an increase  of things that you hope lead to the behavior from   your users or visitors that you want and in doing  so you shoot yourself in the foot because you   ruined the performance you add all this additional  dependencies and suddenly you actually made the   experience worse for everyone. That's where  edge middleware is such an incredible solution   you can integrate in less than 10 lines of code  to create simple synchronous fast rewrites. You   can use integration such as with Builder, our  personalization utilities, you can add with   just a few lines amazing power for anybody on  your team to create personalized variations of   pages using your components your tech stack all  that good stuff. It is so simple and powerful. So how's this work? So under the hood this  is what we're doing: The edge middleware   is rewriting requests, so if we see a url we see  somebody come into your homepage or an about page   we're going to look at the cookies and say is  there other personalized information we know   you can set these cookies or our SDKs can, it's  completely up to you. But we're going to rewrite   that say /about page to add a delineator like a or  delimiter like a semicolon and then add key value   pairs like actually the path for this page is  not just about I want to show the about page for   return or zero equals true maybe shops collections  equals men other things like prior shopping   history UTM params all of that can become part  of the new path that becomes the cache key. The   secret sauce here is Next.js's incremental static  regeneration using the fallback: true option   so that if anything comes in and they say hey  we haven't seen this combination of parameters   for the about page path we can then go and fetch  that and we can decode that very easily using just   another utility Builder provides or any of your  own systems that you need and then you can say   hey CMS hey Builder hey any other app and service  do you have a special version for return users for   men's shoppers for whatever it might be and then  that goes right back up and caches at the edge   so the vast majority of requests 99.99 whatever  it is are going to get instant fast cash responses   because of the static generation that happens in  real time and only an extreme minority of people   doing um you know visiting with a unique  combination parameters we'll go through the full   circle let's talk about the ideal stack here for  this nimble personalized content development so   how does Builder for instance fit, the beauty of  Builder is it's not a re-platform it can connect   to whatever you have it slides in for your hosting  platform Vercel already supports beautifully edge   middleware ISR all that good stuff your choice  of framework Next.js is our strong recommendation   for all new users of Builder or existing and then  connects to all of your other apps and services on   the backend where they're using commerce platform  CMS tools it doesn't matter all of them can plug   in obviously they're connected to your site  and Builder can be connected in there as well   what this allows is dragging and dropping with  your React components so no more hard coding pages   maybe this page today looks good with the hero  on top and a couple columns but maybe tomorrow   you want a different component on top and you want  an additional column and maybe you don't want to   be constantly going back and forth between you  know your CMS adding more fields for home page   and this and that maybe what you really need in a  lot of cases to remove that backlog of requests to   throw up a new landing page to you know run  some tests of a page or small variations   is instead to provide a toolkit to your  non-developers to integrate a portion of   your site such as the homepage parts of other  pages and register a set of components from your   design system where you say hey you can rearrange  these components input the props and using a UI configure personalized tests A/B tests etc all  of which will be fast and high performance at   the edge connected beautifully to React code and  publish remotely so your content can publish and   roll back separately from your actual code so you  don't have this interdependency issue where you're   deploying code and you're messing with content  and vice versa templates etc you get the idea   In practice this can look like a lot  of flavors some people really do build   their site completely with Builder and Next.js and it doesn't require a lot of custom coding   Others will work it into an existing site where  these blue boxes are some pages like the home   page may be totally designated hey anybody on  the team who has the right permissions can make   any edits on the homepage they desire they can add  and rearrange from our design system of components   they can run personalized tests like showing  different text images products etc by locale by   shopping history by any of these things and just  publish and schedule remotely via APIs and no more   having to hard code these templates you should  focus on components not templates and then this   can be parts of other pages part of a collection  page part of a cart part of a product page we see   people will want to personalize product pages  based on hey if you're on a certain type of   product based on your history based on the type  of product you might see editorial information   about the materials of the shoes being fantastic  or why it's a great fit for you as a customer   and all of this applies to data as well so  if you have just pure data like you would in   any other headless CMS and Builder you can also  say hey I want to show an announcement bar with   different text based on the audiences all of this  can be integrated beautifully it's automatically   integrated it just works great out of the box  with the edge middleware the entire setup that   I described so every element on a page can  be granularly controlled and personalized   on a per sort of unit basis. It's very cool and  if that sounds too abstract hopefully the demo   shortly will explain it in better detail but next  I just want to show how this looks in practice the   drag and drop editor helps you compose from your  components in a high performance clean API driven   way and then using the UI you can configure  A/B tests just add test variation 50/50 80/20   whatever ratios that you like and then choose  you can duplicate content or make modifications   targeted at various groups the beauty is this is  all statically generated so this is not what you   might be thinking or used to which is like content  injection and other problems for performance   reliability this is actually in the original  version of the page that's generated you have   content specific to the groups that you define so  you might target by device by shopping history by   locale or country codes you name it it's just a  few clicks run the test and see how that impacts   your metrics that you care about the most so  let's do a demo here i've got this cool little   Shopaholic site this is made in Builder composing  a bunch of components in our Next.js repo images   buttons all that good stuff and we have a really  cool couple things to show one as you should see   is ridiculously fast we can navigate to other  pages we can navigate back it's fast because it's   statically generated you already know that but  here's the really fun awesome part I have this   awesome utility that shows me information  such as hey it says I am a return visitor   it says that I am an unknown gender I don't  seem to shop any specific category or I haven't   shopped enough for us to say hey maybe you  should see more men's versus women's products   also you can define anything else for instance  from a customer data platform like segments   audience such as hey you're a loyal shopper you're  a subscriber to our content you're an ambassador   of the brand all these things we can toggle  between and see how it affects the end user   experience for instance let's see what  the men's version of this page looks like   Beautiful and after it populates now that's in the  cache forever so anytime I refresh it's going to   just be immediately available I can navigate to  other pages and back and it's just blazing fast I can control and right click again and switch  to what do people identify as preferring women's   products view there we go so now we're going to  see the women's version of the home page as you   can see like always it's extremely fast and then  we can debug in any which way we want for example   change the return visitor setting maybe we're not  going to say return root visitor or maybe we want   to just show what do we see for somebody who is  in our unknown category immediate fast responses   from the edge and then again this stuff will stick  as you move around the session and now what if you   want to make updates we can just pop over to  Builder and see so here's how we've created   several different pages or versions of pages let's  maybe go to our generic homepage and you may have   noticed that there was nothing special for return  visitors so I can go in here and I can change   options images text you name it all completely  customizable on who can edit what and how   let's go in here and let's make a new version  of this page by duplicating it and let's make   this version of the page specific to return or  yeah return visitors show how easy it is to make   the changes that you want and configure who will  see this so first let's choose who's going to see   this I'm just going to say we want to target this  generic version instead to return visitors now we   can do a combination of things we can say you're a  return visitor and you have various UTM parameters   or we know that you'd shop a certain collection  category like men's in our case we'll keep it   simple just know that all this stuff is completely  customizable to you whatever you know about your   visitors that you want to set as cookies or  in any other way the edge middleware can read   that can then become something that you target  off of with a simple couple minute configuration   now we can go in and let's actually say hey  let's add some text to the top and let's say "Nice to see you again" we'll be a little bit  creepy with it but you get the idea and maybe   and this is important to know you can choose to  allow design permissions to some or none of your   users but hey for me I know what I'm doing I'm  going to allow myself to have design control so I   can edit the UI as I choose I can add backgrounds  whatever is needed or use these from a design   system of components like a special announcement  bar React component where I fill in the props but   you get the idea I'm going to go ahead and publish  this nice to see you again page and next time I   visit let's do our beautiful um return visitor  settings that's true and gender unknown cool this   stuff will be live within seconds so it uses stale  while revalidate caching that you may be familiar   with with incremental static regeneration so all  I need to do is refresh one more time and there we   go nice to see you again anytime I visit the site  everything is blazing fast cached at the edge and   just so easy to create any variation you like you  should no longer as a developer need to be telling   people no or there's no time or I don't have time  to code that up just hand it over and say hey run   your tests look at the metrics see what's working  or what's not and just give any guide rails you   like must use your design system freeform is  okay it's completely up to you so circling   back just to recap: showed you a little bit about  Builder our headless no code platform how you can   optimize with Next.js with all of the awesome edge  personalization tools but overall I want to thank   you all for watching this talk I want to invite  you to check out the repo in this link so that   you can see that demo yourself and run it yourself  it's really exciting stuff I would love to see any   feedback from anyone please you can tweet DM me on  twitter I'm @steve8708 and I hope you're excited   about edge middleware as I am because with the  right setup which is only a few lines of code like   you saw and the right tools integrations it can  create such powerful experiences that were just   not possible before. Fast/personalized the dream  is finally true so thanks so much for watching. Hey everyone today I'm joined by Kelsey Hightower  he's a developer, author, father, and minimalist. You might know him from the Kubernetes community  or his work as a principal engineer at Google. Thanks for joining me today.  Kelsey: Happy to be here.  Lee: I'm really excited to dive into  edge functions and I know that you like   to explain things based on the fundamentals  so I'm really excited to take a step back   look at those principles and talk about how  they're changing how we build for the web Kelsey: Yeah so you know for those watching you  know my background as a back-end engineer I come   from a world where you have a three-tier web  app you know front-end back-end and a database   and maybe a load balancer in between so getting  the taste of all this serverless edge functions   and how the web front end is evolving is super  interesting to me so I'm looking forward to   breaking down those fundamentals. Lee: Awesome,  well to kick things off I would love to just talk   conceptually about why the edge why  are we moving more compute to the edge   I'd love to hear your take first and then I'll  kind of give my opinion on why we're moving more   logic to the edge. Kelsey: Yeah so you know the  space that I come from you know containers or   even serverless you know in the cloud we tend to  think about regions and zones so ideally you get   as close to the customer as you can but typically  you're still running out of a centralized data   center and for the most part this works just fine  for a lot of people but when you think about use   cases like gaming for example you really want that  client wherever the customer is to be connecting   super quick uh to the edge also in my world the  you know the explosion of CDNs as you think about   the Netflix use case or you're serving images  you want those to be as close as the customer   as well so they can render fast load and you're  not pulling data across continents so I think   that's been our first taste so for many people why  edge and it's like why edge for specific things   some people are still comfortable with  centralizing some of the logic maybe   your order management system or your company or  customer profiles I think a lot of that is still   largely centralized even though we've moved  the closer to people at the continent level   but I think there's always been a case at least in  the last 15/20 years of moving static assets like   videos and images to a CDN which tends to have  way more locations than our standard regions Lee:   I love the two points you made about one just  trying to get content closer to users but then   also effectively using the right tool for the job  it's not that we're moving every single workload   to the edge it's another tool in our tool belt  that's enabling us to build better applications   for the web I think when I look at why edge and  just the landscape of web development in 2021 it   seems like what appeared to be static for a lot  of sites is actually kind of deceptively dynamic   because the requirements for  personalization and experimentation   kind of put us in this tough spot as developers  where if you wanted to have dynamic you might   have to you know especially with a global  audience you might end up with a slow application   and if you try to solve that like solve the  speed problem by making it static well now   you lost the personalization or the dynamicism  so it's been difficult to get both so where I   view edge is kind of trying to solve both of those  problems together dynamic at the speed of static   and I think historically you know your context  about CDNs when we went to the edge with edge   networks or CDNs we lost a lot of the abstractions  that people coming from the server world like you   know like express middleware right we lost some of  the control and flexibility there so we're trying   to bring that back with edge functions and we're  doing it through an abstraction called middleware   so it essentially allows you to run code  before a request is processed and then based   on that request you can modify the response with  rewrites or redirects or headers all that stuff   trying to enable code over configuration and get  closer access to that infra (infrastructure) at   the edge like running as much compute at  the edge as we can for specific use cases   like you mentioned yeah. Kelsey: So the good  news is I got to put my hands on it and so   you know the limited front-end experience  that I have comes back from like the PHP   days right you would render as much as you could  on the server side and then you would send over   you know a bunch of other things that then may  do a little bit you know the jQuery days where   you can kind of context switch based on limited  information you had from the browser or maybe   the user session and so I looked at how some of  these frameworks evolved over time and I've always   had these questions like where do you put things  like secrets or database connections and it seemed   like the industry had evolved to the point where  you could have maybe individual components like   the calendar widget or the stock ticker widget  but they always seem to talk all the way back   to the back end right so you got as close to the  customer on the front end but then there would be   parts of it that will still have to travel over  long latency stretches to work and I think what   we tried to do then solve the problem of async  right they just kind of load at their own pace   maybe you're getting some of that data from a  cache if it's not really personalized for a user   and then I touch the kind of new stuff that you  all are uh talking about with some of these edge   functions and so I the first experience that I had  there was like this feels more like Ruby on Rails   so Ruby on Rails is this really powerful kind  of convention over configuration framework   where you could just you know design your app in  a certain way lay out certain you know folders and   structures and then when you built the app it did  all the right things in terms of rendering kind of   this back-end applications with the best practices  I think you all are trying to do that for front   end and addressing some of these going all the  way back to the central server by having parts   of the application run in this new serverless edge  computing platform where I kind of get both the   best of both worlds without necessarily thinking  about how I deploy each and wire them back   up Lee: Yeah I think what I 100% agree with that  and I feel like it ties into this evolution of the   traditional way we were building web applications  and how we're trying to help bring developers on   that journey to the future and bring them along  with us as we enable and give these primitives to   try to make it easier so I would love to dive  into this topic a little bit deeper because I   really appreciate your experience and your context  on some of this I'll try to give my perspective as   a front-end engineer and as somebody who you know  doesn't have as much experience in the infra side and I'm curious to see how it kind of compares  against yours because I know that you've you   know you've spent time as a system administrator  you've been an advocate for Kubernetes and because   of that you know you've moved along from manually  configuring VMs moving up the stack to Kubernetes   and I feel like when I've listened to you talk  before about this you try to root yourself in like   different the first principles of web development  right like it's important to understand   we're fundamentally just writing software and it's  going to run on a system somewhere and the closer   that system is to your users ideally the better  and we touched on this a little bit before we we   started but you know ideally you could have that  system be the browser right that's as close as   you could possibly get to the users but it's not  really practical to run all of your compute there   so in the front end world from my perspective  React has essentially become like Linux it's   this open standard for building the web and then  you have Next.js which is the most popular distro   of using react so an analogy I like for the  backend folks is like when you're using Kubernetes   you might be using tools like Helm charts as  an abstraction to define your infrastructure   so this is you know for those not familiar  it's like infrastructure as code and then you   can develop and maintain your infra the same way  that you would your code but at the end of the day   those tools are just compiling down to like  YAML right they're just making it easier or   an abstraction layer on top. Edge functions  in my opinion are very similar they allow   front-end developers, back-end developers to write  JavaScript that ultimately just compiles down to   some serverless compute that's running at the edge  it's I like to think of it as like infrastructure   defined from code so a little different than  that traditional model what do you think Kelsey:   Yeah, so I think when I think about context is you  know if you think about the base principles of it   there's a database your system of record it has  all the products and the prices of those products   and your goal is to try to render a shopping  experience to people that are using a web browser. So in that world my server is  going to say hey you hit this URL   I'm going to present to you a page with my entire  catalog in it and then you can browse around in   that experience I think the challenge is I need  to render your shopping cart uniquely to you   so I'm going to have to go back to the server  and tell the database what you bought to make   sure that my database and what you see in your  browser are in sync and I think that's been the   traditional model that we went about doing this  yeah and so you're right in the Kubernetes world   that back-end application I did a lot of work to  give it a configuration file with the database   username and password so only that back-end  application could connect to the database.  On the front end there's a lot of work  that goes into identifying who you are   and then having your browser session pass back  those credentials to my back-end so I know   that I can look up data in my database and  take actions on your behalf I think now what   we're talking about is moving some of this logic  even closer to the edge and now you get into some   real tricky situations where I can't give you my  database password in the browser this would be   a nightmare and you could actually do anything on  behalf of any user so we know we can't go that far   with things like database connections right so we  gotta move that one layer outside of the browser   now typically that would be something like even  a serverless platform like Lambda or Google cloud   functions that's one layer and then at that  point you're just giving connection details uh   to some API on behalf of that user that all makes  sense to me but I think now what we're saying is   do we really need to go all the way back to even  a serverless function or a container running in   Kubernetes could things like how we process  headers like if you're coming from australia   and I might want to show you a different set  of content well I can make that decision now   in the edge aka where the CDN traditionally sits  I think that's where it's going to get super   interesting and now I think as people coming  from the front end or from the back end we   now have a decision to make where do we put this  kind of logic and where does it make more sense Lee: So I'd love to pause here and to  actually look at some code that kind   of explains what you're talking about  how can we push authentication or logic   closer to users a layer back from the browser and  make that have lower latency in their request so   let me share my screen and I'll pull up some code  so I know that you've had a chance to check out   edge functions ahead of time and one of the  ones that I think is really interesting is   using JWT authentication so in this example I  have this edge function that's deployed and it's   checking this JWT token and essentially there's  two different API routes we have one that is   just a normal API route and then we have another  one that's actually using an edge function so to   try to demonstrate this what I've done is have  two different APIs shown below one that's using   edge and one that's using just going to origin  now this isn't perfectly realistic because it's   not actually doing the full authentication with  some provider but I think it helps to at least   illustrate some of this so ideally you're going  to see the edge responses be a little bit faster   and I'd love to take a look at some of this code  and kind of talk through what that looks like   so on the left inside of this example we have our  pages folder and the convention that we're using   to define how you invoke this logic is called  middleware so inside of our API folder we have   a new file underscore middleware and inside of  here we're taking a look at the url if it has   the parameter of edge then we can essentially  directly respond and handle that authentication   without having to do that extra check towards the  API route so then this logic actually runs before   the API route logic now this logic it effectively  does a very similar thing it looks at a cookie   it verifies a token and then it returns some  payload based on that but the interesting part   is when this actually gets deployed on a platform  like Vercel this could get deployed as a function   somewhere and this can get deployed as an edge  function so the difference kind of between a   serverless and an edge function here is the  edge function is another layer closer to your   users Kelsey: Yeah and so this makes a lot  of sense to me because when I look at this   traditionally when we try to do this type of  logic we used to use things like Nginx or Apache   we would go find some module and you go to the  centralized system and as a developer you would   have to know how to edit a Apache config maybe  even restart that server and wire everything   up to do this kind of logic right so I want to add  authentication to this app now I got to go hunting   for one of these systems that I should go do it at  I think now what we're getting and if I understand   this correctly as a developer I can stay within  my same application logic and then just add this   middleware not deployed to a backend server not  touch Apache but just stay in the same flow that   I'm already in and just say look I have this logic  we'll never go to the browser I think that's kind   of the key point here it's going to instead get  deployed somewhere where Vercel's platform is   going to wire it up automagically intercept the  traffic and then do all the logic that's in here   and then I just hit save redeploy my app and  now I have this thing that just sits in the   middle without thinking about touching five  or six different places and restarting things   I think that is probably the thing that might  blow people's minds in terms of you have this   self-deploying thing that knows automatically from  convention that it needs to get deployed one layer   below the browser and just available everywhere.  Lee: Yeah and I think building off of this too   it's it's enabling a new set of of developers to  take advantage of some of these tools that maybe   they had deferred to another part of the team or  you know they thought was outside of the scope of   what they could do and another interesting example  of this I can show is let's say you have some API   and you want to do some kind of rate  limiting with it let me pull this up here Kelsey:   And as you're showing this the thing that comes to  mind though maybe I don't know how we answer this   question but you know typically one benefit of  the centralized world is that I can define these   things like rate limits you know in one place  and then all applications can just point to my   centralized kind of middle you know proxy Nginx  or Apache and I can just handle everything there.   What challenges does this present if  every developer in every application   is kind of embedding this logic and  I need to go make a global update   to all the components what's the tradeoff  being made here Lee: Yeah that's really   important to talk about because I think we've  seen developers want to move closer to the edge   and because their edge compute and logic was  decoupled from where they were actually deploying   their application there were two completely  separate workflows and pipelines and because of   that you could often get into instances where  your systems got out of sync essentially and   you know even on a fundamental level of  caching now you have two caches in the mix   so the closer that we can marry the infrastructure  to the code that we're trying to write and define   helps developers fall into that success pattern  where they can use these primitives and not   you know shoot themselves in the foot essentially  by putting in logic that is going to ultimately   end up in a bad experience. Kelsey: Is there a way  to share some of this logic let's say developer A  writes a perfect you know geo redirect function  and in my mind coming from my world I would like   to write that once put it somewhere and give  it an endpoint and then have people just call   that as like another API component is there an  opportunity to do things like reuse logic versus   it seems like maybe embedding it  in every app that I'm working on.  Lee: Yeah I think that's a fundamental part of  what we want to achieve with edge functions and   through the abstraction of middleware is  empowering developers to bring back some   of that flexibility that folks are used  to with things like express middleware so   whether I'm doing an authentication check  whether I have this library here for IP blocking in this example all these things that are  going to start to be pretty common use cases for   middleware I want to abstract those out into a  reusable package and use them across different   projects or make them open source and the nature  of you know bringing middleware to open source   and Next.js and other frontend frameworks is that  they'll be able to npm install these packages and   integrate them into their existing systems so the  constraint here and part of the reason why edge   functions are fast is the underlying run time  that we're making so we're making a trade-off   by not exposing the entirety of node.js APIs  and instead constraining the runtime to use   standard web APIs like fetch or crypto and being  built on top of the JavaScript V8 engine because   of that we're able to eliminate some of the  remaining trade-offs that you had with serverless   so the cold boot problem connection pooling  and more easily deploy these functions globally   so if I want to extract this logic for blocking  IPs I can put it in an ES module that's not   using you know any specific node APIs and then  easily install that and share it across my team   Kelsey: Alright now this starts to make a lot more  sense because now that I'm looking at it this is   how we do and think about network configurations  right there is like a module that does things like   IP blocking and then it's on the developer or the  operations team to configure what IPs they would   like to have blocked and for what reason and so  it seems like if I were to centralize this into   a high level library then I could easily just say  hey what you're really doing with this middleware   is deciding how it's being used like configuration  if you will and then that module and that code   can be reused so my guess would be if I want to  centralize that I would just treat it like any   other software package version it and then if  we want to roll it out everywhere someone would   just do a redeployment and you would pick up all  those changes and it will be pushed out across the   entire edge. Lee: 100% yeah and to take that even  further too like there's so much of this logic   that we could be abstracting out to share like to  further hammer home that point about IP blocking   over here you know I can essentially enable these  developers to put in any IP address they want and   you know add it to a global configuration of some  some list of blocked IPs whether that's manual or   automatic so maybe you want to manually do this  configuration or maybe in this example on the left   you want to set up a middleware to have an API  that automatically rate limits with exceptions   around you know bearer tokens or some kind of  auth token and if they have that token then we   want to up those rate limits quite a bit because  we know that they're a trusted party of using this   and that essentially comes down to a few lines of  code assuming that this right now while it's in   this repo you could really easily abstract  this out into a library and then it's just   a weight rate limit and that's the only code that  you need. Kelsey: So one question I have from this   because this is genius so this looks like what we  used to do with things like Lua modules in Nginx   but again we would have to do it for every  round it could get super messy and also   was so disconnected from the actual application  the one question that kind of stands out for me   here is where do you put the config for example  if I do have like 35 IPs that I want to store   to check against I don't see a config file here  would I actually have to establish some other   data source like a database or I think you're  using Upstash which is like I believe a Redis   compatible API that's hosted somewhere  else. Lee: Yeah the great thing about   Upstash here is we're using it as a rest API  for Redis and it's globally distributed deployed   across the world but you bring up a really good  point which is we've given you this abstraction   we've given you the tool but what about the  data layer how are we going to solve that piece   so right now from a Vercel perspective the edge  functions on our platform currently don't have an   integrated key/value storage solution but that's  something that we're actively looking to support   to eliminate the need for a developer to go  outside of the platform to do to find a place   to store that configuration now over time we might  see that evolve even further but I think key/value   is really the first concept for us to nail that is  very compatible with use cases for edge functions   Kelsey: Alright now this makes a lot of sense  because now I think you kind of solve the   you know the configuration problem you know  as I make changes than decisions either in   real time or dynamic then I now have a place  to kind of store the actual output of some of   those decisions and also some of the things like  caching layers if I've already made a decision the   last thing I want to do is recalculate  the decision in a small window of time   I guess for me it's like what doesn't go  into this layer right to really understand   something I always think it's important to know  when not to use it should people be thinking   about taking their entire like product catalog and  stuffing that into a CDN or edge or something like   upstash Lee: Yeah that's a great question it kind  of comes down to where we see the future of web   architecture headed so specifically if we look at  databases I think we're seeing this new breed of   databases that are edge first so we talked about  key value stores but it could be a SQL like schema   or evolving databases that we already know like  Postgres or MySQL to run global first and I think   when you ask what doesn't work we're seeing that  a lot of these applications are getting modeled   after eventual consistency so with e-commerce they  might be favoring speed over global consistency   and in my opinion we're kind of going all in  on that model allowing people to essentially   granularly cache things at the edge now what those  things are it might be compute or it might be   actual React components so we can dive into this a  little bit later but it's it's still then allowing   you to pick back up on the client side and have  the full power of JavaScript so I think that when   you look across different industries e-commerce  but even in like finance or other sectors,   databases are kind of going global and combining  that with the edge is just trying to make it fast   everywhere does that mean that we need to move  everything to the edge I would say no especially   if you're trying to do something that has you  know a hard requirement for global consistency   in my opinion the eventual consistency model  just maps better for this type of logic   Kelsey: I also think we're thinking about better  access to those type of systems whether it's   centralized or distributed across an edge that  comes I guess as an implementation detail if I   have the ability to reach these type of systems  from like this new kind of function framework   then does it matter where it lives right I could  sign up for a hosted service and all I'm concerned   with is latency to my data and they can achieve  that by putting my data replicating it very close   and so be it so I think maybe that's where  we're headed it's just the distributed landscape   similar protocols and we're cutting  down things like latency and some of   those challenges by bringing  things closer to the compute  Lee: Yeah the way I like to look at it is I  think that hopefully it's a natural transition   up the stack for backend developers who are trying  to learn more about serverless or edge because   in making the constraint about the you know  the limited run time and not being able to use   node APIs inside of an edge function I feel  like in getting rid of some of those trade-offs   that they might have previously correlated with  serverless and trying to make it fast by default   I think will help them adopt and understand the  use cases for a lot of a lot of the applications   of edge functions or middleware and then to  your point about like where this will grow   so right now with the you know the Vercel platform  enabling edge functions we're already seeing I   think a rise of this type of edge compute across  the industry and my expectation is just to see   this continually rising not only for compute at  the edge which has been around for you know a few   years now and rising popularity but also running  your actual application rendering at the edge   so the way I like to think about this is a  lot of that sounds kind of like 2000's web   like you just serve a render and you get your  page and there was this transition from let's do   everything on the server to let's do everything  on the client and some people fought back about   that not everyone thought that was the best  approach and now I think we're kind of converging   and coming to this happy medium where we say you  know actually those those server people were right   and those client-side developers well they  were they were also right about some things too   we want to take the benefits of the 2000s web  of fast single page or fast server rendered   applications and marry that with some of the  inventions that single page apps or client-side   apps gave us with fast navigations through  pre-fetching of routes you click on a link   and it feels instant it feels like an app so  what I see the edge doing for the future of   cloud computing the future of the web especially  with innovations like React server components   is bringing back the server first model and  getting quick responses directly from the edge   while still remembering the innovations that we  made on the client side for interactivity to then   hydrate or add more logic after your page loads  and I think Kelsey: You know one thing I can think   of here is that the networks have gotten so fast  whether we've just made them bigger and closer to   where things are happening that we're almost  now at the point where we can treat you know   there's the same we can treat the data center like  a computer but now with these networks so advanced   you can almost treat the internet like a computer  itself and so now the operating system and now you   know through this conversation Vercel just  feels more like this operating system for   this kind of distributed computer that  says hey just like on a single server   you know that some things will get loaded into  memory and some things will be saved to disk some things run in kernel space some things  run in user space and sometimes we create these   boundaries for security reasons sometimes things  just don't make sense to run in one place over   the other and I think computing we've always had  this trade-off between security and speed and you   put things in the right place but I think now what  you're doing is trying to blur those lines to say   we just treat the whole internet as a computer and  we'll just allocate things where they need to be   in order to satisfy those two concerns I did  learn a lot just from having this conversation   so I think other people that are watching if  they you know watch the whole thing asking   these kind of questions back and forth like why  are we here now what does it bring to the table   and even having that code walk through I think  was really helpful for people to mentally map   what things are happening but yeah I think Vercel  is an as an operating system for the internet   I think it just makes it easier to grasp what's  happening you got to just let go you got to let   this thing figure out where things need to be  deployed wire them back up and own how it works   and that's what kernels do on operating systems Lee: Yeah I think I think developers   thought it would be easier to decouple their  application from the infrastructure and I think   where we're moving it's like but there's actually  a lot of trade-offs with that there's there's   a trade-off with the flexibility of moving your  application but there's also a lot of value in the   closer you can marry those two together and the  great thing about Next.js in my opinion is that   when you deploy next guest to Vercel you're making  the trade-off to marry those two together but its   core is still open source so if you decide I'm  done with Vercel I don't want to pay them any more   money and you say I'm gonna go host Next.js on GCP  (Google cloud platform) you totally can because   all of these primitives that we're introducing  like like middleware it would just run on a   single origin server so I really like that because  it's still bringing value to the entire ecosystem   and eventually to other frameworks too the way  we've designed this abstraction on Vercel is that   it will work automatically with Nuxt or Svelte or  any of these other languages or frameworks just by   conforming to our API for how you implement this Kelsey: Oh that's dope that's going to be good   to call out on the docs and when you give people  the experience because some people I think that is   kind of the question we hear when we think about  these new platforms they feel like black boxes   and it reminds people of kind of like  lock in but it sounds like that's   going to be addressed up front in this design Lee: Yeah and the way I like to think about it is   we're moving to this world where if we truly do  build the SDK for the web people will still have   their syntactic sugar and preference of choice and  there's no way to get around that and that's okay   we should be empowering those developers to make  innovations in their own spaces but we still want   to give the same shared legos and building blocks  for creating a great web experience so when I look   at the Vercel platform we're investing heavily in  what we're calling the file system API which is   conform to this file system output dump it on our  operating system and it will just run globally and   use all the features that are possible and  it's so easy then for framework developers   I could go out and build my own framework  today and it could have web vitals analytics,   image optimizations, edge functions, serverless  functions, CDN caching just by conforming to   some output Kelsey: No it makes sense I think now  that we you know the web may have finally found   its operating system Lee: I love that tagline  I think we're going to steal that and on our   home page it's going to say Vercel the operating  system for the web cosigned by Kelsey Hightower  Kelsey: There you go Lee: Well thank you  so much for taking the time to chat today   I really appreciate it and for those watching  I hope you enjoy the rest of Next.js conf too there'll be lots more content  around edge functions.  Kelsey: Thanks for having me Lee: Thank you Hi, I'm Tim CTO and founder at  Checkly, Checkly is used by the   best dev teams to ensure the reliability  and performance of their web apps and APIs.   Let me show you how you can monitor your next  app with Checkly. First you use our powerful   JavaScript based browser checks to make sure your  web apps work reliably and fast we automatically   give you web vitals, console.logs, network  data, and a lot more then you add some API   checks to make sure your backend APIs are snappy  and respond with the correct payload. Of course,   if anything fails we will alert you on Slack,  email, SMS and whole bunch of other channels.   Lastly you hook this up to your Vercel account  with our new deep integration so you never ship   any broken web apps again. Sign up for a  free developer plan over at checklyhq.com.   Your app just crashed, the phone running it has  exploded, it was struck by a hammer manufactured   in 2005 by Harry's Hammers. The hammer's head  is composed of 75% nickel, 20% steel, and 5%   iron. The phone flew into the air an 86 degree  angle and came crashing down at 11 miles per... Oh hello there my name is Kapehe and I do  developer relations at Sanity.io and this   is Bella she does developer relations for Scooby  Snacks I live in Los- we live in Las Vegas, Nevada and the fun fact about both of us  actually is we both really love anime   so in this talk we're going to cover  conformance in Next.js come with me. Alright so like I said this talk is on conformance and conformance is new to Next.js and it's a   beautiful addition if I do say so myself oh and  this is Heelo, Heelo loves treats as you can see   so a quick history on conformance Google had a  small team of very experienced developers who did   all the extensive code reviews of course of course  and would flag anything that impacted app quality   so they thought why not take the common things  that were being found and make a system out of   it thus the conformance system was born so  this automated an enforceable system ensured   a consistently high bar for app quality  that's pretty nice so Google's web platform   team experienced heavily with Next.js and began  open sourcing their system so Next.js knew it was   time to keep this to get this automated system in  Next.js and that's what we are going to be talking   about today Here with me to explain this next part  the most important part is what is conformance   is Poly, now I don't want to call conformance a  new feature of Next.js because you can't really   describe it as a feature it's more a system a  system that solves problems or points out problems   in code so there are rules that conformance  follows to support the optimal ux experience   it catches things that might only be caught from  an extensive code review or months down the road   when a user complains about an image not loading  so some error or warning messages you could see   in your Next.js app could be using an a tag to  navigate to a page rather than link from Next   Link or using a link tag for an external style  sheet rather than importing the styling files   now there's a lot of rules you can find that  conformance would help catch in your code so   what I realize is that having conformance is like  having a senior developer with me pair programming   at all times super nice and that takes me  to the why why does this even matter to me   can you imagine being able to have optimal code  to create an optimal experience for your users   without having to run it through another developer  for a code review now okay conformance doesn't   take away that need for the code review but it  surely wipes out a lot of the quick fixes to   optimize your project it takes the developer  experience of creating a website or project   and gives tips on how to improve your code  that ripple effects onto the users now the   user experience is optimized and they get security  accessibility and performance at a better rate So added to Next.js 11 it was released on June 15,   2021 that means you may not be affected  by this yet so to do quick check look   into your package.json of your Next.js project  to see what version of Next.js you are running   if you find out that you're outdated that's okay  that's why we have the internet so you can learn   how to upgrade that awesome project of yours and  I'm going to show you exactly how that's done   but first let me tell you a quick story so I got  into tech about three years ago and was first   exposed to React then it was I was a React fan  from the beginning through and through and then   Next.js came along it's kind of a sweet code love  story but I'm grateful it didn't have to become a   love triangle between my first love react and  my new love Next.js because Next.js is react   so as Next.js gets better and more optimized I  realize how good it really is for us developers   and conformance is one of those like you shouldn't  have moments I get a better developer experience   by making sure my code is optimized for my  users it's too easy so one of my projects   was old Next.js it felt new to me though but then  I upgraded and I ran that beautiful lint command   and let me tell you there's a lot of errors  but I won't tell you let me show you all that Alright so to get our Next.js application  upgraded we are going to run the command npm i next@latest react@latest react-dom@latest  and this is going to upgrade us to Next.js 11. So now we are upgraded we are next  going to run the command npx next   lint how do we like to configure we'll do  strict because that is the recommended way   and all of this is going to be added in  now we will need to run that command again   in order to get all of our warnings  and our errors to optimize our code   so now that that's done let's run it  again running that next lint command   and there are all of the warnings and errors that  come from my application my Next app so let's go   through a couple of these so at the very top there  we go now we're at the top so one of them do not   use image uh tag use image from next image great  one custom fonts not added at the document level   this is discouraged and it tells you where to  go to find out more information and it tells   you which file this is in another one external  synchronous scripts are forbidden and again   exactly where to find more information about  that this assign arrow functions to a variable   before exporting we're going to actually look  at this one more in depth we'll keep scrolling uh this is a good error the apostrophe this  can be escaped with the html character and   there's like a list of ones that you  can choose from here's a good one React   hook useEffect has a missing dependency great  warning and great to know let's keep scrolling and we have a lot of these image  elements must have an alt prop   don't forget those alt props and we'll show an  example of that and my giant list of missing keys   uh will definitely want to fix those that's  probably all 47 just kidding I don't know   um so yeah that is my list of errors and warnings  so the first one let's look at assign arrow   functions to a variable so it shows us where to  find it that it's a warning so it's going to be   yellow and what the error is so we're going to  go to the file and we see under underlined in   yellow the error and what the warning was  so we're going to fix that by naming it   and best practices is naming our functions by  naming our functions we are able to debug better   and our code is optimized and organized so we've  named it with the function headline that one's   done next one the apostrophe can be escaped  with the html character and it gives you a   couple of options to choose from so we go into  our code it is an error so it's underlined red   it shows the um error and then quick fix view  problem that kind of stuff we've added in the HTML   character and now that error is gone so that's  really awesome because we want to have that HTML   character in there instead of the apostrophe  next one is the giant list of missing keys   so we're going to want to fix all of  those because it could have the key   and if you look to the right you see all the red  for just this file where they're missing keys   I'm not going to show you me fixing each one of  these but as we add a key to each one of these   that red line will go away next we have do not  use image tag use image from Next Image and we   also have image elements must have an alt prop  so let's go fix that warning for both of those   for this one so we have both of the warnings  pop up when we hover and we have that yellow   squiggly line behind it so we know that we are in  the file that has the warning associated with it   so to fix it we import next image we use that  image and we also added in the alt prop so by   doing that we have optimized our image handling in  next and for accessibility we have the alt tag so   we're good to go so there you have it Next.js  comes with a handful of awesome new features   or systems conformance being just one of them so  go ahead hit that upgrade command today and let me   know about your developer experience with Next.js  11 thank you for coming to my talk my animals also   thank you you can find me on Twitter @kapehe_ok  where I tweet all things tech working out and   miscellaneous stuff you never know I never know  mahalo for hanging out and we'll see you around Hi I'm Taylor Barnett and I'm here in Austin,  Texas and I want to talk to you about this idea of   practicing databases as code with PlanetScale and  Prisma So first what is PlanetScale? PlanetScale  is a MySQL compatible serverless database platform  that aims to get you using relational databases   as fast as possible you can start PlanetScale  in seconds and it scales with you indefinitely   without having to worry about things like  connection pooling or connection management   PlanetScale also allows you  to branch your database schema   just like your code you can experiment in  an isolated database branch and then merge   back into your production branch  with non-blocking schema changes   It's all about the good parts of a relational  database without the harder database operational   challenges now when using PlanetScale you'll  need a way to access your database from your code   which is where Prisma comes in. Prisma is a next  generation ORM for JavaScript and TypeScript So   Prisma is a different kind of ORM so traditionally  with ORMs they provide an object-oriented way of   mapping uh when working with relational databases  by mapping tables to their model classes in your   programming language and while Prisma has you  define your models instead in a declarative   Prisma schema where you also define things like  database connections and you generate the Prisma   client we'll also be using the Prisma client  in the demo I'll do a little bit after this   but the Prisma client is a query builder that is  both type safe and allows you to write the SQL   when working with data models you'll also need to  be able to handle migrations for example which is   where Prisma migrate comes in we'll also use it in  our example Prisma migrate automatically generates   schema based on the changes in your schema file  and it can detect things like drift and help you   resolve those problems and lastly Prisma studio  the third part of it is a lightweight interface   for your data in your database which we'll also  briefly use today and so one of the reasons why   I think Prisma fits so nicely with Next.js is  because of all the different ways we can access   our data within a Next.js application you can do  it at build time with getStaticProps you can do   it at request time with getServerSideProps or you  can even build it into an API route which we will   do today and lastly you can even separate the  back end out and use it as a standalone server   The last thing I want to cover before we jump  into some code is why does the stack fit so nicely   with this idea of databases as code so first  when deploying our Next.js applications today   you're likely using a tool that is very git  centric like Vercel. Vercel pulls the repository   to create deploy previews for example Core to  this concept of git is branching but often that   has not been extended to other areas of our  infrastructure like databases for example   which is possible with PlanetScale. Being able to  branch out databases is crucial for this idea of   databases as code we need to be able to have these  isolated environments to experiment and alongside   our code and then when we're done we create a  deploy request similar to a pull request for   our code Now having these models as declarative  schema also makes them not only more portable   but also makes things like version control and  automation with our databases more possible   If you're familiar with configuration as code too  then you're familiar with this idea of having this   like configuration file and in our case a schema  file that you know we can declare certain things   so that we know this is like our single source of  truth. So what are we going to build today? I'm   going to start with a brand new create next  app and then we're going to add both Prisma   and then PlanetScale and then we'll make an API  route using both of them. So let's get started!  I'm going to switch over to my code editor and  then we are going to create our first database So the first thing we're going to do the obvious  create database we're going to give it the name   "star app" and we're going  to select create database   one of the awesome things about PlanetScale  is that it can track your migrations table   so when you do Prisma migrate it will track  that on the main branch we're going to save   that and then we're going to go ahead and create  our two branches so the first branch is going to   be called "initial setup" and then we're also  going to create another branch called "shadow" the shadow branch again is for when we run   prisma migrate we'll talk a  little bit about that in a minute So I want to start with the  brand new Next.js project so   I'm going to do "npx create-next-app@latest" I prefer using npm so I'm  going to give it that flag   and then I want to call this star app keep things  simple that we also named our database after it and while that is building I'm going  to talk about what our next step is   the next step is that we're going to  install the Prisma client we talked   about Prisma earlier and that the client  is one of three parts main parts of Prisma   so once this is done I'll cd into the project  and I'll run "npm install @prisma/client" now this doesn't totally get us set up  with Prisma that but we can see that   you know our package.json has been updated   uh we're going to do "npx prisma init" and this  is going to create a few different files for us we're going to go into that schema.prisma  file and start editing the file   so this is very kind of like config based  um feel to it we're gonna change that to   MySQL because PlanetScale is MySQL compatible  and then we're also going to add the shadow   url I'm going to add an environment variable  for that just call it shadow database url and then also we have a special thing that we need to add when we use PlanetScale  with Prisma, this referential integrity variable we're going to set that to Prisma and also so this  is a preview feature you need to also make sure   that your client also gets generated with it So since we have these environment  variables let's go ahead and update them   so we have a .env file that was created  for us by Prisma and I'm going to pull over   a string that we're going to use to connect  locally to the database in a few minutes then   we also need a shadow database url that  we will use when we run prisma migrate   and then we're gonna use it on a  different port it'll be on port 3310 and after this let's go ahead and create our  star model that we're going to use for our API so   in the schema.prisma file we're going to do  "model Star" we're just going to put a few   things in it just to get started the basics an  id which will be an int that will auto increment then "createdAt" date time that'll be when we insert it into the database and then as well as a updatedAt. Clean this up a bit now I don't want to make this model too  complicated just for this quick demo   but we'll do a name for our star which will be a  string be a varchar and we'll limit that to 255 and then also what constellation it  is in also a string the same varchar and so there you have it uh after this part right  here we have our model we have our Prisma client   and we have our database connection all set up  and looks nice and neat now I want to connect   to the database locally I'm going to  be using the pscale CLI PlanetScale CLI   I've already installed it by the way so uh you  might need to install that if you haven't already we're going to open a few different  terminals for that so this is going to use   those environment variables that we set up um it's  when we run the prisma migrate but first we need   the actual connection and so it's pscale is  handling that connection to PlanetScale for you   so you don't have to mess with the connection  string when you're developing locally   and then I'm also going to do one for the shadow  database which again is used when you do prisma   migrate and then that is uh to the corresponding  port that we set up for that which was 3310 So now we have those connected and we're ready to  do our first prisma migrate so we're gonna do "npx   prisma migrate dev" and we'll  just give it a name "init" takes usually a few seconds to run especially on  the first time when it's creating everything but   after it runs I want us to take a  quick look at the migrations folder and so you can see in this migrations  folder what it actually created in SQL   and then you can also see  this in the branch itself   that we're working in the initial setup branch  in PlanetScale too you can see that schema is on that branch which is awesome  because this you know lets us test   out potential different schemas before we  merge them into our main production branch So the next thing I want to do we  didn't have a lib folder I'm going   to go ahead and create one and then I'm  going to create a prisma.js file in here   now it's important to note that PlanetScale can  handle thousands and thousands of connections   but you know since we're dealing  with the serverless application   we still want to make sure that not every  single time we're creating a new Prisma client   and so part of why we're going to create this  prisma.js is so that we can reuse the client and I just pasted the code over to save some  time but pretty straightforward it's just a   Prisma client using the library so the next thing  I want to do is go to pages and then in API you   can see there's that hello.js that was there  when you do the create-next-app we're going to   create a new stars.js we're going to do really  basic route I'm going to go ahead and copy and   paste that into there you can see we're using that  Prisma client that we just created it's only going   to respond to a GET method it's only allowed and  it's going to find all of the star records and   return that in JSON with a 200 anything else will  give us a 500, some kind of error fetching those So now that we have created that the last  thing to do is actually give some data to   our database so I'm going to use the Prisma  studio which you can do "npx prisma studio"   and it is a kind of looks like a spreadsheet  or something uh you know I'm gonna   say Polaris also known as the north star although   there are multiple north stars which is in the  Ursa Minor constellation I'm going to save that and then we're ready to start seeing some  results uh in the close out of Prisma studio   and I'm going to run "npm run dev" now when I load this up you're familiar with the  standard Next app index page we're going to go to   the "api/stars" and as you can see here's our  data that's being pulled from PlanetScale just to   prove that this is actually  in PlanetScale we will even   close this out and then I will show  you from the PlanetScale console   within the PlanetScale web app that you can  also see the data that is in your star table Now this point we feel comfortable it does what  we expect it to do it gives us returns as results   and so I want to create a deploy request to our  main production branch to merge this schema change   You know we're feeling comfortable we did our  experiment we've tested it out in the branch   and there were no conflicts  so it's able to be deployed   and now when we look at our main production branch we can view the schema that is on that branch and   here's the same schema that we had in our  initial setup that was not there before now at this point we're ready to deploy our  application to Vercel, I'm not going to go   through step by step because it's much like how  you deploy other Next.js applications Vercel but   I will include some details in the project's  repository that you can see here on the screen   hopefully this gives you a good idea of the few  steps you need to do to implement PlanetScale   and Prisma into your next Next.js application  and also the this idea of how to use branching   as part of databases as code thank you so much for  watching and let me know if you have any feedback   on PlanetScale, on this workflow like how does  it work for you how is it not working for you   what can we do to make it better I'd love to hear  and have a great rest of your day thanks bye! At Prisma we redefine the developer experience  of working with databases with a next-gen ORM,   you write your data model in a human-readable  schema, allowing anyone to quickly understand   how your database is designed. You then get  an auto-generated type-safe query builder   that you can use to read and write data to your  database and when your schema needs to evolve,   you run a single command that  auto-generates migrations for you. However regardless of whether you use Prisma as  your ORM, working with traditional server-based   databases in a serverless environment you run  into an issue each serverless function opens a   connection to the database so during traffic  spikes you'll quickly exhaust the database's   connection limit. This negatively impacts  performance and leads to failed requests.   That's why we've built the Prisma Data Proxy,  it's a service that sits between your server   and database and handles database connection  management for you. It's currently in early access   and we would love for you to try it out.  To learn more go to prise.ly/dataproxy My name is Fernando Rojo and I'm the  co-founder and CTO at BeatGig we're a   marketplace for booking artists you can  think of it like Airbnb for live music.   Today I'm going to talk about using React  Native with Next.js my goal with this talk is   to convince you that React Native is the best way  to build a UI even if you're only making a website   one year ago we started building our product  from scratch and I decided to use React Native   with Next.js to build the front end in the  time since we have shipped over 100 screens   all of the code lives in a single  monorepo our product works on web iOS   and Android with full feature parity this is  all with one person building and designing   the front end as a result we have grown from zero  to over 10 million in sales in under one year   thanks to our cross-platform stack we can iterate  rapidly and ship features daily our number one   priority is reducing the time from idea to  deployment and React Native is our greatest   instrument in doing so combine it with Next.js and  you can deliver an amazing user experience on web.   Now React Native with Next.js is a relatively  new stack so I faced a few issues along the way   my plan with this talk is to break down  each issue and show you how we solve   them we'll look at navigation animations, responsive design systems, platform specific   features, monorepo support, and more let's  jump in the biggest difference in structure   between a React Native app and a Next.js website  is navigation so let's see how it works to the   left I have the BeatGig website and on the right  the iPhone app let's compare what happens when I   open some artist profiles okay here we have it  open on the website I'll do the same on the app   looks basically the exact same I'll go back and  let's do one more I'll open B.o.B on the website   and now on the app so let's compare what happened  on the website we have @bob here in the URL on the   iPhone app there's obviously no URL and the only  real difference is that on the iPhone app I can   swipe back here and I got the stack transition  in so I'll go back and I'll go back here on the   website too the key thing to take away here is  the design is mostly shared and the logic is   fully shared between platforms but we still match  the user's expectations based on the platform   they're using. Let's see how we do it this part  is really cool we're going to use the same screens   across Next.js and React Native our first step  is to create a shared artist screen component   I'll expect every file in the screens folder  to be shared across platform next I'll create   a Next.js page at pages/artist/slug and I'll  import that same artist screen component   all we have to do is default export it and  our artist screen is now working on Next.js   for the search screen I'll create a shared search  screen component import it in pages search and   default export it if you use Next Router this  should look really familiar we now have our React   Native pages rendering on Next.js the missing  piece is how do we use the same screens in the   React Native iPhone and Android app here we're  looking at app.tsx React Native uses this file   as a single entry point rather than use file  system routing we're going to create a stack   from React Navigation here I've imported create  native stack navigator which does that for us I'm   also going to import the same screen components  which we just used for our Next.js pages   now I have an empty navigator and the only missing  piece is to add our screens and there we have it   we now have our two screens uniquely identified by  the name prop search and artist and the component   prop tells us which component to render this  is what the final code looks like the only   difference is that I add a NavigationContainer  which is the provider for React Navigation.  Let's recap where we just shared some code   first I import the shared artist screen component  in app.tsx for React Native I then pass artist   screen to React navigation's stack via the  component prop to use the same screen in Next.js   all I have to do is import it in pages/artist/slug  and default export it and there we go   you now know how to share screens between a React  Native app and a Next.js website the question is   how do we move between screens if you're on the  search page and you want to open an artist page   how do you do it can you just use the Next Link  or Next.js's router push or is there another way?  Let's take a look. I made a library  called expo-next-react-navigation   which lets you share all your navigation code  between Next.js and React Native this is what it   looks like it's very similar to next it has a link  component and a useRouting hook you can create a   custom link like this to open an artist and if you  need more customization you can use the web prop   if the route name from native doesn't match  your path on web unlike Next Router it uses   params instead of query which does the same thing  reading in our params is also very similar to Next   this is what it looks like on Next  and with expo-next-react-navigation   instead of query we just use params and  everything else is basically the same in   the future I want to have an API like this where  it's fully shared between Next and React Native but there are still some things in the way  and if you want to help you can check out   this issue I opened on the repository called  "The future API" and I would love to hear your   thoughts and get your contributions. Next let's  talk animations coming from a web background   I always loved using simple things like CSS  transitions and more advanced libraries like   React Spring and Framer Motion in the past year  there have been some incredible innovations   for performant animations in React Native  with the introduction of Reanimated 2.   That said before I even started using React Native  Web something I felt I was missing in React Native   when it came to performant animations was a simple  API in 2019 this feature request was opened on the   Framer Motion repo for React Native support it was  one of those issues that got a ton of attention   a lot of upvotes but was outside of the scope  of what Framer Motion was focused on which was   just the web this inspired me to write an RFC  in October of 2020 for a simple cross-platform   animation library for React Native and React  Native Web I wanted to borrow a lot of the cool   features from Framer Motion like mount animations  and automatic transitions and I ultimately decided   to build my own library called Moti and I  launched it on twitter about eight months ago   in the time since Moti has gotten almost 2,000  stars and has gained quite a bit in popularity. This is what it looks like to use Moti you  get a Moti view and a Moti text component   you can use the from prop for mount  animations and anything you pass to   animate will automatically transition which makes  it really easy to animate based on React state   you can also get full control of your animations  using the transition prop like Framer Motion   one of my favorite features of Moti is the mount  and unmount animations. Under the hood Moti uses   Framer Motion's animate presence to bring this  feature to React Native for the first time   in fact Matt Perry from Framer Motion recommends  Moti as the native compatible alternative if you   want to animate based on hovered or pressed  states with Moti it's as simple as passing a   function to your animate prop you can interpolate  between hovered and press states and the results   will automatically animate without triggering  any re-renders that means we get cross-platform   animations that run at 60 frames per second one  of my favorite design patterns is animating a   component when someone hovers or presses it notice  what happens when I hover over the see more link   see that the background turns yellow and  when I hover over an artist they scale up getting this kind of feature parody  between a website and an iPhone app   would previously be really challenging  but with React Native, React Native Web,   and Moti this parity comes out of the box.  To the right we have the BeatGig iPhone app,   let's see what happens when I press on the see  more button the background also turns yellow just   like the website and when I press in on the artist  as I scroll they also scale up the exact same way with Moti you can also do more advanced  interaction based animations such as animating   the children of a pressable component if you open  the BeatGig website and hover over products in the   header you get this nice drop down each item has  a background transition and an icon that animates   in or out this is actually built with Framer  Motion and React state because I hadn't launched   Moti interactions yet but once I shipped this on  the website I wanted to try to remake it with Moti   here we have the exact same component from  BeatGig's website built with Moti what I   find interesting is this is a web only  component and yet implementing it with   Moti which is a React Native library was a  lot simpler than doing so with web libraries   I think this is a common side effect of  building with React Native and React Native Web.   Rather than focus on platform-based implementation  you think strictly about the UI and as a result   you come up with APIs that are a lot simpler than  what probably existed the code for this drop down   is open source and I'll link to it at the end of  the talk Next.js is a first class citizen of Moti   add Moti to your next transpile modules  add a single polyfill and you're good   to go let's look at one final animation  example animating based on scroll position   on the right we have the BeatGig iPhone app to  the left the mobile website notice that the header   fades in when I scroll down the animation code  here is shared 100% cross platform and there's   actually no special library in play here this is  using the vanilla animated API from React Native   for simple things like scroll animations  this API is quite easy to use and can get   you great performance. Next let's talk theming  and responsive design back in 2017 I was running   an ecommerce sneaker brand called Patos I wanted  to make some custom edits to my shopify website   so I started learning CSS and JavaScript and  it didn't take long to fall in love with both   soon enough I considered myself a web developer  I was using CSS all the time so when I started   styling and React Native I had some mixed feelings  to start let's compare what it looks like to style   in CSS and React Native next I'll discuss the  pros and cons of React Native's styling system   and finally I'll show you what we do here we  have a component class name written in CSS   and at the bottom we have the equivalent in React  Native React native has a built-in stylesheet API   rather than use classname we'll pass this to the  component directly using the style prop. If I want   to use multiple styles I just pass an array in  this case I'm forwarding props.style the order   of the styles is determined by their order in  the array which is a lot more predictable than   CSS I can also do conditional styles in this case  I'm only applying props.style if props.isEnabled   is true finally if you want to add dynamic styles  you can do that by putting them in line like this   for a deeper understanding of styling and  React Native I recommend checking out the docs   but hopefully that gives you a good  overview of the differences with CSS   next let's look at the pros and cons first the  pros there are no global styles in React Native   at first I viewed this as an annoying limitation  but it's actually crucial if you want to know   the styles applying to a component you just  look at the style prop it's dead simple and   there's no risk of accidentally setting a global  style that has side effects on other components   there are no nested styles like there are in  CSS. All styles are scoped to a single component   and the logic is handled on the JavaScript side  making each component incredibly predictable   React Native also doesn't have pseudo elements  if you want to track a component's focus state   you use the onFocus prop instead of the CSS  selector this is a lot safer as it maintains   your components as a function of their state and  you can come back to it months later and know   exactly what's going on. Finally in React Native  there are no issues with import order of styles   with CSS you can cause many bugs simply  by the position in which you import a file   on the other hand in React Native if you want  to know the order of styles that are applying   to a component you just look at the style prop  there are no cascading styles no nested styles   no global styles everything is scoped to a single  component which means your component based design   system is scalable. For a long time I thought I  loved CSS and part of me still does but once I   started styling with React Native it was pretty  hard to go back the level of predictability and   simplicity lets you move so quickly and keeps you  from getting bogged down by little CSS bugs and   platform-based issues one interesting thing is the  stylesheet API from React Native Web is actually a   highly optimized CSS in JS solution if you want  to see how companies like Twitter use this on   their website I highly recommend this talk by the  creator of React Native Web , Nicholas Gallagher Okay now the cons of styling in React Native  React native doesn't have CSS grid this isn't   the biggest issue in the world but it would just  be nice to have it next React Native doesn't have   the concept of media queries so responsive design  can be a bit challenging you have to actually use   JavaScript to track screen dimensions in render  in fact React Native Web actually recommends not   using media queries instead they take the position  that you should render different component trees   altogether based on screen size or view container  size so what's the verdict I've spent a few years   building with both CSS and React Native and  ultimately the low level styling API provided   by React Native and React Native Web is better  than that of CSS the level of predictability and   scalability in a component-based design system is  too hard to beat now there are some missing pieces   and in these cases I think it's up to us to  build libraries to add in features like theming   and responsive design let's take a look at how  we solve these things for BeatGig. In 2019 this   feature request for React Native support was  opened on the Chakra UI repo I thought this was   pretty exciting because I wanted a library like  chakra for React Native and React Native Web with   unstyled components I ultimately decided to build  my own library called Drips. Dripsy is a set of   responsive un-styled UI primitives for React  Native and React Native Web based on a theme   this is what it looks like to use Dripsy  it's heavily inspired by Theme UI from React   on the left we have our theme and on the  right we can style a component using the   sx prop so I'll try adding a background color  and here it pulls values straight from my theme   if I want to make a value responsive such  as padding all I need to do is pass an array   here it'll use the third scale on mobile devices   and 0 on any screen bigger than that we now  have a way to use theming and responsive   design across platforms creating a consistent  user experience no matter where your users are   next let's talk platform specific features every  now and then I come across a feature from web that   doesn't yet exist in React Native. Two good  examples are anchor tags for scrolling down a   page and URL query parameters let's take a look at  how we use these features in a cross-platform app   and then I'll show you how you can make  your own something I love about HTML  is how easy it is to scroll from one part of the  page to another using an anchor tag the issue is   React Native doesn't have anchor tags so to get  around it I built my own library called Anchor.   Anchor lets you scroll to any arbitrary component  inside of any scroll view it works cross-platform   with the exact same API I found this to be  especially useful when a user submits a form   and I want to scroll down to the errors.  To the left we have the BeatGig website   and on the right the iPhone app let's see what  happens if I submit the form with missing fields   notice that it turns red and scrolls  to the correct field let's do the same   thing on the iPhone app and the same thing  happens so I'll enter my offer amount here   and I'll do the same thing on the app and I'll  hit submit again and now it takes me down to   the date so this time I'll set a future date say  December 2nd and I'll set one on the app as well alright so I'll submit one more time and  it takes me down to performance length   so I'll fill this in do it on both and  now we have the app submitting on both   for offers to Loud Luxury. Here we were able  to use anchors to nudge users along the way   and make the form experience much more enjoyable  even when there are errors next let's take a look   at using URL query parameters across platforms  something I find really cool is using query   parameters as our React state so I made a hook  called useParam which lets us do just that   what's cool is this hook actually works cross  platform on web it uses next router to get the   query parameters and on native it uses normal  React state here I have a name and a set name   returned by useParam which works just like use  state the first step is to set the actual name   of the query parameter which in this case is just  name and that is pulling from the types up here   when I call set name it should set it in the query  parameters and use that as my state so I'll try   that here and there we go now it's rendering this  name it's in the query parameters and if I refresh   I maintain my exact same state let's  try adding a clear name function I'll just set the name to null and then I'll add  a button alright so I'll go ahead and click clear   name and now it's back to null it clears that out  of the query parameters and there's nothing here   now let's look at a more complicated example  using age which is a number. The reason this   is more complicated is because age is a number and  query parameters are always strings so here I have   TypeScript complaining the reason is because I  need to parse the value in from the URL string   so in this case I'll use the parse function which  gives you the value from the query parameters and   it expects you to return the type you want so  in this case I'm going to return a number based   on the query parameter I have okay but why  is this still upset well what happens on the   initial render if you don't set a value you need  to set initial similar to use state from React   and there we have it we now have an age query  parameter which is a number gets parsed in   from the URL and also lets you set an initial  value if it's undefined on the first render   to recap parse works similar to a JSON parse but  you can do it by query parameter now if I wanted   to have a custom value in here let's say it was  number or hello in this case the age type is going   to recognize that parse returns number or hello  but I'll just clear that out and now age is always   going to be a number this is especially useful  if in parse you want to restrict users to only   a specific set of types for example you might want  it to be a number that's only one, two, or three   and you can handle that inside of parse and that  is it this is probably the most useful hook I have   and it's so simple it works just like React  state across platforms but on web it lets you   manage it all through your query parameters  next let's look at writing our own platform   specific code to run different code based on the  platform you're using import platform from React  Native using platform.os you can distinguish  between your platform and run different code   typically you'll want to provide a fallback for  other platforms alternatively you can import   different files altogether based on the platform  using a dot platform extension on a file name in   this case index.web.ts will be imported on web and  index.ts will be imported on all other platforms   and you can do this for as many platforms  as you want in general I actually recommend   against writing platform-specific code directly  in your app in fact in the Moti docs I wrote that   using Platform.OS is an anti-pattern if you find  yourself needing to write platform specific code   chances are you've found a good idea for an open  source library platform inconsistencies should be   handled by third-party libraries so that apps can  always build with a single unified API next let's   take a look at the monorepo structure for React  Native Next.js app the best way to structure a   React Native nexus app is with the monorepo here I  have a packages folder and an applications folder   inside of applications I have my two separate  entry points "next" is just my Next.js app as   you'd expect and "expo" is the React Native app  that will run on iOS and Android. Expo provides a   set of libraries and services that makes building  and deploying with React Native super easy while   it isn't a perfect comparison in many ways Expo  is to React Native what Next.js is to React it   makes shipping your product into production a way  better experience I highly recommend using expo , for the React Native side I find this to be pretty  uncontroversial I won't spend too long on this   instead at the end of the talk I'll link to an  example monorepo which you can use as your starter   With React Native we have an instrument to turn  ideas into component based products quickly   combine it with Next.js and we can leverage the  best features the web has to offer but there's   still work to be done and if you want to take part  in building the cross-platform stack of the future   I encourage you to follow and reach out to me on  twitter @fernandotherojo I hope you enjoyed this   talk and I can't wait to see what ideas you have  to keep pushing this stack forward. Thank you. Welcome to another episode of compressed.fm a  podcast all about web development and - James you   know this isn't a podcast right? It's not a pod-  what is this? This is Next.js conf. Next.js Conf?   You mean they can see - you might you know want  to check your teeth. Oh all right, let's try this   again. Welcome to our audio and video talk at  Next.js Conf, we're really excited to talk to   you about the tech stack behind compressed.fm  a podcast all about web development and design   in February. James and I started recording a  podcast all about web design and development   it's released every week and you can find it on  your podcast of choice whether that's Spotify,   Google, iTunes, you name it hopefully it's there.  A podcast huh that's right alright tell me more   that's right we've recorded over 30 episodes  and we've also done two crossover episodes   one with the folks at WebDev Weekly and  another with the folks at Perfect Dev,   we have over 25,000 downloads we have five  sponsors and all of our sponsors are our favorite   but I do want to highlight one in particular:  Vercel and we are so excited to be here at Next.js   Conf okay that's enough about the podcast let's  introduce ourselves my name is Amy Dutton I'm the   creative director at Zeal and my name is James  Quick I'm the developer media manager at Auth0   and I figured I might be able to shed a little bit  of light on why we decided to start this podcast.   When Amy and I started to talk we realized that we  both share a love for teaching we both feel like   we have a lot of experience a lot of knowledge  that we really want to share with other people   to help them grow and learn as well and we also  realized if we were going to start this podcast if   we wanted to build up an audience if we wanted to  help people we would need to have a website which   we did not have so Amy do you want to tell people  a little bit about the features that we thought   we were going to wanted to include in the website  as we built it out that's right so like any good   website we needed a home page and on this homepage  we wanted to feature general information about the   podcast itself where it could be found in the  most recent episodes we also needed sub pages   to highlight all the episodes on the podcast  a page with the individual episode information   a contact page a newsletter page so that people  could sign up and also see previous newsletters   and for all the designers out there can we just  take a second to appreciate this Figma board that   Amy put together that's right everybody loves a  good Figma board or at least a good well-organized   Figma board another piece is we wanted to have  a custom audio player that would feature all the   bells and whistles and some of those bells and  whistles are deeplinks into an episode itself   so you can change the url it would jump to that  specific place in the episode it would also have   jump cuts so we could list out different chapter  marks within the episode you could click on that   and jump to that particular section of the episode  then we wanted a featured player that was a little   bit bigger and larger on the homepage for the  newsletter page we wanted to provide the ability   for people to register as well as highlight  all the information in previous newsletters   and then probably one of the features that I think  James and I are the most proud of is our sponsor   dashboard we wanted a way for sponsors to be able  to log in and see in real time how many downloads   and listens each individual episode  that they've sponsored has received   in addition they would be able to see  all the contracts and all their invoices   so what did we actually build well before we get  into that maybe we should start with the data   as we all know data is the thing that powers  websites and actually makes them functional   and exciting and fun to use so let's start  there we decided to host our podcast and   simplecast so if you look inside of simple cache  you can see all of our episodes are hosted there   in addition to hosting the actual episodes  themselves Simplecast gives us some analytics   that we can follow about how we're doing in terms  of downloads and listens and that sort of stuff   and that's really neat but the next level  iteration of that is the fact that uh not   only is that data accessible inside of their  dashboard but through their API we can make it   available inside of our dashboard so we've been  able to integrate as you'll see in a few minutes   with the simple cast API to grab that listen  and download information and display that for   our sponsors so that they can see that and  check how their sponsored episodes are doing   now that's just one half of the data that we  have that's for the analytics and the episodes   themselves what about miscellaneous data how do we  keep track of sponsors and jump links and metadata   associated with the different episodes well Amy  and I both have used Sanity.io which is a headless   CMS in some of our personal projects in the past  and have really enjoyed it and decided that would   be a great option to go with for storing the data  for our Compressed.fm podcast so one of the things   that's really cool and interesting about Sanity is  you have the ability to customize your dashboard   and your models in your schemas through code so  you can see here a quick screenshot of all the   different schemas that we have for all of our  data which is actually maybe a little bit more   than you would expect and then this translates  to inside of the actual Sanity studio itself   you can see those are the different categories  of models or schemas that we have and then here   you can specifically see the information that's  associated with each episode like a title slug   date sponsors cover image so on and so on you  can tell it's actually a decent amount of data   so on the home page itself we need to be  able to pull in that information from Sanity   to display general information about the podcast  and the most recent episodes so if you look at   the code itself you'll see a query here and  it's using grok and that's the query language   that Sanity provides you can also export that  as GraphQL but here we're using grok so we're   asking the database for all the information  for each episode that has been published before   now and it will order those by date and provide  all the metadata around that specific episode   then we're passing that information over to  the layout and the cool part about Next.js   is we were able to create several different  layouts one for the home page and one for   the interior pages so you can see here our  home page is actually being wrapped in the home   layout then we had to create a bunch of different  subpage layouts for the episode page itself we   used a query as before from Sanity to grab all the  podcast episodes and then I kind of glossed over   this before but we're using getStaticProps so that  this page renders as fast as possible and then   similar to before we are wrapping that with  a layout in this case the interior layout   for the episode page and we're passing all the  information that we got from getStaticProps   into our component itself for the individual  episode page this is going to look similar   to before we're querying Sanity for the  information and then we're using getStaticPaths   and getStaticProps now the difference here is  getStaticPaths checks the database to say hey   these are all the urls and all the paths that you  need for all the episodes and then it passes that   information to getStaticProps so it can get all  the information it needs for each individual page   and again this allows the site to be super fast  one of my favorite components on the site is the   audio player and one of the reasons I got so  excited about this particular component was it   not only proved to be a fun coding challenge  but it allowed me to have complete control   over the design so there are multiple players  throughout the site so on the home page we have a   player that's large and in charge that's a  featured player then on the sponsor dashboard   which we'll talk more about later we're able to  highlight the actual sponsor ad read so that when   a sponsor comes to their dashboard they can see  where in the episode their actual sponsor read   is then at the individual episode page we have a  different player that allows the user to have a   little bit more control over the playback itself  so you can listen to it at 1x or 2x speed you can   jump forward 30 seconds or back 30 seconds  it just provides a little bit more control   and if you're interested in the specifics of  the player and the code behind it I actually   have a whole series on youtube where we break it  down line by line that's at self teach me so for   the newsletter page we need to have the ability  for the user to sign up and then we also need to   display the previous newsletters so there's some  fun things that are going on with this particular   page we're querying it just like we did with  the episodes page but we're also using sanity's   portable text feature to be able to have control  over each individual newsletter layout so whether   that's highlighting a full screen image or having  an image on the right and text on the left or vice   versa the portable text allows us to have that  type of layout control within the Sanity panel   so this query looks a little bit different just  because we are accommodating for portable text and   how that information is being returned but it's  still using that getStaticPaths and getStaticProps   to be able to render as quickly as possible so for  the newsletter itself the form is actually pretty   sweet we are using quest forms which just so  happened to be a Compressed.fm sponsor but   we were actually using them before they became  a sponsor and one of the reasons that we loved   using quest was it allowed us to create all kinds  of integrations and do fun things on the back end   without writing additional JavaScript and  serverless functions so if you go to the   quez form site you'll see that they handle spam  protection as well as built-in validation and   the validation happens on the front end in your  browser but it also happens on the server side   so there's no chance of malicious code being  injected along the way but it also handles local   testing and multi-step forms one of the cool ways  that we're using these features is on the sponsor   application page so we're pulling information  about all the pricing for each episode into   the form and displaying that but on the future  episodes it's checking to see which episodes   are haven't been sponsored yet and displaying  those as options within the sponsor application   if you go to the quest form site it will tell you  that using their form is an easy simple three-step   process you just add a class name to the form  itself you can add rules for validation as   attributes to the input field itself and then  you include their script along with an action   attribute and it is as easy as this three-step  process so if you look at our code we are using a   use effect to initialize the form and then on the  form tag itself you'll see we have that action tag   each of our inputs have a unique name attribute  and that's really all there is to it it just works   out of the box which is pretty sweet now quest  forms has several integrations that they provide   but we are actually integrating with Zapier  and one of the reasons that we're using   Zapier is it allows for multiple steps to  happen after the actual form is submitted   so for example the newsletter it just gets passed  off to Mailchimp but for the contact form one of   the things that we're doing is I get a message  in Slack directed towards me but then it also   checks to see if the user wants to be added to  the newsletter and it will add them to Mailchimp   as well one of the reasons why we went with  Mailchimp was it was more cost effective solution   but it also allowed us to customize the newsletter  itself with their built-in tools we're also making   use of their journeys feature so different things  will happen depending on which form you fill out   if you are a sponsor or a guest you get a unique  thank you message sent from Mailchimp or if you   join the newsletter you get a unique welcome  message that way as well then I just wanted to   throw out with next we were able to achieve a  perfect Lighthouse score without much effort. So let's talk now about the dashboard and I think  this was uh maybe in comparison or in addition to   the audio player like one of the most intricate  pieces that we have in the dashboard because we   need to make sure that only certain people with  certain emails should be able to access the   appropriate sponsor dashboards and then we need  to integrate with simple casts and our API data   and all that sort of stuff in addition we wanted  to show the relevant invoices and contracts and   episodes that are associated with each individual  sponsor on their dashboard page and as we started   thinking about how to best protect our application  we started wondering what's the best way to do   that and we're a little biased because I work at  all xero but we decided to give austiro a shot   and in fact this was actually amy's first time  ever using austiro yeah I did just want to throw   out there that I obviously have a connection  to office zero through James but it was so   easy it took me about five minutes to set it up  myself originally the plan was that James was   gonna help walk me through it but I jumped the gun  and did it myself without any trouble at all so   if I can do it as a designer then you can  definitely do it don't don't let her fool   you on her development skills but we did decide  to use all zero and we used it for a couple of   different things we used it for authentication  of handling the login process and deciding   who is this user and then authorization the  difference here is what does that user have access   to which is actually really important and we'll  talk about that more in a second all xero actually   also does the user management for so that we don't  have to and then it has really nice integration   with sdks like the Next.js sdk that you'll see  here in a second so that Next.js all serial sdk   is on Github you can go and check it out you  can try it yourself and once you do after you   configure a couple of environment variables you'll  be brought to the screen where you'll need to   export this handle auth function and that's really  all the configuration that you're going to need   what this will do is it creates a dynamic route  for you which behind the scenes then generates the   associated routes for login logout callback and  me login and logout are probably self-explanatory   the callback route is the API route the serverless  function that gets called after the user redirects   over to auth0 logs in and then comes back to  our application it calls that callback function   where you can add custom logic if you want to  the me route there is just if you if you want   to call that route and get general information  about the user that's what that one is there for   so with those in place if you go over to the  code if you want to add a login button what   that becomes is just a link to the logout or  login routes so you can see here that we are   conditionally displaying login and logout buttons  based on the user themselves now one of the things   that Amy did as a designer that I thought was  really really cool is she uh customized the   universal login page for our application this  is a login page that's actually hosted in all   zero but as you can see has our brand wave forms  in the background and then our strong black and   yellow colors on top of it so it really looks  like it's natural to the Compressed.fm brand   now we talked about trying to protect certain  pages for our dashboard to make sure only the   right person could get there well you can start  with exporting this with page auth required thing   that comes from allzero and what that does is  it automatically checks to say hey if a user is   trying to access this page and they're not logged  in it's going to redirect them to the login page   so this will make sure that the user is  authenticated but this doesn't make sure that the   user is authorized to have access to that page so  what do we do next well you can actually customize   this getServerSideProps function and add  any additional sort of logic that you need   so for example what we did is we were able to  track associated emails with a different sponsor   inside of Sanity so as we onboard a new sponsor  we can grab an email address from them add it to   the associated emails property and then be able to  check that as a user logs into that specific page   so we have different pages dynamically or  dynamically generated pages for each sponsor   and then inside of this custom getServerSideProps  we can grab the user that's logged in we can grab   the email associated with that user and then  based on the url or the slug for that sponsor   we can go and query from Sanity to get all the  information about that sponsor that is that the   user is trying to access their dashboard for after  we have that sponsored by slug we can check the   associated emails and see if that associated email  includes the email of the logged in user or see if   it's one of our admin emails so that Amy and I  kind of have a backdoor so that we have access   to all the dashboard pages to go and look and  make sure that things look good as we're testing   so after all of that takes place we're able to  allow the user through to the dashboard where we   will display all of their information inside  of here you can see not only do we have all   the information that comes from Sanity about  the sponsor but then we go ahead and iterate   through each one of their episodes and interact  with the simple cast API to grab the associated   download and listen information as well so that  they have all the information they need right   inside of that dashboard page alright so that  was kind of a lot let's do a quick recap here   Amy and I decided based on all of for teaching  that we wanted to start a podcast because we   wanted to start a podcast we then realized we  needed a website and not only did we want a   website but we wanted it to be kind of impressive  we wanted it to be as good as we could make it   so not only did we do static pages for our home  page and our episode landing pages and all that we   have integrations with Sanity for all the metadata  that we need we integrate with simplecast to store   our podcast episodes and get analytics from Amy  built out a really sweet custom audio player   that has lots of functionality you should go and  check out that video series on her youtube channel   had really cool integrations with quest forms and  Zapier and Mailchimp to handle our newsletter and   onboarding stuff and then lastly we built out a  custom dashboard with all zero to help protect   our application before we display the only the  appropriate information for the appropriate   sponsor based on the user that's logged in if you  want to check us out please go to your podcatcher   of choice and search for Compressed.fm and  if you enjoy it and only if you enjoy it   please leave a rating and review it really does  help the logarithm and give our podcast a lift   helping other listeners just like you find our  podcast if you want to connect with us directly   you can find us on Twitter James @jamesqquick  and myself @selfteachme that's all we got. Hi there Tim from Checkly here today I want  to talk to you about the performance and   reliability of your modern web app more  specifically I want to show you how you   can use a new generation of headless browsers to  catch common performance and reliability issues   all before you go live in production this sounds  a lot like end-to-end testing then you're right   but end-to-end testing is a little bit boring  it used to be flaky right well kind of used to   be but stick with me and I will show you why I  honestly think we are entering a golden age of   end-to-end testing what's important to notice is  that performance and reliability are top of mind   among JavaScript deaths in the recent JAM stack  community survey of 2021 performance and in   this case uptime were the number one and number  two concerns for devs when building a website   this talk is going to be very practical I will  talk you through some code examples that you can   run yourself using Nodejs Playwright my headless  browser framework of choice and Github actions   all of this code is available on Github in the  link below essentially I'm going to show you how   to build a mini checklist because at Checkly  we run millions of these headless sessions   per month so no need to sign up to any servers  right now except Github to get your feet wet   and start exploring of course at the end I will  do an obvious pitch of how great Checkly works   in this context and how it deeply integrates with  Vercel for all your Next.js projects let's dive in   here I have a very basic Next.js project  using Next.js 11. this should be bread and   butter to the most of you now we wouldn't  want this super enterprise level website to   be shipped to production with catastrophic bugs  or terrible performance would we no we wouldn't   so let's introduce Playwright to make sure  that this doesn't happen so what is Playwright   Playwright is an open source framework developed  by microsoft that enables you to talk to a browser   from your code you can click on buttons fill  inputs take screenshots and much much more   Playwright itself is written in TypeScript so  it plays very well with the JavaScript ecosystem   however it also supports Python Java and .Net  what sets Playwright apart from other similar   frameworks like Puppeteer and Selenium are its  speed and its smart features like auto waiting for   screen elements to appear before clicking on them  okay let's write our first Playwright script here   it is it's a simple JavaScript file that I put  into the end-to-end test directory just step one   and this is my whole Next.js code base for  the project I just showed you so let's run   through it and see what it does well firstly we  install Playwright in this case I'm installing   Playwright Chromium just for demo purposes  because it only downloads the Chrome browser   instead of Chrome Webkit and Safari as Playwright  supports all of these three browser platforms   then we have a small run function an async  function so we can run the await code   we create a browser we create a page and then  we set a target URL variable you will see that   it uses a target URL environment variable and  a hard-coded production domain name and I will   show you why that is and how it comes in very  handy later when we run this in Github actions   so we go to our target URL with the page go to  method we click on our button we snap a screenshot   and then we close the browser  that's it so let's run it It did the thing it opened or target URL in  this case localhost click the button snap   the screenshot close the browser let's have  a look at the screenshot amazing it worked   now let's get some more data from the Playwright  script and create a little report on reliability   okay here's a rundown I added a report  object here with a bunch of counters   that will record some key metrics that  happen throughout our browser sessions   we have properties for all requests that finish  with a good status code so anything up to 399.   then we have all the requests above 3.99 the  bad ones that fail then we have a failed request   counter this is just for requests that error  out on the network level and never respond   and then we have a counter for console errors  this could be anything your own JavaScript   erroring out some third-party library or some  malformed JSON response confusing your code   and we collect this data by listening to events  emitted by the Playwright page instance you can   see that right here uh we have some listeners  on the request field on respond and on console   and every time we do a little  console.log and we bump these counters   so all the way in the end we just log this  to our console which you can see right here   and that's our little reliability  report let's give it a spin Oh my god we have some errors we got console.error  lines you can see it right here two of them   and we got a failing request also and um we  have 11 normal requests that filled with a   status code lower than 399 what you can see that  apparently we had some requests to some servers   with a non-existing domain name what's interesting  also is that none of these errors were actually   obvious when we snapped that first screenshot so  in this specific case the image was at the bottom   of the viewport and it was missing and you can  see that right here so there is a broken image Okay let's add some performance metrics  in our case I want to add some web vitals   again we create a data structure to capture these  and we're going to capture the web vitals FCP or   first contentful paint and LCP the largest  contentful paint we use a Playwright feature   where we can directly inject a script into  the page and in this case we're injecting the   standard web vitals library that I just installed  using NPM note that we're only interested here   in web files that make sense in a lab or synthetic  environment opposed to the web files collected   in the field using real user traffic for instance  what Vercel gives you with their analytics feature   so you can see a bunch of code here that  essentially calls the library that I just injected   and then adds the metrics to this little object   again we console log that object at the  end of our script let's give it a run Here we go so we got the same errors of course  as the previous run but you can see that we   added the first contentful paint and the largest  contentful paint and we logged it to our console   so how do I run my end-to-end script, I'll need  to deploy. Well there are many services offering   this hint in hint we exactly do that but you  can run this from your continuous integration   setup we will use Github actions for this  as you can see this file I added it to the   standard .github/workflows directory and it's  pretty standard actually let's walk through it   it targets first of all the Nodejs runtime and it  checks out our code it does a little setup then it   installs our dependencies and then it runs the  end-to-end test command from your package.json   but there's three things to note here firstly we  only trigger this action when Github receives a   deployment status event from Vercel in this  case then we check if that deployment status   is actually successful lastly we assign a  target URL parameter that comes with the   deployment event and assign it to a standard  environment variable so we can read it in our   script you already saw that when I ran our tests  against my local host in this case we're going to   get the preview deployment and the production  deployment URL given to us by Vercel injected   into the script so we can run our end to end test  against all the preview and production deployments   so what does that look like in practice well  of course I ran a little bit earlier and you   can see it right here this is our script and  here is the test step you can see what happens We get a target URL that is specific  for this commit it runs through our   checks and it prints the same info that we saw  earlier in this case the Github action passes   we could add a little exit code to the script to  make sure it fails send you an email or otherwise   trigger something in your pr review to know  that hey this thing broke I need to take action   what I just showed you is of course just the tip  of the iceberg Playwright allows you to script   and test much more complex multi-step flows and  extract a lot more data and we do this at Checkly   to check our own web app here's what that  looks like on the checklist dashboard this   is a multi-step Playwright script that logs  into Checkly and navigates some key pages   we run these tests against our staging and  production environment on each git push that   Vercel deploys for us so not against a mocked  environment that runs inside some CI pipeline   this gives us way more confidence that what  we ship actually works in real life what's   even cooler we also run the exact same set of  scripts every 10 minutes against production   two things to note here all the Playwright  instrumentation and collection of metrics   is done for you automatically we also  automatically snap a screenshot for you   when an error occurs in your Playwright script and  second we now have a great integration with Vercel   that can automatically block your  deploys if any of these tests fail   if you want to play around with this sign up  for a free forever plan over at checklyhq.com So let's take a step back I mentioned at the  start that I think we live in the golden age   of end-to-end testing what do I mean by that well  I mean that there's a convergence of three things   first accurate preview deploys on each commit  by companies like Vercel, Netlify and others   second cheap fast serverless docker-based  or other ephemeral infrastructure resources   third of course this new generation of snappy  and easy to use headless browsers together they   make shipping reliable and performant web apps  a ton easier and cheaper than it used to be   that's it for me right now I hope  I gave you some cool insights   as mentioned this is just  the tip of the iceberg visit   playwright.dev for a ton more info on Playwright  and checklyhq.com/learn/headless for an extensive   set of guides on how to use Playwright  in the wild thanks for watching, bye bye! Hi everyone thank you for joining me today my name  is Michelle Bakels. I'm a program director at G2i   where I work on community focused solutions for  developer health and preventing and recovering   from burnout and today I'd like to share with you  my experience building for non-profit communities   with Vercel and Next.js and to begin sharing  that experience I'd like to introduce you to   the community that I've been working with for  the last several months and that is 1909. 1909   is a community in West Palm Beach that is for  creators by creators dedicated to the holistic   growth of entrepreneurs creatives freelancers  offering workspace programs resources and events   for the like-minded who give a damn about building  a better tomorrow and if that sounds like a very   ambitious statement it is however I promise you it  has all of the impact and punch behind it in 1909   is one of the most incredible communities that  I've ever seen let alone had the fortune of being   a part of and what makes it so great is of course  the amazing people who are the members of 1909 so   to tell you a little bit about who we are we are  content creators, marketers, bakers, gardeners,   economists, activists, musicians, inventors,  yogis, the members of the 1909 represent a   very diverse array of skill sets and talents  and I think on a higher level you could really   describe the members of 1909 as creators,  freelancers, startup founders, entrepreneurs, and   first employees so there is a lot of experiences  that we share with each other we help each other   through the struggles and the hard times however  we also are there for each other for the wins   and successes that we can celebrate together  and so it's really a great community and   if you have ever been a startup founder or an  entrepreneur or been close to someone who has   then you'll know that there are some pretty big  struggles in that journey and one of them I think   is when you're starting early on you have to wear  10,000 hats because it's typically just you or you   and a couple of people and so if you're like Anne  Wayla here in the bottom photo you may be really   passionate about teaching kids how to grow their  own food at home and educating them on nutrition   however you'll find yourself also doing the  bookkeeping and the social media post and   advertising and a million other things that  you may not be necessarily very good at   and so one of the things that we want at the  1909 for our members is the ability to stop doing   the things we're not good at so that we can focus  on the things that we are good at and we already   have at the 1909 this culture of giving towards  each other without expecting anything in return   and the mindset of going further together so  with that known and with that already in practice   the team at 1909 got together and came up with a  plan to create a platform to facilitate innovate   and incentivize on this relationship that our  community already has amongst each other and so we   got together for a colab day which is essentially  kind of like a startup hackathon in a sense where   we fleshed out the idea for the exchange which is  a platform that has a feel of a task board crossed   with venmo and it would be where our members could  post things that they needed help with and someone   could basically pick that task up in exchange  for a couple of tokens which they would then   be able to use again on the marketplace to get  something done for them that they need help with   so it was a really cool idea around gamifying  and incentivizing something that already occurs   and just making it a little  bit more robust for our members   we also had the opportunity here to collect data  around the activities of our community which   was really important as a non-profit community  there is quite a bit of data that we can collect   however insight into the everyday as a member  of 1909 can really help with grant proposals   and when you're speaking with donors so for  example imagine being able to say in q1 of 2022   our members exchanged thousand dollars worth of  services amongst each other in support of growing   entrepreneurs and small businesses in West  Palm Beach, Florida so that's a pretty powerful   statement to stand on and to be able to speak  to when you are running a non-profit community   so there was a lot of incentive to put this  platform up so we came up with a game plan   to find developers to work on the project  design and build the MVP and then iterate   as we received feedback and this is all pretty  straightforward typical for developing a project   and so we began on the first iteration where  we built a simple transaction application   with a React front-end node back-end we invited  any developer to work on it if they wanted to   it was really an open invitation and we used the  simplest tools and languages that we felt that   anyone could work with they would either likely  already know it or they could easily pick it up so   despite like some of our best intentions  here and coming up with what we thought   was a pretty straightforward simple plan there  were some unexpected bumps specifically with   doing extra work on the side or volunteer  work outside of your normal 40 hour work   work week so what we learned is that the company  MVP is very different from the community MVP so if   we were building this in a company it would  actually probably be considered pretty trim   however for side work we really needed to narrow  it down even more we created too much to maintain   outside of the most critical functionality  the most critical functionality was the actual   transactions however we did end up wasting quite  a bit of time trying to get this profile image   uploader to work that we ended up scrapping so  things like that that didn't even contribute   to the actual functionality of the transactions  we had to really pare down everyone's spare   time is different so we needed to ensure that we  could async everything if not as much as possible   and then probably one of our biggest pain  points was building and deploying created too   many unexpected blockers especially when we were  onboarding our developers so this is just a common   wall that we would hit when we were bringing  in developers or or setting people up was that   the platform that we were using was just a  little complicated especially if you didn't   have experience with it so our takeaway here  was that every process that left the potential   for significant time loss risked a completely  losing a developer or volunteer for the project   or delivering on the project at all so since  time is so valuable with volunteer inside work   you know we really didn't have hours to waste  on anything because that a couple hours wasted   can put delivery back a week or two when we  were talking about doing things on the side so   we went back to the drawing board and  we came up with a new iteration that was   way pared down called skillshare which we're still  working on the name but in any case we designed   it like it was an MVP for a hackathon  so what can you deliver in 24 hours   that works and 24 hours of volunteer time is  actually quite a bit of time so we also wanted   to make sure that we got strong commitments from a  small group of self-starting developers so it was   you know before where we would ask like would  you like to work on this yes now it was okay   what time exactly do you have to spend what  do you intend to take ownership of when do you   think you could deliver this it was a much more  explicit conversation so I take that on myself   the open door will be great to revisit again once  we have the MVP done however in the beginning when   we're just trying to get it out there we have  to close that circle async everything as much   as possible from communication to development  to planning and of course prioritize removing   processes and the potential for time loss so we  needed to recognize where we were losing time   sometimes that's on code and it's inevitable  and you just have bugs and you have issues and   it's part of of being a developer however there  were some processes especially in our deployments   and builds that we kept hitting issues with and  that was a moment of okay let's reassess this   and figure out what we need to do to not make this  such a problem anymore so we had another colab day   and we decided to try and execute on this new game  plan that we made and for this colab I kind of   just woke up in the morning and decided  to start working on it and made a plan to   essentially set up the foundations and the  structures for our new apps because it was really   a whole app ecosystem that we were restructuring  the skillshare was a part of it and I wanted to   set up the builds and deployments for these apps  as well and so since we were starting from scratch   again more or less I wanted to take a look at  Vercel and Next.js because I've heard so many good   things about Vercel and what they offer and so I  allocated about a half of a day to learning Vercel   or at least starting to and was very pleasantly  surprised that I only needed about 45 minutes   the tools were unbelievably simple to set up  and use and as soon as I deployed our first   project I realized that this was the answer to  one of our greatest pain points and time wasters   which was our builds and deployments so  that was really great I could simply add   other developers to our team we didn't need to be  installing anything and and debugging console.log   statements it was very very straightforward  and with Next.js it eliminated our need for   two of the back-end repositories that we were  planning on setting up and using for these apps so   yeah I mean I really enjoyed using Vercel and  learning it and being able to integrate it into   our work with this nonprofit community and I think  just the whole process was just so unbelievably   simple I still get really like all those same  feelings of like happiness and excitement and you   know relief when I think back on that day and that  moment where I was like wow this really is so easy   and I and it's funny because I tell people the  thing that took me the longest was looking for the   rest of the instructions because when I was first  using it, because of my experiences were just in   complete disbelief that everything I needed was in  one UI and so I actually started searching around   the internet for the rest of the instructions  on how to deploy on Vercel and of course   it was really as straightforward as it seemed and  so at the end of the day what I was actually able   to deliver was the foundation for these apps  the builds and deployments for all of them   I was also able to get our developers onboarded  and then spend the rest of my afternoon   actually writing the code which is the thing  that we really care about and the part of these   projects that we really want to do is delivering  the value and the features for our community and   I was able to build two front-end apps  completely one of them being the skillshare   and get those deployed so that moving forward  we just start working on the services so really   exciting day and was really great to share with  the team and they were all really excited too   so comparing our previous experience to using  Vercel again our last platform wasn't really   even too terrible a lot of it was just  expected in the developer experience   however once you use Vercel the bar gets raised  really quickly so with the previous platform   it required a CLI install and that's fine that's  really common however the error messages were   really difficult to decipher even for experienced  developers if you weren't familiar with what those   error messages were really trying to tell you you  could be debugging that for a while no automatic   builds and deployments by default which is nothing  I ever expected in my life however once you have   a taste of that life then you can't go back we  had longer builds and deployments again something   that I just accepted as par for the course and  at times the documentation was really confusing   and differed a lot from our actual experience  with trying to follow that documentation   so again this is you know something that  I really would have always considered   part of the developer experience however  switching to Vercel where we could connect   a repo create a team build and deploy an  app in one UI in about five minutes really   changes the game we also had automatic  builds and deployments by default which   you know I is just like a dream to me the UIs  don't require documentation which is fantastic   the page works the way that you expect it to and  the documentation doesn't require Google and Stack   Overflow so for Vercel to be the creators of the  product and to be the best source of information   on how to use that product is a little bit more  rare than I think we like to admit when we're   using software products in our programs so yeah  I was overall very impressed with the developer   experience completely understand what all of the  hype is about around using Vercel and Next.js   and what was really happy to make the decision  to move forward with using it in our project so   where are we now and where are we going we  have a core team of developers which is awesome   we're moving forward with our new apps  built with React and Next.js and Vercel   and we're going to begin testing with our  community soon we don't have an exact date yet   however our road map to testing is pretty short  at this point so we're getting really excited   and I also wanted to give a quick shout out  to the dev team that's been working on this   Rue and Becca thank you so much for picking up  the torch and running with this project. Andres   the original 1909 developer and the creator of the  blueprint for gamification software at the 1909   it's been awesome to work with you on  these projects and then of course Ryan   who's really kind of the visionary  innovator pusher of the project   very dedicated to this idea of creating the  skill trading platform for the members of the   1909 and it's been incredible working with  you and of course there's a ton of people   to mention that aren't listed here it's really  a community effort to put this out but I really   wanted to make a special thank you to the  team that I work with and talk to about this   on a day-to-day so with that said thank you so  much to the dev team that I get to work with   thank you so much to Vercel and the team there for  creating amazing developer tools and experiences.  It's again just a game changer for us for the  industry the bar has been raised you set a new   standard so we are really excited to continue  working with your tooling and seeing what we   can do and of course thank you everyone for  joining me today for this talk and hearing   our story about how we build for non-profit  communities using Vercel and Next.js. Thank you. Hello everyone I am Ahmad Awais and I'm  super excited to be here for the second time   on the Next.js conference stage and today I'm  going to be talking about building the developer   relations stack entirely with Next.js but before  we go ahead and jump into the details of that   how about I introduce myself a little bit so you  know where I'm coming from and why I'm building   everything with Next.js. So I am an award-winning  open source engineer I've been writing open source   code for over 10 years now I've written all  hundreds of projects a lot of them are CLI   one of them is a Shades of Purple core theme or a  Corona CLI and millions of developers are using my   code which is a humbling feeling I cannot even  explain a really teeny bitty you know bit of a   code that I actually contributed to open source  ended up on Mars so I think I can claim the status   of being a Martian right. Anywho I am a Google  developers expert the recipient of eight Github   gold star awards and I've been around the block  I'm really excited about the web platform I'm a   web purist and the fact that Next.js is building  the next generation of you know soft like software   development kit for web it just excites the hell  out of me I also love to teach developers if you   go to nodecli.com you can learn everything I know  about JavaScript in automation to build your CLIs   or if you go to VSCode.pro you can learn  from me how to become a VSCode power user   right now I'm working on a nextjsbeginner.com  course which I'm super excited about   but let's hope I can finish it in time for  next year. As far as my day job is concerned   I'm part of the executive leadership team  here at RapidAPI as their senior director   I am the head of developer relations I we are  like about five or six people in develop right now   and I'm still hiring if you go to awais.dev/hiring  you can read all about that. Everything we are   trying to do here in the developer relations  team is based on Next.js and they are very much   you know super valid reasons of why I have chosen  Next.js to be the entire core of our devel stack   and that is exactly what I want to talk about  today building your developer relations stack   with Next.js in case you don't know what developer  relations is it's it's like this really awesome   field where you can be a teacher and you can  influence the improvement of developer experience   around the entire chaos that exists in building  literally anything if you're building anything   there's one service that is broken there's this  language that is just not working this this   entire kiosk that we've worked with and services  like warsaw in frameworks like next year's   actually help us improve the entire developer  experience you know kind of master that chaos   around what we feel like when we are as users  developers we are sitting around and building   something same thing we do for APIs here  at rapid API and since I joined rapid API   one of the things I really wanted to do was  explain and teach APIs in a different manner   so you see there is rapid API hub which is  the world's largest hub for APIs we have 35   000 APIs and over 3 million developers are using  these APIs so you can consider it like a hub or   just like Github but for APIs yet you can also  sell APIs there and make a lot of money right   so there's business involved in there so one of  our products is a rapid API how developers go   to list their APIs or to use APIs listed by other  developers and then if a developer wants to learn   this thing what they have to do is either they  are left with a documentation or API reference   there's nothing there in the middle where eager  developers or discerning developers could go   beyond the product or the documentation  and learn through either interactivity   through videos or whatever you know their  preference is so I along with my team decided   to build something but we are internally calling a  devel stack a bunch of products built inside devel   which influence your learning the entire learning  platform and the knowledge you attain as an API   developer this platform that we are building with  next years does not only help you master what an   API is but it actually helps you improve that  chaotic experience into an improved developer   experience when you're either trying to learn or  build something here's one of the projects as you   can see this is not a production ready right now  we are hoping to launch it on first november but   what do you see in front of you right now is what  we call guides right these are interactive guides   filled with content that you want on a particular  topic but the fun thing about it is that they use   a lot of interactive components as you can see  right now this is this project is actually in   its infant stage there are community members like  saad and our devil team members like pratham are   currently building content for this baby project  right now that we have what we are building here   is this interactive content but either smaller or  longer form of content that is based on one single   topic while this might just look like a blog to  you there is a lot going on behind it this is   based on ssd this is mostly static content with  a flavor of client-side rendered components that   actually help you improve everything that you're  trying to learn for example open API spec right   and everything you see here is powered by markdown  so all of these are either React components   in most of the content writers that people who are  writing content is coming from markdown and while   this might look like a random block to you the  technology that's powering it the read more the   relative uh suggestions that is coming from here  are all based on next cas and there's a particular   algorithm that we have been able to build we are  using Next.js image component here and the script   loader which has made the entire experience really  useful and the real user experience has improved   a lot it's not just that using Next.js  the script component the images optimized   images in everything it it kind of builds this  entire productivity stack for writing content   where your content not only looks good feels good  is interactive but also has a really good SEO   power or SEO juice in it because it next is the  script component especially the script component   takes care of a lot of things for the core  web vitals the new Google you know SEO ranking   parameters are the or the parameters on how Google  actually measures the real user experience where   something like warsaw's analytics also come in  another project inside this devil stack is our   video lms platform which is also based on  next css as you can see a lot of really good   community members like irian JavaScript mastery  jessica siraj course trekker jesse catalin you   know a lot of members have actually gone ahead and  produced excellent quality content on turning your   APIs into a startup and selling them on rapid API  what we wanted to provide are developers who are   trying to learn this skill from the get go is this  kind of experience where they can see everything   in different modules and learn it in the way  they prefer so now what might look like a simple   video embed to you nexus actually helps us derive  this kind of new experience around learning that   enabling us to distribute the content in different  modules and helping users mark a particular module   as complete as you can see at the bottom here all  of this is being built with nexius and the core   that powers this is actually marked down so if you  have a video if our different team creates a video   they can actually use a simple markdown file  to split that video into different modules   not only hosted on youtube but also hosted on  our particular platform to own that part of the   content and the fun actually doesn't really stop  here what I've shown you is just part of this   particular mono repo different projects that share  different components and and this right here what   you see is an interactive guide a learn platform  that we are building for example if you are trying   to learn about http and different methods like the  post request a user or developer can not only just   read about it but if you go down here you can  see you can play around with this interactive   component so if I zoom down here a developer could  come here learn their post request method for   the first time and create different kind of data  through this particular interactive component as   you can see the response body includes my name and  my job through the small tiny little interactive   component right here this helps you learn by doing  and at the bottom as you can see there are quizzes   in all of this information that is actually  helping developers learn in a really good way   we have also tried to gamify this experience at  the dark and light modes which look really awesome   and are super super easy to do with Next.js and  the moment I move to the next lesson you can see   the post request lesson has been tick marked  as complete as something that you have actually   learned and you are able to not only just read  about it you are able to send requests and   understand this particular part of API development  in an extremely deep and careful way and this is   exactly what we are trying to build with a bunch  of different things this is not documentation   this is like a stack that is sort of like projects  based learning where nexius has helped us produce   this really performant blazing fast experience  around something which is not documentation   it's sort of like courses in ebooks mixed together  on the web platform shown to you in different   manners for example here is this React component  which is taking a bunch of data from our API hub   so this is rapid API hub and this is a particular  crunch based API listed on it that you could use   as you can see the latency and service level this  particular API offers on our develop stack what   we can do is whenever someone mentions this it  renders as this particular React component with   this information listed there on the client  side some of it is on the client side some   of it is server side rendered and some of it  is for the sake of SEO completely statically   generated in case you want a review of what that  is we're using csr with nexus to load components   that are where we just render a small page with no  dynamically loading data you see a loading state   and then the page displays everything using  an API for some other pages we are using ssr   mostly these components are the components where  we want to authenticate some part of the workflow   where the API is either non-existent or either  the API is only internal for example if you want   to create an account on rapid API hub and do a you  know send a particular request to a particular API   instead of doing all of that we can authenticate  your request through a particular server pipeline   using the ssr server side rendered pages and  nexus and now we without even authenticating you   we are able to show you a sandboxed experience  of what it feels like to either sell   host or you know use APIs that are hosted on rapid  API right and ssr is super super helpful there   but there are also documentation pages here as  you have seen in guides or in the lms where the   ssd statistic generation comes in super handy  for the basic part the static side generation is   the server generates the entire website for us  there is like no dynamic data for the client side   process but there is also incremental static  regeneration where as you know we have like   35 000 different APIs and we want to build  documentation or information site for that we   are able to use ISR for that in our develop stack  we are using incremental static regeneration very   creatively ISR or incremental static regeneration  is where you can use the fallback true parameter   and what it does is the server generates the page  defined on a particular path on the built-in if   that path particularly exists in your source  code right and if that part does not exist what   it does is shows you the loading state since a  request to that particular API generates the json   and hydrates the data for you at that particular  instant but the second time you visit that   particular page it now has a static cached copy of  that particular page right you see I never really   like the fact that all of my images in markdown is  hosted with the code repository while it's easier   and fun there's no database that you need to care  about it's more kind of more secure per se but for   content writers or if you are that particular  content writer editing a particular post   you have to worry about downloading all of those  assets in all of the Github repository and it's   just kind of a big mess when you're trying to  just add a blog post inside of a Github repository   so what we have been able to build is a module  that we plan to share with you folks soon   which allows us to actually keep our images data  all of the data in a separate Github repository   and all of our code including a mono repo based on  learner that virtual supports in a separate Github   repository so if you are part of the marketing  team or content team writing content for this   particular stack all you really care about is  markdown files and images you do not see any   of the code but if you are a programmer if you're  trying to improve this ui as you can see here if   you're trying to build new uh ways of interactive  content that developers are going to use   you only care about the code not the data not the  you know images or a markdown or what have you and   that is a fun part like our build script is able  to generate a json API at the build time and as   soon as someone visits this page ISR method using  the ISR method we can also use a fallback for new   guides for new things that our content writers  are writing in a completely separate repository   and that folks is a whole lot interesting in  that is like things like these are what makes me   super super excited about the future of web  development with something like next ges and   just like that with csr ssr and ssc we are able  to build an activation developers tab so you see   millions of developers are already consuming our  content but this stack is actually activating them   allowing them to learn by example and by doing or  learn by watching or whatever their preference is   we are able to render things on client-sides or we  are able to creatively use the ISR method to bring   data from different sources into a particular  single Github repository which is completely   separate from code I'm personally really excited  about all of the things that next year's has   enabled us to do without ever worrying about you  know image optimizations Webpack configurations   or anything really we have at this entire stag in  TypeScript and we don't worry about our types of   configurations because Next.js has kind of tucked  those configurations away from us so we can focus   on building awesome projects like this I am  really excited about what we are going to launch   early next month here at rapid API using next ces  if you are excited about something that I have   presented if you have more questions you can reach  out to me on Twitter I'm mostly active there at mr   motherwest and I'm really excited about the future  of web per se with all of the creative components   that Next.js have made super super simple through  all of this innovation in just the last couple of   years a small team here at rapid API is able to  build massive projects like these without a lot of   effort and with an excellent developer experience  we are building our entire developer relations   stack in next years and if you are interested in  something like this go ahead and visit a west.dell   hiring or reach out to me on Twitter and let's be  friends there I've seen developers think of nexus   as this one single thing you know it's either  built for static sites or for dynamic sites or for   only web apps but as you can see it's not jam  stack it's I think it's I and I completely believe   it's much more than jam sites jam stack and beyond  jam stack you can not only build your entire   landing page your blog your marketing stack for  the next years but you can actually try and build   your sas app your actual application with nexus  and that is exactly what I kind of predict is   going to happen next we are going to consume  the entire documentation stack for next years   and then our marketing site in parts of different  products that are based on web right using Next.js   if you have any question related to that and if  you're excited about what we are building reach   out to me on Twitter and with that I hope you had  fun I hope you enjoyed my talk take care bye peace Hey everybody my name is Nick DeJesus  I am so excited to give this talk   pitching the JAM stack and its ecosystem  to your clients a little bit about me   I'm a developer experience engineer at Prismic  I like things related to all things related to   eCommerce Stripe and how devs make money building  sites which is actually what this talk is about   so if you're here already you're signed up for  an xjs conf you're probably already aware of   the JAM stack you probably already love the  JAM stack you know we love the scalability   the security the performance and everything  else that comes with it the entire ecosystem   however how do we sell the JAM stack to others  so this is a really fun talk it's actually a   joint talk well I'm the only one speaking  but I got some help from Dan Spratling,   Dan is a front-end developer freelancer and  founder of Skyward a virtual agency focused on JAM   stack development and I also had the pleasure of  speaking to four other successful agencies Jono at   Rubato Studio, Hayden from Jelly Pepper DJ and TJ  from Monogram and Pablo from Somos Gente Digital   so let's start off with how do you find  your clients a lot of them get their   clients from referral systems from other  JAM stack specialists that find clients   through social referrals and direct contact  asking specifically about JAM stack projects   putting out ads on specific use cases they'll  get clients from people looking to leave other   platforms they're not very happy with their  plug-in ecosystems or website performance and some business some businesses  are looking to get away from   expensive hosting situations where maintaining  and upgrading is a nightmare for them and then there's the good old-fashioned  cold calls or or are walking in on a   business and you know asking if they  need any kind of website work and   you're usually targeting people that might  look to build something with platforms like wix and then there's educational content stuff like  blogs that have titles where things say like JAM   stack versus some technology or straight up  saying that Next.js is the best framework. So who is the JAM stack good for they get a lot  of clients that are maintaining marketing sites   you know they're the main ambassador of a brand  like a SAAS company for example now these sites   have marketing teams focused on website promotion  and then there's also light eCommerce sites   clients that are already using shop  something like Shopify on the back end   and want a more personalized experience to  set themselves apart from the competition   and then there's companies that have marketing  teams that are a little more technical pro tip   these are marketing teams that are more likely  to go JAM stack versus straight up software teams   and then there's also cios who may have  heard about Next.js or the JAM stack and so why is the JAM stack good for these  categories for marketing eCommerce and SAAS So the benefits per site type so with marketing   you you want to talk to them and let them know  that you're going to get great performance   security everything's going to be cost effective  and an overall better developer experience and for   eCommerce you get to use multiple back-ends so for  example you can use Prismic for your content and   Shopify for your products and then there are  SAASes so you get to share data across pages   shared payments you can still use it as a single  page you still use the JAM stack as a single page   apps app and it's really easy to set up doc sites  on the JAM stack and just to be clear every single   category here they all benefit from all  the same things these are more or less the   things that you'd want to say you know for the  clients that are running these types of sites   so you found a good lead what's next so we asked  these agencies how do you pitch the JAM stack   to clients now selling the JAM stack isn't  actually very special if you can sell a website   you can sell a JAM stack website and so  you know selling a website and more or less   about faster growth saving money saving time the  thing is JAM stack makes these things a lot easier So what really makes JAM stack  better well out of the box you get   high performance because there's  no background processing and data   is served through an API it's a lot easier to  get fast websites without doing anything extra   marketing teams are more likely to go JAM stack  versus software teams we said that earlier they are secure by default static sites don't  really require a constant connection to a server   meaning less chance for hackers to break  your website you don't have to worry about   the guy in that give they're easy to scale  scalability allows them to grow if they have   hundreds or thousands of blog posts products or  marketing pages the JAM stack can handle it all and they also work for every type of site it  doesn't matter if you have a marketing website   an eCommerce site a SAAS or something else the  JAM stack will work for you and I'm sorry I really   tried to find a gift for this one I i was really  struggling I wasted too much time on this slide   and then it they also work with any platform  you're not really restricted by a single platform   pick your front end pick your back end you're  not locked into an ecosystem by your decisions   so one pro tip we got out of these interviews  is that you should pitch design systems so   these are some screenshots provided by Dan on how  Skyward pitches their projects so static websites   can still be dynamic Skyward creates component  driven architecture starting with their designs   building modular design means making edits and  it's much easier and you're not restricted to just   one layout it also means developers don't  have to guess what can and can't be edited working off modular designs means coding  is much easier developers have been used   to component driven designs for a long time but  having designers and developers speaking the same   language and thinking about components the same  way makes collaboration between the teams a lot   easier and everything is documented and tested  automatically Storybook is used to document   components creating a system where everyone  can refer to and linking up designs and code   Chromatic is used to visually test the components   based on Storybook ensuring components don't look  different between pull requests Cypress is used   to functionally test components and make sure the  user can interact with them as expected every time   you don't need this approach but it does add a  lot of value for just a little bit of extra effort and so one thing Somos Gente  shared is that they are able to   build really fast there they don't actually  pitch their design system directly to   the clients but because of the design  system and the fact that it exists   allows them to say things that like they can  deliver a website in two weeks and promise that and then from Roboto you know clients  when they see the design system   they get to see what they're  getting how it's built and they   understand what they're paying for it gives them a  strong sense of security that supports conversions   and so Prismic slices they they help tremendously  with putting together fluid design systems   that are easy to present to both  technical and non-technical clients and then you also would benefit from demoing  how easy it is to use Prismic not any of the   agencies that I've interviewed but a while  ago I heard someone say to to a client that   you know if you can write an email then you can  use Prismic and I thought that was really helpful So at the end of the day you know like this here  is a list of things that are really important   like the valuable parts of the JAM stack you  want to figure out which one of these things   resonate with your clients the most so just  to read it off you've got high performance   low maintenance it's secure by default easy to  scale works for any type of website works with any   platform and you can consume multiple content  sources and it's cost effective long term and   just to share a little story about the  flexibility of multiple content sources   I believe it was Jelly Pepper they had a client  that wanted to move to the JAM stack however   their old platform had over 300 blog  posts and they wanted to maintain that   seo value so what would you do in that situation   well what Jelly Pepper did they kept their current  back end as the source of data while upgrading   the front end to the JAM stack so they got the  performance boost they maintained the seo and all   that other good stuff they later moved everything  over to Prismic when the client was ready So one might ask is JAM stack cost effective  well short term if you're building a website from   scratch and you're getting started with the JAM  stack it'll be quicker and easier if you're using   a template if not you might find that traditional  solutions currently offer faster ways to get up   and running but long term JAMstack makes a lot  of headaches simple for the long term maintenance   expansion automation testing reusability this  leads to reduced costs and creates a better   experience for you and other developers on the  project so let's talk about getting the work done   so you know we're talking about planning  building and the maintenance so with planning   you want to organize what you'll be doing and  break it down into different parts if you're   working with a team you can overlap you know  like working on design and development to be   even more effective and then you just straight  up build you know you get the designs done   the content the development any other parts of  the process that you need to get out of the way   and then maintenance kind of looks like answering  questions fixing bugs if you get any of those like   I haven't seen any bugs or anything so and then  like other like ongoing support I know I think   it's Somos Gente they like to say always answer  the phone I'd throw that under the maintenance   category and so what's different compared to  traditional builds so the process doesn't change   much but there are some small things you might  find different if you're used to building with   drag and drop editors you'll find less of that in  the JAM stack space at least for now but instead   you get a better experience for your developers  making growing easier and more fun to work with   projects also require less maintenance  after project is completed which is great   for clients as they they aren't held hostage  to keep their website up and running which   saves money long term and allows them to spend it  effectively on improvements that actually matter So what to do after project completion  so we've got these categories here   maintenance and support gemstack sites don't need  maintenance to keep running unlike traditional   sites but if you'd like to offer maintenance  it's a great way of getting more continued work   you can dedicate support time to improvements  which are a better value for your clients anyway   dan shared one of their favorites analytics  reporting bug fixing and improving marketing   over time with new landing pages  or slices to improve page content   you can also suggest more improvements if your  client has a huge piece of software there will   probably be more areas which you can help them  improve do a great job and it'll be easy to   convince them to keep working with you for other  projects and you'll be in a unique position where   you already have inside knowledge about their  projects another thing you might want to do is you   want to get more testimonials and referrals work  brings more work so when a project is coming to an   end be sure to get testimonials from your client  and that you can use in future pitches or on your   website clients are also a great way of finding  other clients they have connections they work   with they work with so ask them to refer you to  others in an easy in as an easy in for more work   and marketing marketing is the core of getting  work done for every business so when you   have some down time it's a good time to start  creating some newsletters get on social media   start tweeting reach out to others and  you can find your next project that way So at the end of the day what you're really  selling to your clients is the future of the web   JAM stack is modular it's designed to have  parts swapped in and out to best suit your   needs you want an eCommerce store add Shopify  you want to accept Stripe payments add that too   you can do it all without  changing your original stack   JAM stack is powerful you're not losing any  potential by switching to the JAM stack you   get better performance better security  and better scalability out of the box   JAM stack is loved most developers who work with  the JAM stack love it satisfaction is increasing   and more companies are switching to the JAM stack  because of it and just straight up JAM stack is   the future and Prismic wants to help you find your  future clients we've actually built a free pitch   deck template to help you land more clients the  link is prismic.com/nextjs/conf thank you Vercel   for letting me give this talk if you want to  stay in touch make sure you follow me on Twitter   also follow Prismic we're going to be diving  deeper into these topics in the future, bye! Hi everyone my name is Anuradha Kumari and I'm  so excited to be presenting to you all today.   Today I will be talking to you all about  taking Next.js applications to next level   with accessibility and SEO optimization before we  start little bit of introduction about myself I'm   working as a front-end consultant with passionate  people I'm a Google developers expert for web   technologies and Cloudinary media developers  expert and also an accessibility advocate   You can reach out to me on Twitter @miracle_404  Let's get started the agenda for today is I will   be talking about some tips for creating accessible  and SEO friendly Next.js applications first   briefly see what these terms are accessibility  means making resources and services usable by   everyone there are multiple types of disabilities  in the world and disabled people use different   types of assistive technologies to access the  web like screen readers switch keyboards etc   so we need to ensure that we follow proper coding  guidelines so that we make our applications   accessible to all our users SEO or search engine  optimization means making improvements in our   application which might have noticeable impact in  the way our website appears in the search results   to understand why we need SEO let's see how  the search engines like Google, Bing, etc work   So the search engine or search system  have four main responsibilities   they parse the content in all the websites  available and this is called the crawling  phrase then the data collected from crawling phase is  stored for further access it is called indexing   sometimes they also go to the rendering phase  where they perform some operations if the website   has client-side JavaScript then comes the ranking  where the data is stored in the indexes is query   as per user search inputs or keywords every search  engine has a crawler like Google has googlebots So if you want to check if your website is indexed  or not you can go ahead and search in Google   site:your_website name so let's quickly check  it out here I have tried to search for my   website which is anuradhakumari.com and when  I search for it I can see all the URLs for my   website which is good it means that my  URLs are getting indexed by the Google   you can use this to check if your website is  indexed or not if not it's time to make some   SEO optimizations let's code we can create a new  Next.js application using "yarn create next-app" application and then we can run the dev server  using "yarn dev" so I have created a basic website   here where I have made some changes to the default  layout let us see how it looks so I have a header   which is I have trying to create a game  wherein to fight the inaccessibility and then   I have three different levels of game lowest  medium and highest now at this point what I   want to do is I want to run an audit and see how  accessibility and SEO are doing in this stage so   you can right click on the website and  inspect then the dev tools will open up   in devtools Lighthouse what we can do that we  can select for categories accessibility and SEO   go ahead and generate the report the results are  in we can see that accessibility has a score of   97 and SEO has a score of 100 so if we see what is  the error with accessibility then it has a missing   lang attribute on HTML before we go ahead and fix  this I would like to tell you that this code is   not indicative of the total accessibility of your  website it is just the some automated checks are   run and they contribute to almost 30 to 40 percent  of accessibility issues so we must also manually   test our websites so for this talk we will stay  with these Lighthouse reports so let us go and see   So we ran the Lighthouse audit and we saw that  there was a missing lang attribute on the HTML   now what is this error so this is a very  common error and of WebAIM which is a   non-profit organization they every year run  report accessibility checks on top 1 million   website home pages and in that report if you  see there are like this is the report and   almost 28.9 percent of home pages as of February  2021 had this missing document language error   there is also a very nice Github discussion  around it on Vercel Github where they talk about   different ways in which we can solve this for our  nexus application we are going to look at two of   different approaches today so how can we fix it we  can either add a custom document to our website or   we can add the locales in next.config.js so let's  start by using first approach which is creating   a custom document so for that we can go ahead  and add a _document.js file in our pages folder   so I have created a _document.js file in the pages  folder and this is the default code which I have   taken from the next year's website and if we see  the main thing here is that we add a structure   so we have HTML head body tags here now we want to  add the lang attribute to our HTML so go ahead and   add lang so I would like to add language of  English since my website is in English language   so if we go ahead and check this now so in  elements tab we can refresh the page and see that   now the HTML contains the language of English so  now this will pass in the Lighthouse error report So we saw how to add lang to  HTML using the custom document   we can also alternatively add i18n configuration  in Next.js config file wherein we can add multiple   locales and then we can also add a default default  locale and our HTML will pick this default locale   now we added one single page and made it  accessible now let's add more pages and see So I have added three different folders because  I have three different levels for this game so   lowest medium and highest so and I have added  some code so I have a section and a heading   for it and then a form where it different shows  different questions so let's see how it looks   So if we go to the lowest level we see the  list of questions which we can select from   so now we are interested again in running the  Lighthouse report so I will run it again so the   results are here and if we see the Lighthouse  score again is 97 so we have a different error   here now the document does not have a title  element why because we haven't added any   title yet but it is a very very important piece of  information it is also important for accessibility   as well as for SEOs because the screen readers use  it to make the users know that what your page is   about like what's the overview of your page and  also the search engine crawlers they rely on it   to determine if your page is relevant to the user  search or not so it's a very important information   and if we check for SEO errors we can find the  same title error apart from that we also do not   have yet added a meta description it is also  important because when your website appears in   search results it shows the summary of what your  website is for so and it gives users a clear idea   if they should really come and visit your website  or not so these are very important informations   so let us see how to fix that before that there  is one more thing which I noticed when I created   new pages the default heading and footer is not  coming but what I want I want my pages to have   header and footer all all of them because they all  represent a game together so we can also manually   add it on on different pages but we can also use  something called a layout so let us see so first   we will start by adding a layout what we can do we  can create a components folder with a layout file   so here I have created a components folder  and a layout file and here what we have done   is the common header and footer I have picked it  and added it here so we have a header and we have   a footer and also what I want I always want main  on all my pages right so and then there is this   children so whatever we will write now on all  the pages the that content will come inside the   children we want it like this so we will wrap all  our pages within this layout component so let's go   ahead and do it so we will start with our index.js  file so in index.js file we will go ahead and   remove this header and remove the  mail we will add a layout to it then we'll remove the footer as well we do the same with our pages so we will  just see for lowest and we go ahead and   add the layout to it okay   let's go ahead and check the website again so we  see now we have this header and footer on this   and if you go to home page it's still there so  now it's reusable and we can use it in all the   pages that we want so now let's fix the title  and meta issues for that Next.js provides a head   tag so what we can do that whatever title  and meta description that we have to use   they go in the head tag and they will appear in  the head of the HTML document so I can add a title So I will write the name of  my game that hey this is it   and then I'm on the lowest level page  so this gives the users an idea that   where I am currently on their page on the  page and now I can also add a meta here   so I have added a meta of description so which  will give a overall description of what my website   this website is about like it's the lowest level  of game and the questions are related to level so   this will give uh overview to the users that what  this web page will contain now if you go ahead   again and if we see now uh it it displays the nice  title and uh if we run the Lighthouse report again the scores are there and if you  can see they are both hundred now   because we have fixed all  the issues which were listed   so we have added a layout so that the code does  not get repeated and also we have created a tight   added a title and meta description for new pages  as well so they also do well in search results now   that we have seen some of these code examples let  us also see some of more important terms in SEO   so there is a robot.txt file this file tells the  search engine crawlers that which URLs the search   engine crawlers can access on our websites we can  also use this to block some of the unimportant   resource files like images etc so a sample of  this is this is a sample code wherein if I want   to block some pages so like I want do not want  Google bot maybe to crawl my admin URL so I can   say that hey this is a user is in Google bot and I  would disallow this URL to be crawled by googlebot   otherwise in other cases we can just have that all  different types of user agents and alloying all   our URLs and we can also add a link of site map  of our website site map to this robot.txt files   now what is a site map so sitemap is a file  where we can provide information about our pages   videos and other files on the website it helps  the search engines to find crawl index all of   our website content and it also tells the search  engines which of our pages are more important   so we are going to see how we can create  a sitemap.xml file for our website   going to note here is sitemaps might not always be  needed for SEO but it's recommended and we can add   it for our websites so how can we generate a site  map we can also generate it manually so we can   create a sitemap.xml file in our public folder  and generate it via some online generators or   write code ourselves for all our URLs but then  we will have to update it every time we add new   pages to it like when there are new URLs we can  also use multiple automated solutions for it   I am going to show you how we  can use a package to do this so   there is this package called next hyphen site map  so we can add it in depth dependency in our code   and then we will have to create a sitemap.js  file and add it in our post build script to   say that after the build is finished please go  ahead and generate a site map for my websites   let's see so I've already added this package to  my dev dependencies and we can create a sitemap.js   file with few information it is very much  configurable but I have added the few necessary   configurations here first of them is site URL  so you should go and add the website where your   code is deployed to this so for example I have  deployed this code to file iPhone inaccessibility   dot virtual dot app so my website currently  sits here so I have added it to the site URL   and then we can say that hey please go ahead and  generate a robot.txt file for me and also we can   optionally give it a size of sitemap now when in  package.json I have a post build configuration   so in scripts there is a post build script which  says that go ahead and run the next hyphen site   map with this configuration which is present  in our sitemap.js file and I already ran it so   if we go to public we see that robots and site  map files are created and if we take a look at   what a site map xml file looks like so it is a  list of URLs of my website so for example this   is the home and then I had three different  levels so the three different URLs for it   so we have seen a way in which we can  automatically generate our site map now   that we have created our website and made it  accessible and SEO friendly so is our work   done will we just wait for the search engines to  rank our web page higher and wait for the users   to search for keywords so that our websites appear  in search results so we do that but we also share   our links on social media so that users are aware  of it when you share your links on social media   how will the link look like in the social  media preview like on Twitter Linkedin   we have multiple ways in which we can check it  like Twitter has its own Twitter card validator   Linkedin has a post inspector Facebook also has  one and there is also a website which I really   like because it gives you preview of all these  websites together which is meta tax preview so so   far whatever we have coded let us see how it will  appear when we will share it in the social media So the code is deployed here so the  code till now is deployed at this   link so I will go to metatex dot io and  try to check how it looks so if we see   it it it gives the title and a description and  the link of this website but there is nothing   to preview in the image so it's not a very rich  experience for users they will just see a text and   a link so it might not impress the users much and  they might not click on it so how can we fix it   so there is something called an open graph open  graph is an internet protocol which enables any   web page to become a rich object in a social  graph so when we are sharing any link we can   also customize it to contain rich information  like title image URL description types etc so   title image URL and types these are recommended  mandatory things which we must add when we are   adding OpenGraph information to any web page there  are others also which are optional but you can go   ahead and add it for a more rich experience how  we can add it we add it in meta tag itself so we   add the property name in property and then we  add the value of it in the content attribute   of meta tags so let's go ahead and add these  few oz values for our website so here I am in   my homepage index.js and if you see there are  these oz values added so the title corresponds   to it should be very similar to the title of your  website and description same goes for description   then you can add a customized image here so this  image will appear when your website is shared on   social media so this is a very nice thing which  we can do and we can also add the URL where it   is hosted so with this code let us see how it  looks now in the social media preview so this   is deployed this code is deployed on our main  website which is fight inaccessibility dot app   and if we search for it I have added a custom  image to it it does not look very beautiful but   I mean this is just to show you but uh so it  will look like this uh you actually will see   a good image and then the title which you add in  the open graph and the description so it it's a   good way to engage the users and let them know a  preview of what they might expect on your content   and it provides a very rich user experience we  just saw how we can use open graphs to enhance   the social media sharing of our website  links let us conclude now with some takeaways   always add a document language and set title  for every page so that the screen readers as   well as the search engine crawlers know what  to expect on the page and user knows what   exactly is on that page we also saw how  to create robot.txt file and sitemap.xml   then we saw how we can add open  graph via meta tags in the head   I have added few links for the further read  these are very nice links and uh we also   have a learn SEO tutorial on our next year's  website so go ahead give it a spin and see all the resources for today's talk will be  present at the website anuradhakumari.com/talks You can also scan the QR code and get  quick access to this website it was very   nice presenting to you all here I hope it was  helpful thank you and have a great day, bye! Hey guys my name is Shadid and I love Next.js  I'm a developer advocate at Fauna the serverless   database and today I'm gonna show you guys how  to build a GraphQL API with Next.js and Vercel  Alright so why would you want to  build a GraphQL API with Next.js   suppose you have a React or Next.js application  and you're interacting with many small micro   services and third-party data sources so at this  point you might want to consider combining these   into a single GraphQL service doing so will reduce  complexity in your client-side code you can build   a GraphQL service inside your Next.js API layer  that way you don't have to create and maintain   an entirely new application your graphical code  will live in the same repository as your Next.js   client code making it easier to develop co-modules  and share code in between these two services now   finally when you deploy your Next.js application  to Vercel it turns your GraphQL API into   a serverless function now that is powerful you  don't have to deal with scaling your application   and it will auto scale you don't really have  to care about maintaining servers for your   GraphQL API it will be completely  serverless so that's interesting   alright so we're going to build on a simple  GraphQL API using Next.js and Vercel so stay tuned   and let's jump into the code alright so here  we are in our terminal and the first thing   we are going to do is to create our new  Next.js application so I'm just going to   use create-next-app so npx create-next-app  and my app name I'm just gonna call it myapp and wait for it to scaffold our application Alright so it's it's working okay perfect now we can cd into our  application and open it up on VSCode alright so what we're going to do  is we're going to put our GraphQL   into the API layer so we're going to  create a new file here called GraphQL.js alright before we can write any code we  need to install a couple dependencies   so let's jump back to our terminal and  we're gonna install our dependencies so "npm i apollo -server-micro micro" course save   and we're installing the latest  version of Apollo Server  Micro So this is going to install the new Apollo  Server the Apollo 3. alright so let's jump back So the first thing we're gonna do is we're  gonna import our dependencies so let's import CORS from micro-cors and then import gql and ApolloServer from  apollo-server-micro alright so next we can create our typedef actually so let's create  our typedef so type that's equals gql oops and here okay so let's do some simple  GraphQL model so I'm just gonna call it   I'm just gonna call I'm just gonna make a  type called book so book will have a title and   a book also has an author property   and then I'm just going to create a  simple type to query all the books books and book returns an array of it's a books  return ray of book alright so that's our typedef   so next let's create a resolver  for this okay so resolvers and here query and then books and we can okay so we have to return something alright so  let's so let's create a static array since we're   not we're not connected to a database so we're  just gonna create an array with some objects okay so title uh what are some good books I'm just gonna  use the the one they have in Apollo website just some random books alright and  title for the next book city of glass alright author okay awesome and let's just oops return  books okay perfect alright so we got we got that figured out we got our resolver  oh okay so let's also do our course yeah I'm not really using semicolons and this  one alright okay so next let's create our Apollo   server and we're gonna make a new ApolloServer and  put our type defs right there and we're going to   put our resolvers right there we can do a context  let's do a contacts and contact is just a function and well we're not returning anything  but let's just do it anyways and then   we're gonna have introspection true and you  can also enable the playground so playground true alright okay alright so next what we can do we're gonna  have our servers to start so we're just gonna   start I can't spell today server dot  start so we're defining a variable and   we're putting the start function in there  now we're gonna see why we need to do that   it's because we need we need to wrap our Apollo  server to course and that's like the only way   to make the polysover micro an Apollo 3 to  work with next alright so we can do export   default and wrap our we're going to wrap the  whole export into the course function and that's   why we bought in course at the micro course  alright so here we can create a async function and it takes a request and a  response just like a normal   just like a normal Next.js API layer function  handler API tabular and then what we can do we can   check if the request method  is equals equals option or not because we only want to process post requests  technically so if it is then end the request here return false if not move on and then await  the Apollo server to start oh I don't think we need yeah since we already  defined it like that so we don't really need   to put the parentheses there and then await  apolloServer.create handler right there and let's put our path and this path has to match  your API path so we're going to go api/graphql   and we return our request requests and response  object and that's about it alright let's save it   and let's try to run our application back   in the terminal let's try to run  our application with npm run dev okay now let's visit in our browser  so we're gonna go to api/graphql aha   so looks like it's working so let's try  to query our server and there is an error   alright so let's try to figure out what went  wrong and looks like we forgot to turn off   we forgot to turn off the body parser from  Next since we're using since we're using   Apollo server micro we don't need the body  parser so body parser and false set it to false alright so we run the application and let's  go back here and okay now it's working   okay so books title author let's  run it and it's running it's working alright okay so we're back here in our code so the next  thing we're going to do is we're going to connect   to a database and pull the book data from our  database to do so we're going to use our favorite   database Fauna okay so let's hop back into my  browser here and we're gonna go to fauna.com   and to get started it's it's completely free to  get started you know you just have to sign up   for an account and you don't really need a credit  card so it's it's super simple so I'm just going   to log into my Fauna dashboard and I am going to  create a new database alright so we gotta give our   database a name I'm just gonna call it book store  2 because I already created a bookstore earlier   alright and then you can select the region  group and this specifies where your data is   located so I'm gonna I'm gonna say  classic and create and there you have it   so this is our our database and here we can create  a new collection so the collections are like   the tables if you're if you're coming for a  SQL background a collection is a table yeah   so let's create a table called book collection  called book and hit save alright and a new book   collection is created now we can add document to  our collection and as you can see it's really easy   to insert document it just uses JavaScript syntax  so we can pretty much just copy these things and save them and they'll show  up let's create the other one save there you go we got both of our documents  and there okay so next thing what we have to do   we have to install the Fauna DB driver so  let's install that I can get rid of this   save it go back to my terminal install save  and let's wait for this to get installed okay so we got our driver installed now  what we need to do is we have to generate   a new Fauna secret so that our client application  our Next.js application can connect to our Fauna   database alright so let's go ahead and do that  okay so I'm just going to go back to my browser   and in my Fauna dashboard here in my bookstore  to database we're gonna select security and here   I'm gonna select new key and I'm gonna generate an  admin level key now in production you should never   generate an admin level key you should only use an  admin key in your pipeline in your ci cd pipeline   so you can you can take a look at the Fauna blogs  for for some of the best practices that we have   around authentication keys and securities and so  on and so forth however for this there's a funnel   blog right there okay so you can check this out  check this blog site out for best practices and   whatnot however for this demo application  we're just gonna use the admin role okay so   let's generate a key let's name our key next app  and I'm gonna hit save and a new key is generated   so I'm just gonna copy this go back to my  code over here and here we're gonna create   a couple new environment variables so we're gonna  create a dot env file and I'm gonna call it Fauna   secret and copy paste that also for our local  environment we can create another one env.local copy paste that there alright okay  so let's hop back into our graphql.js   file now what we are going to do is  we are going to create a new client   for our Fauna so we're going to create a  new client to connect to the fonda database   and query some data from there to do so we  first need to import the client from Fauna and then we create a new client  so we just create const client new   client and here we have  we're going to have to pass   in the secret and this is the secret that  we just created so process.env.fauna_secret and the domain at the domain can be db.fauna.com there you go and now using the client we are going  to query the database now here in our resolver we   can just get rid of this go to async function  there you go alright okay so const response   we're gonna say await client dot query and  inside this query function we put our query to interact with Fauna we use a query language  called Fauna query language or FQL in short it   is very similar to JavaScript and based on  a functional programming paradigm it allows   for complex precise manipulation and retrieval of  data stored within Fauna okay so let's take a look   at how we can use FQL to query our database  by the way if you want to learn more about FQL   just visit the official  documentation site for Fauna   and a good place to start learning FQL would be  the FQL cheat sheet so take a look at that as well okay so back here in the code and I just realized  there is a typo in here so it's not going to be   Fauna db it's just going to be Fauna alright  so let's fix that alright so back here and the   query let's write our Fauna FQL query so I'm gonna  use a map function and bring in this map function   alright so a map function in Fauna is very similar  to a JavaScript map function the type of map   function you use to simplify your arrays alright  so within the map function we're gonna use the   paginate function so this will paginate the list  of documents that we get back from Fauna and then   we're gonna use documents and I'm gonna use the  documents function from the library and collection and name of the collection okay so let's  bring in the collection here as well   right okay looking good and then finally  we're gonna use a lambda function   and by the way lambdas are similar lambdas  are pretty much like the arrow functions in   FQL and we're going to use the  lambda function just to define   just to define like whatever we're getting back  from the paginate function and to return it   and we also use a get function to get the data  from there alright so let's console.log this okay so this here is pretty much your FQL query   okay alright so let's test this out so let's  go back to our browser let's query this and return null and we can see that our  console log it is returning some data   so let's map this data and return them  as an array okay so here what I can do let's define a new variable and response.data.map item and we are going to get the  item dot data back okay and return and return the yeah box don't really need that we  don't also need this anymore so let's save   and try it here and there you go now  we're getting the data from the database   awesome okay so next let's deploy our application okay now let's go ahead and deploy our application  and the easiest way to deploy the application   is to Vercel CLI so I'm going to say I'm going  to npx vercel --prod it's going to go to prod   and depending on your internet speed it's gonna  take a few few minutes or a few seconds all right deploying you're gonna get a URL so I can  just go to the url it's done so I can go   API GraphQL it takes me back here okay so I can  just copy this url come back to Apollo Studio   and run a quarry just to test everything is  working and there you go everything is working   as expected now I can also go to vercel.com and  I can kind of take a look at my logs and if we   go to function logs and this is our GraphQL  API it turned it into a serverless function Hey I hope you enjoyed that video if you  have any feedback or if you just want to   say hi feel free to do so my social media  links should be in the description below and   other than that I will see you  next time and have a good day! Hello Next.js audience welcome to this great  session where we're going to talk about unlocking   composable commerce with Next.js we've got  great content lined up for you where we're   going to talk about the good the great and  the ugly of doing headless implementations. We're going to talk a lot about composable  commerce and the definition of composable   commas for us is really revolves around  greater flexibility it's all about creating   differentiated shopping experiences anywhere with  a powerful commerce engine on the back end from a   quick introduction standpoint my name is Sachin  Wadhawan I'm the vice president of technology   partnerships here at BigCommerce I oversee our B2B  headless and back office strategy partner strategy   for BigCommerce here and very excited to have my  co-presenter here George joining us George please   introduce yourself as well great thanks sachin yes  I'm George Fitzgibbons I'm a senior sales engineer   here at BigCommerce I get the opportunity to work  with our prospects from a technical perspective   but also operational so get really in the weeds  as far as making sure things work for everybody   developers business marketing all included  awesome alright so from an agenda standpoint   we've keep we're keeping it very simple we're  going to talk very quickly about industry trends   I'm going to give a quick overview of the  open SAAS platform and what that means to us   we're going to go into some good grid and the  ugly and then I'm going to pass it over to George   who's going to talk about value of open SAAS for  developers and also do a next year's demonstration   I think that's the part you guys are going to  be most excited about alright so starting with   pretty slides and all I want you to take away from  this research that was done by idc is that the   non-headless implementations are declining  and they're going to continue to decline over   the next couple of years and what's been gaining  traction is really the hybrid headless platforms   that offer both the out-of-the-box front-end  functionality as well as freedom of choice   on how you want to build your headless stores uh  in contrast to that what Gartner has been saying   in that by 2023 Gartner predicts that  organizations will have adopted a composable   approach which will outpace competition by 80 in  the speed of new feature implementation so we're   definitely seeing the industry kind of going in  that headless headless commerce space now we all   know that monolith platforms have been declining  and being replaced by modular solutions and   what these modular solutions are providing  are fast performance flexible uh capabilities   uh they're they're suited for any digital channel  they're more open and we'll talk a lot about open   SAAS they're very focused on experience versus  a consumer experience versus product experience   they're cost effective and of course  they are leveraging the microservices   architecture and we'll talk about that as well now  when you think about eCommerce technology spectrum   right you've got open source on left-hand side  so think about magentos of the world where it's   custom it's on-premise it tends to provide you the  most flexibility on the right-hand side you've got   cloud-based solutions SAAS solutions so think shop  files of the like that can tend to be restricted   in what you can do with that platform or or not  think about Bitcoin sits right in the center   there and we coined that term open sat so you get  advantages of both open source and cloud-based now   peeling the onion a little bit later furthermore  when you think about what is this headless   commerce platform or open SAAS platform of course  you've got the presentation layer at the top   right this is where you're going to build those  Next.js storefronts and and create the amazing   beautiful compelling user experiences from the  from the front end but then you've got the core   commerce capabilities right and this is  where the complexity of commerce comes in   around merchandising and and and promotions around  product catalog around data management customer   management cart and checkout management and to  add on top of that this platform also needs to   integrate with other systems that the business  or the merchant that you're working with might   be using like erps or order management systems  or pims right if you peel the layer even further   right you've got you know even more complexity  in each of these commerce domains so within   product catalog you've got price list you've got  brands that you've got a you've got to figure   out which in within payments and tax you've  got tax classes and you've got tax providers   all of this complexity when you're leveraging  uh open SAAS platform all of this complexity   is something that you don't have to deal with you  know as a developer while you're building and and   growing and managing the front end layer now you  want to make sure that the open SAAS platform also   is leveraging modern SAAS structure right so it's  built with growth in mind it's built with scale in   mind so as your implementations and your customers  continue to grow in their uh growth journey they   can continue to stay on that on that platform  now we truly believe in in mark architecture we   are part of a member of the mock alliance and  as you can see on the screen many of the other   players in this market that have also uh you  know joined the market line so it's a great   great movement you know towards bringing  success towards headless implementations   alright so let's dive into the good the great  and the ugly on the good side I've already talked   about open SAAS right some of the bullet points  under open says the benefits of open SAAS that   you as the developer community and  the nexus community can expect are   lower total cost of ownership for your merchants  and and for you you don't have to worry about   upgrades and availability so the platform scales  easy to upgrade there are no uh disadvantages or   or hassles around maintenance of the  platform we take care of all of that   and then on top of that you get 24/7 global  customer support of course the platform needs to   be scalable that's the good part and as developers  we need to make sure that as you are customizing   and and creating unique feature set on behalf  of your customers you want to ensure that your   platform scales and it's flexible and nimble  to support those those capabilities you want to   make sure that the open SAAS platform comes with  comprehensive partner ecosystem right it should   have pre-built integration so you don't have to  it should have best-in-class choices for your   merchants in every category right so the platform  should not force your customers or your merchants   to pick one solution only right it should provide  that freedom of choice and then it should also   enable easy upgrade path for the installed  apps so from a merchant experience when they do   add those add-on solutions to their store  right it should be easy for them to leverage   new features from those app solutions that are  relevant to that customer right you also want to   make sure your open SAAS platform is innovative  right and it's keeping up and staying on top of   the latest innovation so again you don't have  to right so think about omni-channels so what   how are businesses selling through tick tock  through facebook through instagram you want to   make sure that the platform supports that what  about buy now pay later what about buy online   pickup and store what about 3d ar vr how about SMS  marketing which is getting a lot of traction right   so this is the good part of having an open SAAS  platform that the platform is ensuring that it   offers features and capabilities in all the latest  and greatest innovation now payments gets complex   really fast right so think about does the platform  provide the flexibility of the payment gateway the   payment methods the payment types that you want  integrations to so think about Stripe think about   chase think about klarna right the platform  already has should have those integrations   pre-baked in so you don't have to worry about  how does your store enable these payment gateways   right similarly I talked about omni-channel  so what if your customers and merchants   want to list their products on wish on Walmart on  amazon do you have to worry about how to create   and integrate into those channels or the good part  is that you should rely on your open SAAS platform   to already have those integrations built in and  maintained over time now I talked about a few   of the partner ecosystem but this is just a quick  flash of the most common you know categories where   the these app solutions are going to be really  relevant right so we already talked about   payments but think about shipping think about  fraud think about email marketing point of sale   and you can see hopefully you recognize  best-in-class solutions available here   that are instantly available to you from the open  SAAS commerce platform alright on the great part   wouldn't it be nice if this great platform was  also developer-led wouldn't it be nice if it   offered unlimited APIs would it be nice if it  offered really fast site performance and had   globalization capabilities in case you need  to build stores in different languages and   just different currencies and would it  be nice if it just came mobile optimized   out of the box right so these are all the benefits  that make even that open SAAS strategy and vision   you know greater for especially for for the  developer community now on the ugly side   right so three categories that we see and  the reason we're calling it ugly it's really   these are some of the areas where we see that  our agencies and our developer community kind of   get stuck or these are the gotchas right  so when you're doing a headless build   from a payment security standpoint you've got  to think about pci compliance are you going to   manage that or is the merchant going to own  pci compliance right as your business grows   and you're getting more phishing and ddos attacks  who manages that right do you need global payment   support if you're launching into different  countries do you have the relationship with the   banking companies and banking institutions in that  region in that country to be able to support multi   currency what about digital wallets what if your  customers want you to enable apple pay or chase   pay on their stores how easy it is for you to do  that and and and how you how do you do that right   from a marketing site right you can create amazing  beautiful compelling storefronts but what happens   to those you know visitors that you attract how do  they convert into paid customers right discounts   and promotions can get very complicated you need  segmentation and you need notification emails   to be able to to to manage that right I talked  a lot about integrations you've got single click   apps that we that we that we looked at you want  to make sure that you are not having to work with   each of those app providers to build a custom  one-click single click you know integration   as you start to put all the pieces  together data gets complex right who's   who has to deal with transforming the data and  managing the sync between different data sources   and last but not least of course you know are your  stores you know google optimized right from an amp   perspective right so these are all some of the  most common scenarios we have seen where where   the developers can can content tend to get stuck  or have challenges as they are doing headless   uh implementations so with that I'm going to pass  it over to George to talk about value of open SAAS   for developers great thanks sachin so before we  get into the nitty-gritty of this list I generally   have the same conversation when I'm talking about  open SAAS to an engineering team how I describe   it is anybody could connect to a tax provider  but does any engineer want to work with taxes   I don't know if there's any tax specialists  out here but you know those are the kind of   tasks where it needs to get done but there isn't  necessarily a gain for the business and so when   we're talking about open SAAS we're talking about  the flexibility but also the SAAS perspective   and when I'm thinking about SAAS I'm thinking  plug and play we have there's more than a handful   of best-in-class tax providers that are keeping  up with all the newest laws north dakota changes   the tax providers keep up to date being able to  plug and play and have that connected to your   cart and checkout out of the box in a task that  your engineering team doesn't have to worry about   is really the power and beauty of open SAAS so  really to start getting into it a bit more and   we're going to walk through all these in some  tangible examples but our theory is adding   out-of-the-box capabilities and functionality  to best-in-class APIs and documentations   is really taking the idea of headless and  decoupled front-ends to the next level   taking it so you are able to focus on core  business in executing on commerce with   flexible easy to use core functionality so with  powerful APIs everything can be built but not   everything needs to be built you don't necessarily  need to own taxes you don't necessarily need   to own shipping you don't necessarily need to  own checkout those are just a couple examples   BigCommerce offers a robust admin so when that  marketing team wants to run a promotion and you   tell them you need to write a script you're not  going to you know alienate business and developers   you're going to really unite and giving them the  tools they need but also you're going to have   everything you need from an API developer's  perspective so the combination of the two   checkouts is a great example for us checkouts  can be hard we have over 70,000 merchants using   our checkout we've gone ahead and open source that  checkout so you can bring that wherever you want   whether you host it with us and we take on full  pci compliance or you need to heavily customize   it and do whatever you want with it that is a  resource that we're giving to the community that   you can take advantage of and although by the way  it's tied in with our taxes tied in with shipping   and really easy to customize and we'll go through  that and so would it at the end of the day when   we're talking about open SAAS own what you  need to own whatever is core to your business   your unique problems your unique solutions  that you as engineers solve those are great   that's what makes the business special and  what brings value but the core commerce is a   solved problem we have solutions we have domain  expertise and we can bring that to the table   so that again you can focus on your business  problems we can take care of the commerce problems   so I'm gonna hop in to a couple demo examples  now I'm gonna take the screen from your sachet   so quickly just to orient before  we start jumping all around   what we really focused around in this  problem statement is somewhat of a   common problem in a problem where business  pro business and engineering need to solve   it's an example of subscriptions subscriptions  are something that is core to businesses   selling products is more in the commerce front  I'll give you an example you need to list products   you need a mark you need to merchandise the  products you need to set prices organize change   orders of products you need to add in promotions  but the end of the day somebody's buying a product   once that product is bought that's where core  logic or core business rules come into play with   subscriptions i.e how am I enrolling the user how  am I handling it once a user buys say a physical   product and a subscription product and all the  complexity that can come with subscriptions   in the general example anything that comes into  play with unique business logic so I'm in the back   end of big up BigCommerce and so this is really  a SAAS component so the analogy that I was given   earlier again as a developer you don't want to get  into building out uis of how you set up products   you want to give tools for the right job business  users are able to come in here set up products   build out kits build out bundles all those core  commerce things that you see across the web   very common we've solved that they're all baked  into an easy use admin and so when we're talking   about Next.js and the front end just to call  out generally BigCommerce is front-end agnostic   we call them storefronts can have multiple  storefronts i.e what we describe as channels   so in this example we're really going to  blend in the open and beauty of Next.js   and the great framework with the SAAS in  this example so just walking through this   site it's very basic just to call out  you have a basic subscription product   razors it could be food could be perishable goods  you know any of those common examples of refill   products that are getting automated uh weekly  they may have different delivery dates you know   all the complexity that can come with adding a  subscription and maintaining that subscription   but from this simple example I have this Next.js  framework powering it all via the BigCommerce   backend when I'm going to interact with the cart  and checkout this falls back into the SAAS domain   things like taxes things like shipping things  like promotions can all be set up and enabled   via the admin and respected by the API and  really where some of the more magic comes in is   when you're going to a checkout I always call this  out when you're talking headless checkout is a   is a big thing to always think about because  again you can build anything you want with APIs   but checkouts you of course can build but there's  compliance and security risks that come with that   so by us bringing a checkout to the table can  add a ton of value you can really focus on that   next front end that user experience but at  the end of the day you're having a fully   optimized checkout and just to call out check  out our github our checkouts there that's what   I'm going to be leveraging in the example as  I said we can host it or you can take this   and host it wherever you want and of course fully  customize this but taking that step to check out   what we'll see is going from the  next framework to posted checkout   so I'm going to march through this  checkout and call it a couple things   so first BigCommerce can handle all the  account creation if you have your own uh   identity management platform you certainly  support single sign-on and things like that   but again it's another service that's out of  the box you can take advantage of from there   calling out mobile payments I had the google the  google pay we'll talk about that in more detail   but core things every checkout is going to  need the ability to collect shipping from there   shipping methods just to go back to the admin and  show some of that functionality so similar analogy   to taxes you of course could go out and connect to  any shipping provider get those rates returned and   really you know own the entire checkout but when  you have the power of open SAAS those are things   you can just take care of in the back end think  about setting up shipping zones tying in carriers   those are all turnkey functionality you want  to try new markets try new carriers you're not   burning by okay now I have to build that out you  can really take advantage of some of this stuff   and so I have free shipping going from there  billing is the other big call out so I'm   connected with Stripe and Stripe is gonna  be really a call out in this flow as I'm   gonna enroll myself in a starter package one ten  dollars a month I'm gonna get razer shipped to me   that's really a core business thing rules that  you may want to layer in your own logic again   it's not necessarily affecting the front end I'm  able to set it up use everything out of the box   I'm abstracting this out and that's really we're  going to get into some of the Next.js examples too   and so I for this sake I'm just going to  do the BigCommerce uh fake credit card so   similar to Stripe ecommerce is a fake credit  card you can use instead of four two four two   it's four one one one one but I'm  going to kick off this checkout and so from here we're going to transition to  talking more in the weeds in the code so what   this site the Next.js site it's all running this  Next.js boilerplate starter so I have all my code   front end end encapsulated in one directory  this has a huge advantage just from management   I have everything in one place I can reuse  components reuse integrations all in this   centralized location so again what we're focusing  on here is a use case of basic subscriptions   so I'm going to kick off the flow of I have an  order now within BigCommerce our API is completely   observable meaning when an order happens pass that  downstream or pass that to my Next.js layer in the   Next.js layer I'm going to do something with it  when I say we abstract basically you're able to   do whatever you want in the front end use take  advantage out of the box marketing can do their   thing you guys as developers can own that logic  and so one thing I really love about Next.js   is the serverless functions so I  was a huge fan of service functions   when using them in Next.js it really took them  for a next level to me I had my entire front end   my entire back end as I was saying encapsulated  into this one layer where I can control everything   so when I kick off this order I'm going  to send the order to my Next.js function   and then I'm going to enroll this user in a  subscription so from there I kick this off there's a couple important call-outs so this may  seem very subtle but this is a very SAAS component   you may have scoped out a beautiful site  you may scope out all your business logic   but one thing that's always at the tail end of  the list is notification emails it's very subtle   but BigCommerce has a full notification system  of course you could use the aws sqs set up a   notification triggers all that but we're talking  about weeks or days of work just saving because   it's out of the box so I've kicked off that  order and now that order is getting pinged to   my subscription layer from there just to call out  a little bit of order operation about tangibly how   something like this could work walking through  the function I'm getting order data from there   what I'm going to do with it is I want to  say hey BigCommerce give me every information   about the order BigCommerce API gives you line  level data so this could be a great example of   some orders are physical products one time some  are subscription you're able to do essentially   what we described as mixed carts so in this  basic example I look and say hey are any of   the products in the order subscription products  if they are let's enroll them in a subscription   one big call out with our API in its openness is  this idea of a transaction id so we take care of   sending data to Stripe and what I mean take care  of it that's another task that you can easily do   in the dashboard so whether you're switching from  Stripe to adn to another payment gateway or you   have multiple payment gateways because you're in  south america you're in emea you need to manage   all those different uh currencies with different  payment gateways good easy to set up we have over   70 pre-integrated payment gateways but in the  example of Stripe really the task is as simple as   connecting with your Stripe account from there  you have the granular settings I turned on google   pay really easy to turn on one thing that you're  going to want to do if you're doing a flow like   subscriptions is you're going to want to store  the credit card get we are not storing credit   cards we're storing it with Stripe handling  that very securely with the payment tokens   so all that work that would go into building out  a direct integration or even using Stripe elements   you've taken a smallish medium developer test  and turned it into a couple pushes of a button   so really the advantage of turning Stripe on  vaulting credit cards when I want to interact   with that we aren't closing it off you are still  able to get to your transaction id that Stripe   generates that's going to be key if you want to  do anything with the transaction after it happens   in this case we're going to give you the  transaction id back and what you're going to   then do is okay let me get that information about  the customer and the payment method from Stripe   and from there now I have everything I need to say  enter this user into my standard subscription you   can pass in more granular information of oh he  signed up for a free box for the first time so   don't charge the first month charge starting  next month Stripe has a great flexible API   again you're able to take advantage of Stripes  flexibility our flexibility and our openness we   aren't a closed ecosystem just because you use our  checkout doesn't mean you can't access the data   you can and that really gets to the idea of you're  able to own your business logic so at the end of   the day all within the same Next.js layer I  have the ability to build my own front end   interact with all the data give business users  a powerful admin but when it comes time to okay   BigCommerce you've powered all my core needs as  far as selling but I'm gonna take over and that's   really this API layer of okay subscriptions  is core to me so I'm gonna take over great   we'll give you all everything you need user gets  enrolled and at the end of the day you're managing   with the best in breed tools tools like Stripe  BigCommerce merge together to give developers   powerful out of the box dueling just enough  structure so you're not rebuilding everything you   have guard rails but a ton of flexibility you're  not sacrificing anything by getting SAAS value Awesome that was great George thank you so much   for the demonstration again our goal here was  really to give you an overview of the open SAAS   commerce platform and if uh this content piqued  your interest you have to go nowhere other than   next year's site we've got a starter kit with with  Vercel go check it out try us out start a trial   play around with with Vercel next and  and BigCommerce and if you have questions   reach out to us thanks for joining us have  a great rest of the conference bye everyone! eCommerce is driving one of the largest and  fastest global economic transformations in human   history BigCommerce is a software-as-a-service  platform that powers 60,000 of the world's most   interesting and beautiful e-commerce stores we  provide everything that a business needs to create   manage and grow an online store from the design  of that store to the infusion of product catalog   the checkout and all of the tools that help you  market and grow our mission ultimately is to help   our customers turn their long-term digital  transformation into competitive advantage.

Channel: Vercel

Views: 11,392

Keywords:

Id: PWi-49ODKAs

Length: 292min 6sec (17526 seconds)

Published: Tue Oct 26 2021