Next.js Conf - Stage S
Next.js Conf - Stage S
0:00 - Introduction
12:00 - Next.js at the Edge - Suzanne Aldrich + Lee Robinson
23:47 - High-speed personalization with Next.js - Steve Sewell
41:50 - Monogram.io
42:33 - Edge Functions Explained with Kelsey Hightower \u0026 Lee Robinson
1:15:36 - Checkly
1:16:35 - Sentry
1:17:05 - How I fixed 47 errors in my code with Conformance - Kapehe
1:26:18 - Database as Code with PlanetScale and Prisma - Taylor Barnett
1:43:07 - Prisma
1:44:04 - Zero to $10 Million with React Native + Next.js - Fernando Rojo
2:09:52 - Storyblok
2:10:21 - How InVision leveled up their marketing stack with Next.js and Sanity.io - Amy Dutton \u0026 James Quick
2:29:21 - Using Headless Browsers to ship reliable and performant apps - Tim Nolet
2:42:12 - Building for Non-Profit Communities with Vercel and Next.js - Michelle Bakels
3:00:27 - Building a Developer Relations Stack with Next.js - Ahmad Awa
3:18:36 - Pitching the Jamstack and Headless CMS to non-devs - Nick DeJesus
3:35:04 - Taking Next.js apps to the next level with Ally and SEO - Anuradha Kumari
3:55:51 - How to build a GraphQL API with Next.js and Vercel - Shadid Haque
4:21:06 - Unlocking Composable Commerce with Next.js - Sachin Wadhawan
4:50:07 - app.daily.dev
4:51:17 - BigCommerce
Content
723.36 -> Today we'd like to show you the future of Next.js
but first we have to go back to the start.
729.84 -> When we created Next.js in 2016
it was a server rendered framework
735.44 -> for building React applications.
737.92 -> Over time we added tools like automatic static
optimization to help developers achieve a
744.4 -> consistently fast experience whenever possible,
next we became the first hybrid framework
751.6 -> adding support for static site generation
then we added incremental static regeneration
758.16 -> helping you scale static with faster builds and
the ability to fetch new content without a rebuild
765.52 -> developers could choose on a page by page
basis which strategy worked best for their
770.8 -> requirements we tried not to be dogmatic about a
single solution and instead empowered developers
777.76 -> with flexibility. What we found though was that
speed and personalization were often at odds.
784.64 -> Server-side rendering allowed us to personalize
content for our users by computing the HTML on the
791.52 -> server for each request however it was difficult
to have consistent performance and reliability
798.4 -> guarantees. Static site generation allowed us to
consistently serve fast content by caching files
806.4 -> at CDN edges around the world close to our users
however we lost the ability to modify the HTML
814.96 -> based on the user's request. We can make content
more static to solve speed or we can make content
822 -> more dynamic to solve personalization the
challenge is to do both at the same time
828.32 -> what if we could have the power of dynamic at
the speed of static our solution is to embrace
835.92 -> the edge but what is the edge? Like CDNs
the edge sits between origin servers
843.36 -> and our users but unlike CDNs that store
static content only edge servers can both
849.68 -> store and process data. Let's hear from Suzanne
about how we're addressing this challenge.
855.84 -> Suzanne: Today we're introducing middleware in
Next.js and edge functions on Vercel.
863.36 -> Middleware enables you to
use code over configuration.
867.92 -> This gives you full flexibility in Next.js because
you can run code before a request is completed
874.48 -> based on the user's incoming request you
can modify the response by rewriting,
880 -> redirecting, adding headers, or even streaming
HTML this works out of the box using next start
887.2 -> or deployed as an edge function on Vercel edge
functions lets you run code close to your users
894 -> they use a strict runtime that
supports standard web APIs like fetch
898.72 -> this runtime is built on V8 an open
source and high performance JavaScript
903.6 -> and web assembly engine using V8 provides
a hundred times faster startups than Nodejs
909.92 -> on virtual machines or containers that
means there are no cold starts, ever.
915.6 -> Middleware can be used for anything
that shares logic for a set of pages:
920.48 -> authentication, bot protection, redirect
handling, unsupported browsers, feature flags,
927.92 -> A/B tests, server-side
analytics, logging and more.
932.96 -> When self-hosted middleware works out
of the box by conforming to the standard
938.08 -> next build output any hosting provider can be
configured to support middleware at the edge
944.4 -> and Vercel supports this new runtime for all
users today. When using Next.js on Vercel
951.76 -> these edge functions are
deployed globally by default
955.44 -> as a developer you don't need to
worry about configuring infrastructure
960.08 -> and Vercel automatically optimizes your Next.js
application for the best performance. First, let's
967.2 -> look at our base case: a static commerce item
with no personalization this page loads quickly
974.88 -> and if I open up my VPN and change to another
region across the world it still loads fast.
981.68 -> This is because our static assets like HTML CSS
and JavaScript are cached at every edge on Vercel.
990.96 -> Now let's try the same thing with a
dynamic internationalized commerce page
996.64 -> based on the user's location it offers
a discount on the price of the mug
1002.64 -> this still felt really fast because our logic for
determining the user's location and returning the
1007.84 -> discounted price is deployed in US East.
If we switch back to Japan you'll notice
1015.2 -> it's significantly slower why is that while
our static example was cached and immediate
1022.4 -> our dynamic personalized example had to query data
from our origin server in a single region US East
1029.84 -> due to cost or complexity teams often don't set
up a multi-region deployment for their data layer.
1035.84 -> This puts speed and personalization at odds.
We can make content static to solve speed or
1042.72 -> we can make content dynamic to solve
personalization. Using middleware deployed as
1048.64 -> an edge function to Vercel we can have dynamic at
the speed of static let's take a look at the code.
1055.44 -> We can define a middleware using
_middleware inside the pages folder.
1061.2 -> Since this middleware is underneath the /edge
folder it will run before all requests to
1066.64 -> slash edge this function looks at a user's
location and then rewrites the request to
1076.08 -> /edge/${country code} Let's try it out. After I
turn on the VPN we can navigate to /edge in Japan
1085.12 -> it's instant but notice the url didn't
change under the hood our middleware is
1092 -> rewriting this request to /edge/jp
which has been cached at the edge
1097.84 -> giving us high performance
personalization with no delay or layout shift.
1102.32 -> Lee: What Suzanne just showed us lays
the foundation for the future of React
1108 -> and Next.js. At React Conf 2017 Guillermo showed
Next.js to the world with a Hacker News clone.
1116.96 -> This demo showed the ability to server
side render React applications with
1122 -> zero configuration. I'm excited to share we've
rebuilt that demo to use React server components.
1129.28 -> React server components allow us to render
everything including the components themselves
1135.28 -> on the server this is fundamentally different from
server-side rendering where you're pre-generating
1141.2 -> HTML on the server with server components there's
zero client-side JavaScript needed making page
1148.08 -> rendering much faster. This improves the user
experience of your application pairing the
1154.4 -> best parts of server rendering with client-side
interactivity. We've been working with the React
1160.32 -> team at Facebook to prepare Next.js for React 18,
server-side streaming, and React server components
1168.32 -> Let's take a look at the updated Hacker News
clone. On the left I have the client side
1172.88 -> rendered version of our Hacker News clone on the
right I have the React server components version
1178.72 -> I'll use a Chrome extension to reload both tabs
at the same time on fast network speeds you'll
1184.72 -> notice they load about the same but not all our
users have the same device and internet speeds
1191.36 -> as developers. Let's simulate a throttled
network speed and compare the results again.
1197.2 -> If we reload both examples you'll notice that
the server components version renders instantly
1202.72 -> this is because we moved computation from
the user's device to the server whether it's
1208.48 -> my local dev server or the edge. What if the
API itself is slow and not the user's device
1215.6 -> if we look at a completely server rendered example
you'll notice we see a browser loading spinner and
1220.56 -> a blank white page while we wait for results from
the server it's either all your HTML or nothing
1227.68 -> with server components you can stream HTML from an
edge function immediately and progressively show
1234.24 -> updates as your data comes in Next.js now enables
you to do data fetching at the component level all
1241.84 -> expressed as JSX. Using React server components
we can simplify things. Special functions like
1249.2 -> getStaticProps and getServerSideProps are
no longer needed and this future aligns with
1255.52 -> the React hooks model of co-locating your data
fetching with your components. You can rename
1261.84 -> any Next.js page to .server.js to use a server
component then you can also use client components
1270.48 -> which hydrate and become interactive allowing you
to add client-side functionality like upvotes.
1276.96 -> React server components are ready to try today
under an experimental flag inside Next.js.
1282.88 -> This removes the choice of static or dynamic and
improves your core web vitals by serving minimal
1289.6 -> or no JavaScript to your users server
components give developers a new choice
1295.52 -> on where components render either the client or
the server. This enables the future of Next.js
1302.24 -> to give us one more thing what if we could
have all the benefits of incremental static
1307.2 -> regeneration at the per component level this would
remove the choice of all or nothing page caching
1314.08 -> and enable granular caching at the component
level we're exploring a data component which
1320 -> works like a React suspense boundary this
allows you to add properties like fallback
1326 -> revalidate and even surrogate keys defining
your caching semantics at the component level.
1332.64 -> So if we revisit our slow server rendered
example from before and use the data component
1338.56 -> we can instantly see a static cache result
1342.24 -> of our data even if the API is slow
then we can use the revalidate prop to
1349.2 -> clear our cache and fetch new data similar
to the model that we've established with ISR
1354.96 -> React server components and granular component
caching are made possible by innovations like
1360.4 -> edge functions that support streaming eliminate
cold boots and deploy globally by default.
1367.44 -> We think the future is at the edge we want
every developer to enjoy access to the best
1373.76 -> infrastructure for all their projects today
we're making edge functions available for
1379.76 -> all Vercel users. With edge functions we are
giving you the power of dynamic with the speed
1385.92 -> you expect from static. Middleware gives you
back the flexibility you had with servers
1391.84 -> while allowing you to push code
to the edge of our network.
1395.6 -> Get started for free today at vercel.com/edge
Finally Next.js 12 brings us the future of React.
1404.24 -> With server components you're able to combine
static and dynamic data fetching allowing you
1409.84 -> to render pages at the edge close to your users.
Upgrade to Next.js 12 today to try it out.
1426.96 -> Hi my name is Steve Sewell and I'm going to talk
to you today about high speed edge personalization
1432.48 -> with Next.js I'm incredibly excited to
talk to you about this because we will be
1436.88 -> mostly covering the Next.js team's latest
announcement just from today edge middleware
1442.88 -> we're going to talk about what problems
this solves, how to use it with interesting
1446.72 -> personalization tooling and a whole lot of other
exciting content. Let's just go ahead and dive in.
1454.56 -> First who am I? I'm the founder and
CEO of a company called builder.io.
1459.2 -> We're a headless no code platform optimized for
Next.js. Plug us into your Next.js site
1464.48 -> and let your non-developers create the pages and
personalized variations that they wanted
1469.2 -> while making sure that it meets your expectations,
uses your design system and is high performance
1475.12 -> all the time leaving you without needing to work
on this huge backlog of simple requests for pages
1481.12 -> and tests. Let's jump in a little deeper into
what we're going to talk about here. So first
1487.84 -> I want to briefly cover how is personalization
implemented in the past, you know, what are the
1492.08 -> things that went well and what did we learn from
that we're going to improve upon? Then what are
1497.36 -> current common patterns for personalizing with
Next.js and what are the trade-offs? Then we're
1502.32 -> going to talk about personalizing Next.js with
edge middleware and then integrating tooling
1506.72 -> because you probably don't want to hard code
all the the personalizations, you want to hand
1510.72 -> off a good set of tools to be able to handle a
lot of this for you so your non-technical teams
1516.24 -> can create the tests within your guidelines and
then you cannot have to worry about the details.
1522.56 -> So let's talk about the problem that
we're addressing here in the first place.
1526.64 -> Traditional solutions to personalization are slow.
1530.32 -> So in the past you'd probably send a request to a
remote server. You would have to actually send the
1536.56 -> request around the world, uh it could take 100-200
milliseconds just to reach the destination,
1541.92 -> then the server will pull a bunch of dynamic data
assemble a page on the fly and send it back around
1546.48 -> the world. In a lot of cases blocking JavaScript
within, prevent the page from being visible,
1551.68 -> pulling in personalizations or other information
and then you end up with your page. Now that's
1556.8 -> quite slow, we want to have fast pages that are
immediately visible and personalized. And so
1561.6 -> what we really want is static generation right?
It's fast but everybody sees the same content.
1566.48 -> Your home page is the same page for everyone
and how a lot of people trying to address
1570.72 -> this with Next.js currently is they will load
placeholders or empty boxes that then will pull
1575.6 -> client-side some slightly more personalized
information like the amount of items in your cart
1580.32 -> or maybe some more specific personalized
products or other things of that nature.
1586.48 -> So let's look at this in a diagram
form so what we don't want is this.
1590.32 -> We don't want round trips to an origin server
fetching and rendering personalized data on
1594.4 -> the fly and then sending blocking javascripts
that might add additional content injections
1598.8 -> that are unique to the visitor that ultimately
are going to give you very poor mobile speed.
1603.28 -> I'm estimating one second for this but that's
being generous in a lot of cases we've seen
1607.68 -> much much worse in the field. What we want instead
is a cached response! We want it locally so from
1615.6 -> the edge, an edge network, so it's physically
very close there's almost no travel time between
1620.48 -> the edge server and your visitor and we want
it cached we want to be immediately available.
1624.8 -> So the response time is 10 milliseconds
no blocking JavaScript you just get your
1628.4 -> personalized page without any other
hiccups or problems in the way.
1633.2 -> Now the question then is how do you do that,
1634.64 -> because before today this was not
a very straightforward process.
1638.8 -> So let's talk about the solution how
you can actually get the best of all
1643.28 -> worlds with this latest feature
and integrate with other tools.
1646.88 -> So first what do we want? We want high speed
optimization with edge middleware we want when
1653.36 -> somebody visits the homepage of our website we
want different audiences to see different content
1658.96 -> for example if somebody only shops men's
collections let's show more products from men's
1662.8 -> collections, same with for women for a return
visitor maybe we can show a special deal to them
1667.36 -> we don't want this stuff using blocking JavaScript
server-side rendering or all kinds of other issues
1672.88 -> uh like lazy loading purely in the browser
we want to immediately hit our audience with
1677.36 -> personalized content because if we're showing
everybody the same content all the time
1682.48 -> it's not going to be optimized for anybody there's
no point showing irrelevant products irrelevant
1686.56 -> content irrelevant things and traditionally
there's always been this trade-off we sometimes
1690.88 -> call the conversion paradox you start introducing
more tools more lazy loading all this stuff to try
1696.32 -> and drive an increase in conversions an increase
of things that you hope lead to the behavior from
1701.28 -> your users or visitors that you want and in doing
so you shoot yourself in the foot because you
1705.36 -> ruined the performance you add all this additional
dependencies and suddenly you actually made the
1709.84 -> experience worse for everyone. That's where
edge middleware is such an incredible solution
1717.12 -> you can integrate in less than 10 lines of code
to create simple synchronous fast rewrites. You
1722.48 -> can use integration such as with Builder, our
personalization utilities, you can add with
1727.04 -> just a few lines amazing power for anybody on
your team to create personalized variations of
1732.56 -> pages using your components your tech stack all
that good stuff. It is so simple and powerful.
1739.52 -> So how's this work? So under the hood this
is what we're doing: The edge middleware
1744.32 -> is rewriting requests, so if we see a url we see
somebody come into your homepage or an about page
1750.64 -> we're going to look at the cookies and say is
there other personalized information we know
1754.56 -> you can set these cookies or our SDKs can, it's
completely up to you. But we're going to rewrite
1759.68 -> that say /about page to add a delineator like a or
delimiter like a semicolon and then add key value
1767.52 -> pairs like actually the path for this page is
not just about I want to show the about page for
1772 -> return or zero equals true maybe shops collections
equals men other things like prior shopping
1777.2 -> history UTM params all of that can become part
of the new path that becomes the cache key. The
1783.6 -> secret sauce here is Next.js's incremental static
regeneration using the fallback: true option
1789.84 -> so that if anything comes in and they say hey
we haven't seen this combination of parameters
1794.24 -> for the about page path we can then go and fetch
that and we can decode that very easily using just
1801.68 -> another utility Builder provides or any of your
own systems that you need and then you can say
1806.08 -> hey CMS hey Builder hey any other app and service
do you have a special version for return users for
1812.24 -> men's shoppers for whatever it might be and then
that goes right back up and caches at the edge
1817.6 -> so the vast majority of requests 99.99 whatever
it is are going to get instant fast cash responses
1823.36 -> because of the static generation that happens in
real time and only an extreme minority of people
1829.84 -> doing um you know visiting with a unique
combination parameters we'll go through the full
1834.48 -> circle let's talk about the ideal stack here for
this nimble personalized content development so
1842 -> how does Builder for instance fit, the beauty of
Builder is it's not a re-platform it can connect
1846.32 -> to whatever you have it slides in for your hosting
platform Vercel already supports beautifully edge
1852 -> middleware ISR all that good stuff your choice
of framework Next.js is our strong recommendation
1857.52 -> for all new users of Builder or existing and then
connects to all of your other apps and services on
1862.56 -> the backend where they're using commerce platform
CMS tools it doesn't matter all of them can plug
1867.6 -> in obviously they're connected to your site
and Builder can be connected in there as well
1873.68 -> what this allows is dragging and dropping with
your React components so no more hard coding pages
1878.64 -> maybe this page today looks good with the hero
on top and a couple columns but maybe tomorrow
1883.28 -> you want a different component on top and you want
an additional column and maybe you don't want to
1888.08 -> be constantly going back and forth between you
know your CMS adding more fields for home page
1892.16 -> and this and that maybe what you really need in a
lot of cases to remove that backlog of requests to
1897.6 -> throw up a new landing page to you know run
some tests of a page or small variations
1902.4 -> is instead to provide a toolkit to your
non-developers to integrate a portion of
1906.48 -> your site such as the homepage parts of other
pages and register a set of components from your
1911.12 -> design system where you say hey you can rearrange
these components input the props and using a UI
1917.52 -> configure personalized tests A/B tests etc all
of which will be fast and high performance at
1923.04 -> the edge connected beautifully to React code and
publish remotely so your content can publish and
1927.92 -> roll back separately from your actual code so you
don't have this interdependency issue where you're
1932.96 -> deploying code and you're messing with content
and vice versa templates etc you get the idea
1939.2 -> In practice this can look like a lot
of flavors some people really do build
1942.96 -> their site completely with Builder and Next.js
and it doesn't require a lot of custom coding
1948.24 -> Others will work it into an existing site where
these blue boxes are some pages like the home
1952.4 -> page may be totally designated hey anybody on
the team who has the right permissions can make
1957.04 -> any edits on the homepage they desire they can add
and rearrange from our design system of components
1962.48 -> they can run personalized tests like showing
different text images products etc by locale by
1967.76 -> shopping history by any of these things and just
publish and schedule remotely via APIs and no more
1973.12 -> having to hard code these templates you should
focus on components not templates and then this
1977.52 -> can be parts of other pages part of a collection
page part of a cart part of a product page we see
1982.32 -> people will want to personalize product pages
based on hey if you're on a certain type of
1987.2 -> product based on your history based on the type
of product you might see editorial information
1991.36 -> about the materials of the shoes being fantastic
or why it's a great fit for you as a customer
1996.08 -> and all of this applies to data as well so
if you have just pure data like you would in
2000.56 -> any other headless CMS and Builder you can also
say hey I want to show an announcement bar with
2005.6 -> different text based on the audiences all of this
can be integrated beautifully it's automatically
2011.52 -> integrated it just works great out of the box
with the edge middleware the entire setup that
2015.68 -> I described so every element on a page can
be granularly controlled and personalized
2020.56 -> on a per sort of unit basis. It's very cool and
if that sounds too abstract hopefully the demo
2026.32 -> shortly will explain it in better detail but next
I just want to show how this looks in practice the
2032.08 -> drag and drop editor helps you compose from your
components in a high performance clean API driven
2037.2 -> way and then using the UI you can configure
A/B tests just add test variation 50/50 80/20
2043.36 -> whatever ratios that you like and then choose
you can duplicate content or make modifications
2048.56 -> targeted at various groups the beauty is this is
all statically generated so this is not what you
2053.12 -> might be thinking or used to which is like content
injection and other problems for performance
2057.36 -> reliability this is actually in the original
version of the page that's generated you have
2063.04 -> content specific to the groups that you define so
you might target by device by shopping history by
2069.6 -> locale or country codes you name it it's just a
few clicks run the test and see how that impacts
2074.8 -> your metrics that you care about the most so
let's do a demo here i've got this cool little
2081.2 -> Shopaholic site this is made in Builder composing
a bunch of components in our Next.js repo images
2087.28 -> buttons all that good stuff and we have a really
cool couple things to show one as you should see
2093.52 -> is ridiculously fast we can navigate to other
pages we can navigate back it's fast because it's
2098.72 -> statically generated you already know that but
here's the really fun awesome part I have this
2102.96 -> awesome utility that shows me information
such as hey it says I am a return visitor
2109.36 -> it says that I am an unknown gender I don't
seem to shop any specific category or I haven't
2115.36 -> shopped enough for us to say hey maybe you
should see more men's versus women's products
2119.84 -> also you can define anything else for instance
from a customer data platform like segments
2125.28 -> audience such as hey you're a loyal shopper you're
a subscriber to our content you're an ambassador
2130.16 -> of the brand all these things we can toggle
between and see how it affects the end user
2134.96 -> experience for instance let's see what
the men's version of this page looks like
2140.4 -> Beautiful and after it populates now that's in the
cache forever so anytime I refresh it's going to
2145.92 -> just be immediately available I can navigate to
other pages and back and it's just blazing fast
2151.52 -> I can control and right click again and switch
to what do people identify as preferring women's
2157.04 -> products view there we go so now we're going to
see the women's version of the home page as you
2162.4 -> can see like always it's extremely fast and then
we can debug in any which way we want for example
2168.24 -> change the return visitor setting maybe we're not
going to say return root visitor or maybe we want
2173.04 -> to just show what do we see for somebody who is
in our unknown category immediate fast responses
2179.52 -> from the edge and then again this stuff will stick
as you move around the session and now what if you
2185.44 -> want to make updates we can just pop over to
Builder and see so here's how we've created
2190.72 -> several different pages or versions of pages let's
maybe go to our generic homepage and you may have
2195.12 -> noticed that there was nothing special for return
visitors so I can go in here and I can change
2199.92 -> options images text you name it all completely
customizable on who can edit what and how
2206.16 -> let's go in here and let's make a new version
of this page by duplicating it and let's make
2211.04 -> this version of the page specific to return or
yeah return visitors show how easy it is to make
2217.68 -> the changes that you want and configure who will
see this so first let's choose who's going to see
2222.08 -> this I'm just going to say we want to target this
generic version instead to return visitors now we
2228.4 -> can do a combination of things we can say you're a
return visitor and you have various UTM parameters
2233.2 -> or we know that you'd shop a certain collection
category like men's in our case we'll keep it
2238.48 -> simple just know that all this stuff is completely
customizable to you whatever you know about your
2242.96 -> visitors that you want to set as cookies or
in any other way the edge middleware can read
2247.44 -> that can then become something that you target
off of with a simple couple minute configuration
2252.64 -> now we can go in and let's actually say hey
let's add some text to the top and let's say
2260.32 -> "Nice to see you again" we'll be a little bit
creepy with it but you get the idea and maybe
2267.6 -> and this is important to know you can choose to
allow design permissions to some or none of your
2271.6 -> users but hey for me I know what I'm doing I'm
going to allow myself to have design control so I
2276.72 -> can edit the UI as I choose I can add backgrounds
whatever is needed or use these from a design
2281.68 -> system of components like a special announcement
bar React component where I fill in the props but
2285.92 -> you get the idea I'm going to go ahead and publish
this nice to see you again page and next time I
2291.76 -> visit let's do our beautiful um return visitor
settings that's true and gender unknown cool this
2299.28 -> stuff will be live within seconds so it uses stale
while revalidate caching that you may be familiar
2304.64 -> with with incremental static regeneration so all
I need to do is refresh one more time and there we
2309.76 -> go nice to see you again anytime I visit the site
everything is blazing fast cached at the edge and
2316.24 -> just so easy to create any variation you like you
should no longer as a developer need to be telling
2321.44 -> 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
2326.56 -> your tests look at the metrics see what's working
or what's not and just give any guide rails you
2330.72 -> like must use your design system freeform is
okay it's completely up to you so circling
2336.64 -> back just to recap: showed you a little bit about
Builder our headless no code platform how you can
2341.92 -> optimize with Next.js with all of the awesome edge
personalization tools but overall I want to thank
2348.8 -> you all for watching this talk I want to invite
you to check out the repo in this link so that
2353.6 -> you can see that demo yourself and run it yourself
it's really exciting stuff I would love to see any
2358.16 -> feedback from anyone please you can tweet DM me on
twitter I'm @steve8708 and I hope you're excited
2365.28 -> about edge middleware as I am because with the
right setup which is only a few lines of code like
2370 -> you saw and the right tools integrations it can
create such powerful experiences that were just
2375.12 -> not possible before. Fast/personalized the dream
is finally true so thanks so much for watching.
2557.12 -> Hey everyone today I'm joined by Kelsey Hightower
he's a developer, author, father, and minimalist.
2564 -> You might know him from the Kubernetes community
or his work as a principal engineer at Google.
2568.88 -> Thanks for joining me today.
Kelsey: Happy to be here.
2571.44 -> Lee: I'm really excited to dive into
edge functions and I know that you like
2578 -> to explain things based on the fundamentals
so I'm really excited to take a step back
2583.68 -> look at those principles and talk about how
they're changing how we build for the web
2587.8 -> Kelsey: Yeah so you know for those watching you
know my background as a back-end engineer I come
2592.72 -> from a world where you have a three-tier web
app you know front-end back-end and a database
2597.76 -> and maybe a load balancer in between so getting
the taste of all this serverless edge functions
2603.6 -> and how the web front end is evolving is super
interesting to me so I'm looking forward to
2608.16 -> breaking down those fundamentals. Lee: Awesome,
well to kick things off I would love to just talk
2614.08 -> conceptually about why the edge why
are we moving more compute to the edge
2620.96 -> I'd love to hear your take first and then I'll
kind of give my opinion on why we're moving more
2625.28 -> logic to the edge. Kelsey: Yeah so you know the
space that I come from you know containers or
2629.68 -> even serverless you know in the cloud we tend to
think about regions and zones so ideally you get
2635.2 -> as close to the customer as you can but typically
you're still running out of a centralized data
2640.08 -> center and for the most part this works just fine
for a lot of people but when you think about use
2644.96 -> cases like gaming for example you really want that
client wherever the customer is to be connecting
2651.04 -> super quick uh to the edge also in my world the
you know the explosion of CDNs as you think about
2657.04 -> the Netflix use case or you're serving images
you want those to be as close as the customer
2661.6 -> as well so they can render fast load and you're
not pulling data across continents so I think
2666.96 -> that's been our first taste so for many people why
edge and it's like why edge for specific things
2673.76 -> some people are still comfortable with
centralizing some of the logic maybe
2677.6 -> your order management system or your company or
customer profiles I think a lot of that is still
2682.56 -> largely centralized even though we've moved
the closer to people at the continent level
2687.76 -> but I think there's always been a case at least in
the last 15/20 years of moving static assets like
2692.96 -> videos and images to a CDN which tends to have
way more locations than our standard regions Lee:
2700.56 -> I love the two points you made about one just
trying to get content closer to users but then
2705.36 -> also effectively using the right tool for the job
it's not that we're moving every single workload
2711.04 -> to the edge it's another tool in our tool belt
that's enabling us to build better applications
2716.4 -> for the web I think when I look at why edge and
just the landscape of web development in 2021 it
2722.8 -> seems like what appeared to be static for a lot
of sites is actually kind of deceptively dynamic
2729.04 -> because the requirements for
personalization and experimentation
2732.88 -> kind of put us in this tough spot as developers
where if you wanted to have dynamic you might
2738.32 -> have to you know especially with a global
audience you might end up with a slow application
2742.64 -> and if you try to solve that like solve the
speed problem by making it static well now
2748.16 -> you lost the personalization or the dynamicism
so it's been difficult to get both so where I
2754.32 -> view edge is kind of trying to solve both of those
problems together dynamic at the speed of static
2760.24 -> and I think historically you know your context
about CDNs when we went to the edge with edge
2766.16 -> networks or CDNs we lost a lot of the abstractions
that people coming from the server world like you
2772.4 -> know like express middleware right we lost some of
the control and flexibility there so we're trying
2778.16 -> to bring that back with edge functions and we're
doing it through an abstraction called middleware
2783.76 -> so it essentially allows you to run code
before a request is processed and then based
2788.88 -> on that request you can modify the response with
rewrites or redirects or headers all that stuff
2794.32 -> trying to enable code over configuration and get
closer access to that infra (infrastructure) at
2801.44 -> the edge like running as much compute at
the edge as we can for specific use cases
2806.88 -> like you mentioned yeah. Kelsey: So the good
news is I got to put my hands on it and so
2811.92 -> you know the limited front-end experience
that I have comes back from like the PHP
2816 -> days right you would render as much as you could
on the server side and then you would send over
2821.36 -> you know a bunch of other things that then may
do a little bit you know the jQuery days where
2825.28 -> you can kind of context switch based on limited
information you had from the browser or maybe
2829.68 -> the user session and so I looked at how some of
these frameworks evolved over time and I've always
2834.48 -> had these questions like where do you put things
like secrets or database connections and it seemed
2839.84 -> like the industry had evolved to the point where
you could have maybe individual components like
2844 -> the calendar widget or the stock ticker widget
but they always seem to talk all the way back
2850.24 -> to the back end right so you got as close to the
customer on the front end but then there would be
2854.32 -> parts of it that will still have to travel over
long latency stretches to work and I think what
2860.32 -> we tried to do then solve the problem of async
right they just kind of load at their own pace
2864.56 -> maybe you're getting some of that data from a
cache if it's not really personalized for a user
2868.72 -> and then I touch the kind of new stuff that you
all are uh talking about with some of these edge
2872.48 -> functions and so I the first experience that I had
there was like this feels more like Ruby on Rails
2878.4 -> so Ruby on Rails is this really powerful kind
of convention over configuration framework
2883.84 -> where you could just you know design your app in
a certain way lay out certain you know folders and
2888.4 -> structures and then when you built the app it did
all the right things in terms of rendering kind of
2892.8 -> this back-end applications with the best practices
I think you all are trying to do that for front
2897.2 -> end and addressing some of these going all the
way back to the central server by having parts
2902.08 -> of the application run in this new serverless edge
computing platform where I kind of get both the
2908.56 -> best of both worlds without necessarily thinking
about how I deploy each and wire them back
2913.12 -> up Lee: Yeah I think what I 100% agree with that
and I feel like it ties into this evolution of the
2921.04 -> traditional way we were building web applications
and how we're trying to help bring developers on
2926 -> that journey to the future and bring them along
with us as we enable and give these primitives to
2931.92 -> try to make it easier so I would love to dive
into this topic a little bit deeper because I
2937.04 -> really appreciate your experience and your context
on some of this I'll try to give my perspective as
2943.6 -> a front-end engineer and as somebody who you know
doesn't have as much experience in the infra side
2948.8 -> and I'm curious to see how it kind of compares
against yours because I know that you've you
2952.72 -> know you've spent time as a system administrator
you've been an advocate for Kubernetes and because
2958.16 -> of that you know you've moved along from manually
configuring VMs moving up the stack to Kubernetes
2964.32 -> and I feel like when I've listened to you talk
before about this you try to root yourself in like
2969.2 -> different the first principles of web development
right like it's important to understand
2973.68 -> we're fundamentally just writing software and it's
going to run on a system somewhere and the closer
2978.88 -> that system is to your users ideally the better
and we touched on this a little bit before we we
2984.56 -> started but you know ideally you could have that
system be the browser right that's as close as
2990.24 -> you could possibly get to the users but it's not
really practical to run all of your compute there
2997.04 -> so in the front end world from my perspective
React has essentially become like Linux it's
3002 -> this open standard for building the web and then
you have Next.js which is the most popular distro
3007.92 -> of using react so an analogy I like for the
backend folks is like when you're using Kubernetes
3014.72 -> you might be using tools like Helm charts as
an abstraction to define your infrastructure
3020.96 -> so this is you know for those not familiar
it's like infrastructure as code and then you
3026.08 -> can develop and maintain your infra the same way
that you would your code but at the end of the day
3032.88 -> those tools are just compiling down to like
YAML right they're just making it easier or
3037.2 -> an abstraction layer on top. Edge functions
in my opinion are very similar they allow
3043.68 -> front-end developers, back-end developers to write
JavaScript that ultimately just compiles down to
3049.84 -> some serverless compute that's running at the edge
it's I like to think of it as like infrastructure
3056.08 -> defined from code so a little different than
that traditional model what do you think Kelsey:
3062.4 -> Yeah, so I think when I think about context is you
know if you think about the base principles of it
3066 -> there's a database your system of record it has
all the products and the prices of those products
3071.52 -> and your goal is to try to render a shopping
experience to people that are using a web browser.
3077.2 -> So in that world my server is
going to say hey you hit this URL
3081.44 -> I'm going to present to you a page with my entire
catalog in it and then you can browse around in
3087.2 -> that experience I think the challenge is I need
to render your shopping cart uniquely to you
3093.04 -> so I'm going to have to go back to the server
and tell the database what you bought to make
3097.6 -> sure that my database and what you see in your
browser are in sync and I think that's been the
3102.56 -> traditional model that we went about doing this
yeah and so you're right in the Kubernetes world
3106.72 -> that back-end application I did a lot of work to
give it a configuration file with the database
3111.28 -> username and password so only that back-end
application could connect to the database.
3116.72 -> On the front end there's a lot of work
that goes into identifying who you are
3121.12 -> and then having your browser session pass back
those credentials to my back-end so I know
3126.88 -> that I can look up data in my database and
take actions on your behalf I think now what
3131.68 -> we're talking about is moving some of this logic
even closer to the edge and now you get into some
3136.96 -> real tricky situations where I can't give you my
database password in the browser this would be
3143.2 -> a nightmare and you could actually do anything on
behalf of any user so we know we can't go that far
3148.32 -> with things like database connections right so we
gotta move that one layer outside of the browser
3153.76 -> now typically that would be something like even
a serverless platform like Lambda or Google cloud
3159.28 -> functions that's one layer and then at that
point you're just giving connection details uh
3164.64 -> to some API on behalf of that user that all makes
sense to me but I think now what we're saying is
3170.48 -> do we really need to go all the way back to even
a serverless function or a container running in
3176.16 -> Kubernetes could things like how we process
headers like if you're coming from australia
3181.92 -> and I might want to show you a different set
of content well I can make that decision now
3186.56 -> in the edge aka where the CDN traditionally sits
I think that's where it's going to get super
3191.6 -> interesting and now I think as people coming
from the front end or from the back end we
3196.24 -> now have a decision to make where do we put this
kind of logic and where does it make more sense
3202.44 -> Lee: So I'd love to pause here and to
actually look at some code that kind
3207.44 -> of explains what you're talking about
how can we push authentication or logic
3213.04 -> closer to users a layer back from the browser and
make that have lower latency in their request so
3219.44 -> let me share my screen and I'll pull up some code
so I know that you've had a chance to check out
3224.56 -> edge functions ahead of time and one of the
ones that I think is really interesting is
3229.52 -> using JWT authentication so in this example I
have this edge function that's deployed and it's
3238.72 -> checking this JWT token and essentially there's
two different API routes we have one that is
3246.8 -> just a normal API route and then we have another
one that's actually using an edge function so to
3252 -> try to demonstrate this what I've done is have
two different APIs shown below one that's using
3258 -> edge and one that's using just going to origin
now this isn't perfectly realistic because it's
3264.48 -> not actually doing the full authentication with
some provider but I think it helps to at least
3270.96 -> illustrate some of this so ideally you're going
to see the edge responses be a little bit faster
3276.16 -> and I'd love to take a look at some of this code
and kind of talk through what that looks like
3279.92 -> so on the left inside of this example we have our
pages folder and the convention that we're using
3286.48 -> to define how you invoke this logic is called
middleware so inside of our API folder we have
3292.56 -> a new file underscore middleware and inside of
here we're taking a look at the url if it has
3300.88 -> the parameter of edge then we can essentially
directly respond and handle that authentication
3307.28 -> without having to do that extra check towards the
API route so then this logic actually runs before
3315.76 -> the API route logic now this logic it effectively
does a very similar thing it looks at a cookie
3322.24 -> it verifies a token and then it returns some
payload based on that but the interesting part
3329.04 -> is when this actually gets deployed on a platform
like Vercel this could get deployed as a function
3336 -> somewhere and this can get deployed as an edge
function so the difference kind of between a
3341.6 -> serverless and an edge function here is the
edge function is another layer closer to your
3346.4 -> users Kelsey: Yeah and so this makes a lot
of sense to me because when I look at this
3351.44 -> traditionally when we try to do this type of
logic we used to use things like Nginx or Apache
3356.88 -> we would go find some module and you go to the
centralized system and as a developer you would
3361.6 -> have to know how to edit a Apache config maybe
even restart that server and wire everything
3367.76 -> up to do this kind of logic right so I want to add
authentication to this app now I got to go hunting
3373.36 -> for one of these systems that I should go do it at
I think now what we're getting and if I understand
3378 -> this correctly as a developer I can stay within
my same application logic and then just add this
3385.04 -> middleware not deployed to a backend server not
touch Apache but just stay in the same flow that
3391.36 -> I'm already in and just say look I have this logic
we'll never go to the browser I think that's kind
3396.24 -> of the key point here it's going to instead get
deployed somewhere where Vercel's platform is
3401.2 -> going to wire it up automagically intercept the
traffic and then do all the logic that's in here
3407.68 -> and then I just hit save redeploy my app and
now I have this thing that just sits in the
3413.12 -> middle without thinking about touching five
or six different places and restarting things
3418.64 -> I think that is probably the thing that might
blow people's minds in terms of you have this
3423.36 -> self-deploying thing that knows automatically from
convention that it needs to get deployed one layer
3429.28 -> below the browser and just available everywhere.
Lee: Yeah and I think building off of this too
3435.52 -> it's it's enabling a new set of of developers to
take advantage of some of these tools that maybe
3442.96 -> they had deferred to another part of the team or
you know they thought was outside of the scope of
3448.48 -> what they could do and another interesting example
of this I can show is let's say you have some API
3456.72 -> and you want to do some kind of rate
limiting with it let me pull this up here
3465.96 -> Kelsey:
3466.96 -> And as you're showing this the thing that comes to
mind though maybe I don't know how we answer this
3471.2 -> question but you know typically one benefit of
the centralized world is that I can define these
3477.04 -> things like rate limits you know in one place
and then all applications can just point to my
3483.36 -> centralized kind of middle you know proxy Nginx
or Apache and I can just handle everything there.
3490.32 -> What challenges does this present if
every developer in every application
3494.48 -> is kind of embedding this logic and
I need to go make a global update
3498.4 -> to all the components what's the tradeoff
being made here Lee: Yeah that's really
3504 -> important to talk about because I think we've
seen developers want to move closer to the edge
3509.2 -> and because their edge compute and logic was
decoupled from where they were actually deploying
3515.44 -> their application there were two completely
separate workflows and pipelines and because of
3520.08 -> that you could often get into instances where
your systems got out of sync essentially and
3526.16 -> you know even on a fundamental level of
caching now you have two caches in the mix
3530.72 -> so the closer that we can marry the infrastructure
to the code that we're trying to write and define
3537.68 -> helps developers fall into that success pattern
where they can use these primitives and not
3544.8 -> you know shoot themselves in the foot essentially
by putting in logic that is going to ultimately
3550.56 -> end up in a bad experience. Kelsey: Is there a way
to share some of this logic let's say developer A
3556.56 -> writes a perfect you know geo redirect function
and in my mind coming from my world I would like
3564.64 -> to write that once put it somewhere and give
it an endpoint and then have people just call
3569.76 -> that as like another API component is there an
opportunity to do things like reuse logic versus
3576 -> it seems like maybe embedding it
in every app that I'm working on.
3579.44 -> Lee: Yeah I think that's a fundamental part of
what we want to achieve with edge functions and
3585.12 -> through the abstraction of middleware is
empowering developers to bring back some
3589.2 -> of that flexibility that folks are used
to with things like express middleware so
3594.8 -> whether I'm doing an authentication check
whether I have this library here for IP
3600.08 -> blocking in this example all these things that are
going to start to be pretty common use cases for
3605.52 -> middleware I want to abstract those out into a
reusable package and use them across different
3610.72 -> projects or make them open source and the nature
of you know bringing middleware to open source
3616 -> and Next.js and other frontend frameworks is that
they'll be able to npm install these packages and
3621.36 -> integrate them into their existing systems so the
constraint here and part of the reason why edge
3627.52 -> functions are fast is the underlying run time
that we're making so we're making a trade-off
3633.84 -> by not exposing the entirety of node.js APIs
and instead constraining the runtime to use
3642.72 -> standard web APIs like fetch or crypto and being
built on top of the JavaScript V8 engine because
3650.72 -> of that we're able to eliminate some of the
remaining trade-offs that you had with serverless
3656.24 -> so the cold boot problem connection pooling
and more easily deploy these functions globally
3663.76 -> so if I want to extract this logic for blocking
IPs I can put it in an ES module that's not
3671.76 -> using you know any specific node APIs and then
easily install that and share it across my team
3677.92 -> Kelsey: Alright now this starts to make a lot more
sense because now that I'm looking at it this is
3681.92 -> how we do and think about network configurations
right there is like a module that does things like
3687.44 -> IP blocking and then it's on the developer or the
operations team to configure what IPs they would
3694.08 -> like to have blocked and for what reason and so
it seems like if I were to centralize this into
3698.8 -> a high level library then I could easily just say
hey what you're really doing with this middleware
3704.08 -> is deciding how it's being used like configuration
if you will and then that module and that code
3709.44 -> can be reused so my guess would be if I want to
centralize that I would just treat it like any
3714 -> other software package version it and then if
we want to roll it out everywhere someone would
3718.64 -> just do a redeployment and you would pick up all
those changes and it will be pushed out across the
3723.52 -> entire edge. Lee: 100% yeah and to take that even
further too like there's so much of this logic
3731.52 -> that we could be abstracting out to share like to
further hammer home that point about IP blocking
3739.28 -> over here you know I can essentially enable these
developers to put in any IP address they want and
3747.36 -> you know add it to a global configuration of some
some list of blocked IPs whether that's manual or
3754.88 -> automatic so maybe you want to manually do this
configuration or maybe in this example on the left
3760.96 -> you want to set up a middleware to have an API
that automatically rate limits with exceptions
3768.72 -> around you know bearer tokens or some kind of
auth token and if they have that token then we
3773.92 -> want to up those rate limits quite a bit because
we know that they're a trusted party of using this
3779.6 -> and that essentially comes down to a few lines of
code assuming that this right now while it's in
3785.84 -> this repo you could really easily abstract
this out into a library and then it's just
3790.4 -> a weight rate limit and that's the only code that
you need. Kelsey: So one question I have from this
3795.6 -> because this is genius so this looks like what we
used to do with things like Lua modules in Nginx
3801.12 -> but again we would have to do it for every
round it could get super messy and also
3805.44 -> was so disconnected from the actual application
the one question that kind of stands out for me
3810 -> here is where do you put the config for example
if I do have like 35 IPs that I want to store
3817.12 -> to check against I don't see a config file here
would I actually have to establish some other
3821.76 -> data source like a database or I think you're
using Upstash which is like I believe a Redis
3827.2 -> compatible API that's hosted somewhere
else. Lee: Yeah the great thing about
3831.68 -> Upstash here is we're using it as a rest API
for Redis and it's globally distributed deployed
3837.76 -> across the world but you bring up a really good
point which is we've given you this abstraction
3842.96 -> we've given you the tool but what about the
data layer how are we going to solve that piece
3847.92 -> so right now from a Vercel perspective the edge
functions on our platform currently don't have an
3855.2 -> integrated key/value storage solution but that's
something that we're actively looking to support
3860.56 -> to eliminate the need for a developer to go
outside of the platform to do to find a place
3867.6 -> to store that configuration now over time we might
see that evolve even further but I think key/value
3874.24 -> is really the first concept for us to nail that is
very compatible with use cases for edge functions
3881.68 -> Kelsey: Alright now this makes a lot of sense
because now I think you kind of solve the
3885.12 -> you know the configuration problem you know
as I make changes than decisions either in
3889.68 -> real time or dynamic then I now have a place
to kind of store the actual output of some of
3894.56 -> those decisions and also some of the things like
caching layers if I've already made a decision the
3899.04 -> last thing I want to do is recalculate
the decision in a small window of time
3903.68 -> I guess for me it's like what doesn't go
into this layer right to really understand
3907.76 -> something I always think it's important to know
when not to use it should people be thinking
3912 -> about taking their entire like product catalog and
stuffing that into a CDN or edge or something like
3918 -> upstash Lee: Yeah that's a great question it kind
of comes down to where we see the future of web
3926.24 -> architecture headed so specifically if we look at
databases I think we're seeing this new breed of
3933.2 -> databases that are edge first so we talked about
key value stores but it could be a SQL like schema
3939.6 -> or evolving databases that we already know like
Postgres or MySQL to run global first and I think
3945.84 -> when you ask what doesn't work we're seeing that
a lot of these applications are getting modeled
3951.12 -> after eventual consistency so with e-commerce they
might be favoring speed over global consistency
3958.48 -> and in my opinion we're kind of going all in
on that model allowing people to essentially
3965.68 -> granularly cache things at the edge now what those
things are it might be compute or it might be
3973.44 -> actual React components so we can dive into this a
little bit later but it's it's still then allowing
3978.72 -> you to pick back up on the client side and have
the full power of JavaScript so I think that when
3985.04 -> you look across different industries e-commerce
but even in like finance or other sectors,
3990.96 -> databases are kind of going global and combining
that with the edge is just trying to make it fast
3995.2 -> everywhere does that mean that we need to move
everything to the edge I would say no especially
4001.04 -> if you're trying to do something that has you
know a hard requirement for global consistency
4006.72 -> in my opinion the eventual consistency model
just maps better for this type of logic
4011.92 -> Kelsey: I also think we're thinking about better
access to those type of systems whether it's
4015.52 -> centralized or distributed across an edge that
comes I guess as an implementation detail if I
4022.32 -> have the ability to reach these type of systems
from like this new kind of function framework
4029.2 -> then does it matter where it lives right I could
sign up for a hosted service and all I'm concerned
4033.52 -> with is latency to my data and they can achieve
that by putting my data replicating it very close
4039.92 -> and so be it so I think maybe that's where
we're headed it's just the distributed landscape
4044.72 -> similar protocols and we're cutting
down things like latency and some of
4048.16 -> those challenges by bringing
things closer to the compute
4052 -> Lee: Yeah the way I like to look at it is I
think that hopefully it's a natural transition
4058.8 -> up the stack for backend developers who are trying
to learn more about serverless or edge because
4065.76 -> in making the constraint about the you know
the limited run time and not being able to use
4072.88 -> node APIs inside of an edge function I feel
like in getting rid of some of those trade-offs
4078.72 -> that they might have previously correlated with
serverless and trying to make it fast by default
4085.28 -> I think will help them adopt and understand the
use cases for a lot of a lot of the applications
4090.96 -> of edge functions or middleware and then to
your point about like where this will grow
4095.6 -> so right now with the you know the Vercel platform
enabling edge functions we're already seeing I
4101.2 -> think a rise of this type of edge compute across
the industry and my expectation is just to see
4107.2 -> this continually rising not only for compute at
the edge which has been around for you know a few
4112.24 -> years now and rising popularity but also running
your actual application rendering at the edge
4119.92 -> so the way I like to think about this is a
lot of that sounds kind of like 2000's web
4125.44 -> like you just serve a render and you get your
page and there was this transition from let's do
4133.28 -> everything on the server to let's do everything
on the client and some people fought back about
4138.4 -> that not everyone thought that was the best
approach and now I think we're kind of converging
4143.52 -> and coming to this happy medium where we say you
know actually those those server people were right
4149.04 -> and those client-side developers well they
were they were also right about some things too
4153.12 -> we want to take the benefits of the 2000s web
of fast single page or fast server rendered
4159.2 -> applications and marry that with some of the
inventions that single page apps or client-side
4164.08 -> apps gave us with fast navigations through
pre-fetching of routes you click on a link
4169.84 -> and it feels instant it feels like an app so
what I see the edge doing for the future of
4176.88 -> cloud computing the future of the web especially
with innovations like React server components
4182.08 -> is bringing back the server first model and
getting quick responses directly from the edge
4190.32 -> while still remembering the innovations that we
made on the client side for interactivity to then
4197.28 -> hydrate or add more logic after your page loads
and I think Kelsey: You know one thing I can think
4203.36 -> of here is that the networks have gotten so fast
whether we've just made them bigger and closer to
4209.12 -> where things are happening that we're almost
now at the point where we can treat you know
4212.88 -> there's the same we can treat the data center like
a computer but now with these networks so advanced
4218 -> you can almost treat the internet like a computer
itself and so now the operating system and now you
4223.68 -> know through this conversation Vercel just
feels more like this operating system for
4228.72 -> this kind of distributed computer that
says hey just like on a single server
4232.88 -> you know that some things will get loaded into
memory and some things will be saved to disk
4236.8 -> some things run in kernel space some things
run in user space and sometimes we create these
4240.96 -> boundaries for security reasons sometimes things
just don't make sense to run in one place over
4245.92 -> the other and I think computing we've always had
this trade-off between security and speed and you
4251.68 -> put things in the right place but I think now what
you're doing is trying to blur those lines to say
4255.68 -> we just treat the whole internet as a computer and
we'll just allocate things where they need to be
4260.72 -> in order to satisfy those two concerns I did
learn a lot just from having this conversation
4265.2 -> so I think other people that are watching if
they you know watch the whole thing asking
4269.04 -> these kind of questions back and forth like why
are we here now what does it bring to the table
4273.52 -> and even having that code walk through I think
was really helpful for people to mentally map
4277.76 -> what things are happening but yeah I think Vercel
is an as an operating system for the internet
4282.8 -> I think it just makes it easier to grasp what's
happening you got to just let go you got to let
4286.72 -> this thing figure out where things need to be
deployed wire them back up and own how it works
4291.52 -> and that's what kernels do on operating systems
Lee: Yeah I think I think developers
4298 -> thought it would be easier to decouple their
application from the infrastructure and I think
4303.6 -> where we're moving it's like but there's actually
a lot of trade-offs with that there's there's
4308.24 -> a trade-off with the flexibility of moving your
application but there's also a lot of value in the
4313.28 -> closer you can marry those two together and the
great thing about Next.js in my opinion is that
4318.16 -> when you deploy next guest to Vercel you're making
the trade-off to marry those two together but its
4324.16 -> core is still open source so if you decide I'm
done with Vercel I don't want to pay them any more
4330.64 -> money and you say I'm gonna go host Next.js on GCP
(Google cloud platform) you totally can because
4335.92 -> all of these primitives that we're introducing
like like middleware it would just run on a
4340.4 -> single origin server so I really like that because
it's still bringing value to the entire ecosystem
4348.08 -> and eventually to other frameworks too the way
we've designed this abstraction on Vercel is that
4353.6 -> it will work automatically with Nuxt or Svelte or
any of these other languages or frameworks just by
4360.48 -> conforming to our API for how you implement this
Kelsey: Oh that's dope that's going to be good
4366.64 -> to call out on the docs and when you give people
the experience because some people I think that is
4370.4 -> kind of the question we hear when we think about
these new platforms they feel like black boxes
4374.48 -> and it reminds people of kind of like
lock in but it sounds like that's
4377.52 -> going to be addressed up front in this design
Lee: Yeah and the way I like to think about it is
4382.16 -> we're moving to this world where if we truly do
build the SDK for the web people will still have
4387.92 -> their syntactic sugar and preference of choice and
there's no way to get around that and that's okay
4393.04 -> we should be empowering those developers to make
innovations in their own spaces but we still want
4398.08 -> to give the same shared legos and building blocks
for creating a great web experience so when I look
4404 -> at the Vercel platform we're investing heavily in
what we're calling the file system API which is
4409.84 -> conform to this file system output dump it on our
operating system and it will just run globally and
4416.48 -> use all the features that are possible and
it's so easy then for framework developers
4421.6 -> I could go out and build my own framework
today and it could have web vitals analytics,
4427.6 -> image optimizations, edge functions, serverless
functions, CDN caching just by conforming to
4433.68 -> some output Kelsey: No it makes sense I think now
that we you know the web may have finally found
4438.24 -> its operating system Lee: I love that tagline
I think we're going to steal that and on our
4443.44 -> home page it's going to say Vercel the operating
system for the web cosigned by Kelsey Hightower
4448.52 -> Kelsey: There you go Lee: Well thank you
so much for taking the time to chat today
4452.96 -> I really appreciate it and for those watching
I hope you enjoy the rest of Next.js conf too
4458.56 -> there'll be lots more content
around edge functions.
4461.36 -> Kelsey: Thanks for having me
Lee: Thank you
4537.84 -> Hi, I'm Tim CTO and founder at
Checkly, Checkly is used by the
4542.48 -> best dev teams to ensure the reliability
and performance of their web apps and APIs.
4548.96 -> Let me show you how you can monitor your next
app with Checkly. First you use our powerful
4554.88 -> JavaScript based browser checks to make sure your
web apps work reliably and fast we automatically
4560.8 -> give you web vitals, console.logs, network
data, and a lot more then you add some API
4566.72 -> checks to make sure your backend APIs are snappy
and respond with the correct payload. Of course,
4572.72 -> if anything fails we will alert you on Slack,
email, SMS and whole bunch of other channels.
4579.52 -> Lastly you hook this up to your Vercel account
with our new deep integration so you never ship
4585.2 -> any broken web apps again. Sign up for a
free developer plan over at checklyhq.com.
4609.36 -> Your app just crashed, the phone running it has
exploded, it was struck by a hammer manufactured
4614.24 -> in 2005 by Harry's Hammers. The hammer's head
is composed of 75% nickel, 20% steel, and 5%
4620.4 -> iron. The phone flew into the air an 86 degree
angle and came crashing down at 11 miles per...
4632.56 -> Oh hello there my name is Kapehe and I do
developer relations at Sanity.io and this
4638.32 -> is Bella she does developer relations for Scooby
Snacks I live in Los- we live in Las Vegas, Nevada
4645.04 -> and the fun fact about both of us
actually is we both really love anime
4648.8 -> so in this talk we're going to cover
conformance in Next.js come with me.
4654.56 -> Alright so like I said this talk is on conformance
and conformance is new to Next.js and it's a
4660.16 -> beautiful addition if I do say so myself oh and
this is Heelo, Heelo loves treats as you can see
4665.76 -> so a quick history on conformance Google had a
small team of very experienced developers who did
4671.76 -> all the extensive code reviews of course of course
and would flag anything that impacted app quality
4678.48 -> so they thought why not take the common things
that were being found and make a system out of
4683.28 -> it thus the conformance system was born so
this automated an enforceable system ensured
4689.6 -> a consistently high bar for app quality
that's pretty nice so Google's web platform
4695.6 -> team experienced heavily with Next.js and began
open sourcing their system so Next.js knew it was
4702.56 -> time to keep this to get this automated system in
Next.js and that's what we are going to be talking
4708 -> about today Here with me to explain this next part
the most important part is what is conformance
4713.6 -> is Poly, now I don't want to call conformance a
new feature of Next.js because you can't really
4719.28 -> describe it as a feature it's more a system a
system that solves problems or points out problems
4724.56 -> in code so there are rules that conformance
follows to support the optimal ux experience
4730.8 -> it catches things that might only be caught from
an extensive code review or months down the road
4735.92 -> when a user complains about an image not loading
so some error or warning messages you could see
4742 -> in your Next.js app could be using an a tag to
navigate to a page rather than link from Next
4748.64 -> Link or using a link tag for an external style
sheet rather than importing the styling files
4755.52 -> now there's a lot of rules you can find that
conformance would help catch in your code so
4759.76 -> what I realize is that having conformance is like
having a senior developer with me pair programming
4766.08 -> at all times super nice and that takes me
to the why why does this even matter to me
4771.6 -> can you imagine being able to have optimal code
to create an optimal experience for your users
4776.96 -> without having to run it through another developer
for a code review now okay conformance doesn't
4782.32 -> take away that need for the code review but it
surely wipes out a lot of the quick fixes to
4787.12 -> optimize your project it takes the developer
experience of creating a website or project
4792.88 -> and gives tips on how to improve your code
that ripple effects onto the users now the
4799.2 -> user experience is optimized and they get security
accessibility and performance at a better rate
4807.04 -> So added to Next.js 11 it was released on June 15,
4810.72 -> 2021 that means you may not be affected
by this yet so to do quick check look
4816.72 -> into your package.json of your Next.js project
to see what version of Next.js you are running
4822.8 -> if you find out that you're outdated that's okay
that's why we have the internet so you can learn
4827.36 -> how to upgrade that awesome project of yours and
I'm going to show you exactly how that's done
4832.24 -> but first let me tell you a quick story so I got
into tech about three years ago and was first
4837.28 -> exposed to React then it was I was a React fan
from the beginning through and through and then
4843.6 -> Next.js came along it's kind of a sweet code love
story but I'm grateful it didn't have to become a
4848.8 -> love triangle between my first love react and
my new love Next.js because Next.js is react
4855.68 -> so as Next.js gets better and more optimized I
realize how good it really is for us developers
4862 -> and conformance is one of those like you shouldn't
have moments I get a better developer experience
4867.6 -> by making sure my code is optimized for my
users it's too easy so one of my projects
4873.68 -> was old Next.js it felt new to me though but then
I upgraded and I ran that beautiful lint command
4880.56 -> and let me tell you there's a lot of errors
but I won't tell you let me show you all that
4888.48 -> Alright so to get our Next.js application
upgraded we are going to run the command
4893.76 -> npm i next@latest react@latest react-dom@latest
and this is going to upgrade us to Next.js 11.
4902.8 -> So now we are upgraded we are next
going to run the command npx next
4907.52 -> lint how do we like to configure we'll do
strict because that is the recommended way
4913.2 -> and all of this is going to be added in
now we will need to run that command again
4918.64 -> in order to get all of our warnings
and our errors to optimize our code
4923.2 -> so now that that's done let's run it
again running that next lint command
4929.36 -> and there are all of the warnings and errors that
come from my application my Next app so let's go
4938.16 -> 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
4944.24 -> use image uh tag use image from next image great
one custom fonts not added at the document level
4953.04 -> this is discouraged and it tells you where to
go to find out more information and it tells
4957.76 -> you which file this is in another one external
synchronous scripts are forbidden and again
4963.76 -> exactly where to find more information about
that this assign arrow functions to a variable
4968.72 -> before exporting we're going to actually look
at this one more in depth we'll keep scrolling
4975.08 -> uh this is a good error the apostrophe this
can be escaped with the html character and
4981.2 -> there's like a list of ones that you
can choose from here's a good one React
4986.16 -> hook useEffect has a missing dependency great
warning and great to know let's keep scrolling
4994.96 -> and we have a lot of these image
elements must have an alt prop
4999.68 -> don't forget those alt props and we'll show an
example of that and my giant list of missing keys
5008.24 -> uh will definitely want to fix those that's
probably all 47 just kidding I don't know
5014.88 -> um so yeah that is my list of errors and warnings
so the first one let's look at assign arrow
5021.44 -> functions to a variable so it shows us where to
find it that it's a warning so it's going to be
5026.24 -> yellow and what the error is so we're going to
go to the file and we see under underlined in
5032.32 -> yellow the error and what the warning was
so we're going to fix that by naming it
5039.44 -> and best practices is naming our functions by
naming our functions we are able to debug better
5044.64 -> and our code is optimized and organized so we've
named it with the function headline that one's
5049.76 -> done next one the apostrophe can be escaped
with the html character and it gives you a
5055.76 -> couple of options to choose from so we go into
our code it is an error so it's underlined red
5061.04 -> it shows the um error and then quick fix view
problem that kind of stuff we've added in the HTML
5068.56 -> character and now that error is gone so that's
really awesome because we want to have that HTML
5075.2 -> character in there instead of the apostrophe
next one is the giant list of missing keys
5081.2 -> so we're going to want to fix all of
those because it could have the key
5084.8 -> and if you look to the right you see all the red
for just this file where they're missing keys
5089.68 -> I'm not going to show you me fixing each one of
these but as we add a key to each one of these
5096 -> that red line will go away next we have do not
use image tag use image from Next Image and we
5103.04 -> also have image elements must have an alt prop
so let's go fix that warning for both of those
5109.52 -> for this one so we have both of the warnings
pop up when we hover and we have that yellow
5114.4 -> squiggly line behind it so we know that we are in
the file that has the warning associated with it
5120.64 -> so to fix it we import next image we use that
image and we also added in the alt prop so by
5128.48 -> doing that we have optimized our image handling in
next and for accessibility we have the alt tag so
5135.84 -> we're good to go so there you have it Next.js
comes with a handful of awesome new features
5141.2 -> or systems conformance being just one of them so
go ahead hit that upgrade command today and let me
5147.28 -> know about your developer experience with Next.js
11 thank you for coming to my talk my animals also
5152.64 -> thank you you can find me on Twitter @kapehe_ok
where I tweet all things tech working out and
5160.08 -> miscellaneous stuff you never know I never know
mahalo for hanging out and we'll see you around
5181.6 -> Hi I'm Taylor Barnett and I'm here in Austin,
Texas and I want to talk to you about this idea of
5186.8 -> practicing databases as code with PlanetScale and
Prisma So first what is PlanetScale? PlanetScale
5193.36 -> is a MySQL compatible serverless database platform
that aims to get you using relational databases
5199.2 -> as fast as possible you can start PlanetScale
in seconds and it scales with you indefinitely
5203.92 -> without having to worry about things like
connection pooling or connection management
5208.64 -> PlanetScale also allows you
to branch your database schema
5212.64 -> just like your code you can experiment in
an isolated database branch and then merge
5217.92 -> back into your production branch
with non-blocking schema changes
5223.6 -> It's all about the good parts of a relational
database without the harder database operational
5230.32 -> challenges now when using PlanetScale you'll
need a way to access your database from your code
5237.2 -> which is where Prisma comes in. Prisma is a next
generation ORM for JavaScript and TypeScript So
5245.36 -> Prisma is a different kind of ORM so traditionally
with ORMs they provide an object-oriented way of
5253.04 -> mapping uh when working with relational databases
by mapping tables to their model classes in your
5261.28 -> programming language and while Prisma has you
define your models instead in a declarative
5266.8 -> Prisma schema where you also define things like
database connections and you generate the Prisma
5272.64 -> client we'll also be using the Prisma client
in the demo I'll do a little bit after this
5277.04 -> but the Prisma client is a query builder that is
both type safe and allows you to write the SQL
5283.6 -> when working with data models you'll also need to
be able to handle migrations for example which is
5288 -> where Prisma migrate comes in we'll also use it in
our example Prisma migrate automatically generates
5294.88 -> schema based on the changes in your schema file
and it can detect things like drift and help you
5300.64 -> resolve those problems and lastly Prisma studio
the third part of it is a lightweight interface
5307.76 -> for your data in your database which we'll also
briefly use today and so one of the reasons why
5313.44 -> I think Prisma fits so nicely with Next.js is
because of all the different ways we can access
5319.36 -> our data within a Next.js application you can do
it at build time with getStaticProps you can do
5325.92 -> it at request time with getServerSideProps or you
can even build it into an API route which we will
5331.52 -> do today and lastly you can even separate the
back end out and use it as a standalone server
5339.44 -> The last thing I want to cover before we jump
into some code is why does the stack fit so nicely
5345.2 -> with this idea of databases as code so first
when deploying our Next.js applications today
5351.6 -> you're likely using a tool that is very git
centric like Vercel. Vercel pulls the repository
5357.92 -> to create deploy previews for example Core to
this concept of git is branching but often that
5366.24 -> has not been extended to other areas of our
infrastructure like databases for example
5371.92 -> which is possible with PlanetScale. Being able to
branch out databases is crucial for this idea of
5378.4 -> databases as code we need to be able to have these
isolated environments to experiment and alongside
5383.76 -> our code and then when we're done we create a
deploy request similar to a pull request for
5389.28 -> our code Now having these models as declarative
schema also makes them not only more portable
5396.56 -> but also makes things like version control and
automation with our databases more possible
5401.6 -> If you're familiar with configuration as code too
then you're familiar with this idea of having this
5406.72 -> like configuration file and in our case a schema
file that you know we can declare certain things
5413.12 -> so that we know this is like our single source of
truth. So what are we going to build today? I'm
5419.36 -> going to start with a brand new create next
app and then we're going to add both Prisma
5424.32 -> and then PlanetScale and then we'll make an API
route using both of them. So let's get started!
5430.8 -> I'm going to switch over to my code editor and
then we are going to create our first database
5440 -> So the first thing we're going to do the obvious
create database we're going to give it the name
5444.56 -> "star app" and we're going
to select create database
5448.4 -> one of the awesome things about PlanetScale
is that it can track your migrations table
5454.4 -> so when you do Prisma migrate it will track
that on the main branch we're going to save
5458.96 -> that and then we're going to go ahead and create
our two branches so the first branch is going to
5464.72 -> be called "initial setup" and then we're also
going to create another branch called "shadow"
5474.76 -> the shadow branch again is for when we run
5478.8 -> prisma migrate we'll talk a
little bit about that in a minute
5488.72 -> So I want to start with the
brand new Next.js project so
5492.4 -> I'm going to do "npx create-next-app@latest"
5496.08 -> I prefer using npm so I'm
going to give it that flag
5501.36 -> and then I want to call this star app keep things
simple that we also named our database after it
5514.8 -> and while that is building I'm going
to talk about what our next step is
5518.96 -> the next step is that we're going to
install the Prisma client we talked
5523.6 -> about Prisma earlier and that the client
is one of three parts main parts of Prisma
5529.44 -> so once this is done I'll cd into the project
and I'll run "npm install @prisma/client"
5547.52 -> now this doesn't totally get us set up
with Prisma that but we can see that
5551.44 -> you know our package.json has been updated
5554.48 -> uh we're going to do "npx prisma init" and this
is going to create a few different files for us
5564.4 -> we're going to go into that schema.prisma
file and start editing the file
5569.52 -> so this is very kind of like config based
um feel to it we're gonna change that to
5575.12 -> MySQL because PlanetScale is MySQL compatible
and then we're also going to add the shadow
5582.16 -> url I'm going to add an environment variable
for that just call it shadow database url
5597.44 -> and then also we have a special
5603.44 -> thing that we need to add when we use PlanetScale
with Prisma, this referential integrity variable
5611.2 -> we're going to set that to Prisma and also so this
is a preview feature you need to also make sure
5620.72 -> that your client also gets generated with it
5630.64 -> So since we have these environment
variables let's go ahead and update them
5634.72 -> so we have a .env file that was created
for us by Prisma and I'm going to pull over
5641.36 -> a string that we're going to use to connect
locally to the database in a few minutes then
5647.6 -> we also need a shadow database url that
we will use when we run prisma migrate
5654 -> and then we're gonna use it on a
different port it'll be on port 3310
5664.8 -> and after this let's go ahead and create our
star model that we're going to use for our API so
5672.16 -> in the schema.prisma file we're going to do
"model Star" we're just going to put a few
5676.56 -> things in it just to get started the basics an
id which will be an int that will auto increment
5697.04 -> then "createdAt" date time
5706.32 -> that'll be when we insert it into the database
5713.2 -> and then as well as a updatedAt.
5718 -> Clean this up a bit
5728 -> now I don't want to make this model too
complicated just for this quick demo
5731.44 -> but we'll do a name for our star which will be a
string be a varchar and we'll limit that to 255
5744.64 -> and then also what constellation it
is in also a string the same varchar
5754.96 -> and so there you have it uh after this part right
here we have our model we have our Prisma client
5764.24 -> and we have our database connection all set up
and looks nice and neat now I want to connect
5773.28 -> to the database locally I'm going to
be using the pscale CLI PlanetScale CLI
5780.4 -> I've already installed it by the way so uh you
might need to install that if you haven't already
5789.36 -> we're going to open a few different
terminals for that so this is going to use
5793.2 -> those environment variables that we set up um it's
when we run the prisma migrate but first we need
5800.56 -> the actual connection and so it's pscale is
handling that connection to PlanetScale for you
5805.52 -> so you don't have to mess with the connection
string when you're developing locally
5810.72 -> and then I'm also going to do one for the shadow
database which again is used when you do prisma
5816.64 -> migrate and then that is uh to the corresponding
port that we set up for that which was 3310
5827.92 -> So now we have those connected and we're ready to
do our first prisma migrate so we're gonna do "npx
5834.8 -> prisma migrate dev" and we'll
just give it a name "init"
5844.56 -> takes usually a few seconds to run especially on
the first time when it's creating everything but
5851.2 -> after it runs I want us to take a
quick look at the migrations folder
5863.04 -> and so you can see in this migrations
folder what it actually created in SQL
5870.8 -> and then you can also see
this in the branch itself
5874.4 -> that we're working in the initial setup branch
in PlanetScale too you can see that schema
5883.76 -> is on that branch which is awesome
because this you know lets us test
5888.64 -> out potential different schemas before we
merge them into our main production branch
5903.12 -> So the next thing I want to do we
didn't have a lib folder I'm going
5907.6 -> to go ahead and create one and then I'm
going to create a prisma.js file in here
5914.24 -> now it's important to note that PlanetScale can
handle thousands and thousands of connections
5921.92 -> but you know since we're dealing
with the serverless application
5926.08 -> we still want to make sure that not every
single time we're creating a new Prisma client
5931.92 -> and so part of why we're going to create this
prisma.js is so that we can reuse the client
5940.96 -> and I just pasted the code over to save some
time but pretty straightforward it's just a
5946.48 -> Prisma client using the library so the next thing
I want to do is go to pages and then in API you
5956.48 -> can see there's that hello.js that was there
when you do the create-next-app we're going to
5962.48 -> create a new stars.js we're going to do really
basic route I'm going to go ahead and copy and
5968 -> paste that into there you can see we're using that
Prisma client that we just created it's only going
5976.72 -> to respond to a GET method it's only allowed and
it's going to find all of the star records and
5984.4 -> return that in JSON with a 200 anything else will
give us a 500, some kind of error fetching those
5994.96 -> So now that we have created that the last
thing to do is actually give some data to
6001.2 -> our database so I'm going to use the Prisma
studio which you can do "npx prisma studio"
6007.28 -> and it is a kind of looks like a spreadsheet
or something uh you know I'm gonna
6014.48 -> say Polaris also known as the north star although
6017.68 -> there are multiple north stars which is in the
Ursa Minor constellation I'm going to save that
6026.56 -> and then we're ready to start seeing some
results uh in the close out of Prisma studio
6033.6 -> and I'm going to run "npm run dev"
6041.44 -> now when I load this up you're familiar with the
standard Next app index page we're going to go to
6049.2 -> the "api/stars" and as you can see here's our
data that's being pulled from PlanetScale just to
6056.4 -> prove that this is actually
in PlanetScale we will even
6061.04 -> close this out and then I will show
you from the PlanetScale console
6065.52 -> within the PlanetScale web app that you can
also see the data that is in your star table
6080.08 -> Now this point we feel comfortable it does what
we expect it to do it gives us returns as results
6085.84 -> and so I want to create a deploy request to our
main production branch to merge this schema change
6093.68 -> You know we're feeling comfortable we did our
experiment we've tested it out in the branch
6098.8 -> and there were no conflicts
so it's able to be deployed
6102.64 -> and now when we look at our main production branch
6111.84 -> we can view the schema that is on that branch and
6115.12 -> here's the same schema that we had in our
initial setup that was not there before
6126.16 -> now at this point we're ready to deploy our
application to Vercel, I'm not going to go
6130.56 -> through step by step because it's much like how
you deploy other Next.js applications Vercel but
6136.24 -> I will include some details in the project's
repository that you can see here on the screen
6144.4 -> hopefully this gives you a good idea of the few
steps you need to do to implement PlanetScale
6150.48 -> and Prisma into your next Next.js application
and also the this idea of how to use branching
6157.04 -> as part of databases as code thank you so much for
watching and let me know if you have any feedback
6162.64 -> on PlanetScale, on this workflow like how does
it work for you how is it not working for you
6167.68 -> what can we do to make it better I'd love to hear
and have a great rest of your day thanks bye!
6186.64 -> At Prisma we redefine the developer experience
of working with databases with a next-gen ORM,
6192.4 -> you write your data model in a human-readable
schema, allowing anyone to quickly understand
6197.2 -> how your database is designed. You then get
an auto-generated type-safe query builder
6202.4 -> that you can use to read and write data to your
database and when your schema needs to evolve,
6206.72 -> you run a single command that
auto-generates migrations for you.
6210.64 -> However regardless of whether you use Prisma as
your ORM, working with traditional server-based
6215.52 -> databases in a serverless environment you run
into an issue each serverless function opens a
6220.24 -> connection to the database so during traffic
spikes you'll quickly exhaust the database's
6224.72 -> connection limit. This negatively impacts
performance and leads to failed requests.
6229.28 -> That's why we've built the Prisma Data Proxy,
it's a service that sits between your server
6234 -> and database and handles database connection
management for you. It's currently in early access
6238.8 -> and we would love for you to try it out.
To learn more go to prise.ly/dataproxy
6249.04 -> My name is Fernando Rojo and I'm the
co-founder and CTO at BeatGig we're a
6254.88 -> marketplace for booking artists you can
think of it like Airbnb for live music.
6261.04 -> Today I'm going to talk about using React
Native with Next.js my goal with this talk is
6268.24 -> to convince you that React Native is the best way
to build a UI even if you're only making a website
6277.04 -> one year ago we started building our product
from scratch and I decided to use React Native
6283.36 -> with Next.js to build the front end in the
time since we have shipped over 100 screens
6291.52 -> all of the code lives in a single
monorepo our product works on web iOS
6299.2 -> and Android with full feature parity this is
all with one person building and designing
6306.32 -> the front end as a result we have grown from zero
to over 10 million in sales in under one year
6318.32 -> thanks to our cross-platform stack we can iterate
rapidly and ship features daily our number one
6327.04 -> priority is reducing the time from idea to
deployment and React Native is our greatest
6334.08 -> instrument in doing so combine it with Next.js and
you can deliver an amazing user experience on web.
6343.28 -> Now React Native with Next.js is a relatively
new stack so I faced a few issues along the way
6352.16 -> my plan with this talk is to break down
each issue and show you how we solve
6356.96 -> them we'll look at navigation animations,
responsive design systems, platform specific
6365.04 -> features, monorepo support, and more let's
jump in the biggest difference in structure
6372.48 -> between a React Native app and a Next.js website
is navigation so let's see how it works to the
6379.2 -> left I have the BeatGig website and on the right
the iPhone app let's compare what happens when I
6384.8 -> open some artist profiles okay here we have it
open on the website I'll do the same on the app
6391.04 -> looks basically the exact same I'll go back and
let's do one more I'll open B.o.B on the website
6397.6 -> and now on the app so let's compare what happened
on the website we have @bob here in the URL on the
6404 -> iPhone app there's obviously no URL and the only
real difference is that on the iPhone app I can
6409.6 -> swipe back here and I got the stack transition
in so I'll go back and I'll go back here on the
6414.64 -> website too the key thing to take away here is
the design is mostly shared and the logic is
6420.64 -> fully shared between platforms but we still match
the user's expectations based on the platform
6425.6 -> they're using. Let's see how we do it this part
is really cool we're going to use the same screens
6432.24 -> across Next.js and React Native our first step
is to create a shared artist screen component
6439.36 -> I'll expect every file in the screens folder
to be shared across platform next I'll create
6445.92 -> a Next.js page at pages/artist/slug and I'll
import that same artist screen component
6453.76 -> all we have to do is default export it and
our artist screen is now working on Next.js
6458.8 -> for the search screen I'll create a shared search
screen component import it in pages search and
6465.6 -> default export it if you use Next Router this
should look really familiar we now have our React
6471.36 -> Native pages rendering on Next.js the missing
piece is how do we use the same screens in the
6477.76 -> React Native iPhone and Android app here we're
looking at app.tsx React Native uses this file
6486.16 -> as a single entry point rather than use file
system routing we're going to create a stack
6491.76 -> from React Navigation here I've imported create
native stack navigator which does that for us I'm
6499.12 -> also going to import the same screen components
which we just used for our Next.js pages
6505.52 -> now I have an empty navigator and the only missing
piece is to add our screens and there we have it
6512.08 -> we now have our two screens uniquely identified by
the name prop search and artist and the component
6519.12 -> prop tells us which component to render this
is what the final code looks like the only
6525.28 -> difference is that I add a NavigationContainer
which is the provider for React Navigation.
6530.56 -> Let's recap where we just shared some code
6534 -> first I import the shared artist screen component
in app.tsx for React Native I then pass artist
6541.6 -> screen to React navigation's stack via the
component prop to use the same screen in Next.js
6548.08 -> all I have to do is import it in pages/artist/slug
and default export it and there we go
6555.52 -> you now know how to share screens between a React
Native app and a Next.js website the question is
6562.72 -> how do we move between screens if you're on the
search page and you want to open an artist page
6568.8 -> how do you do it can you just use the Next Link
or Next.js's router push or is there another way?
6576.96 -> Let's take a look. I made a library
called expo-next-react-navigation
6582.48 -> which lets you share all your navigation code
between Next.js and React Native this is what it
6588.24 -> looks like it's very similar to next it has a link
component and a useRouting hook you can create a
6594.56 -> custom link like this to open an artist and if you
need more customization you can use the web prop
6600.32 -> if the route name from native doesn't match
your path on web unlike Next Router it uses
6605.44 -> params instead of query which does the same thing
reading in our params is also very similar to Next
6611.92 -> this is what it looks like on Next
and with expo-next-react-navigation
6616.56 -> instead of query we just use params and
everything else is basically the same in
6622.48 -> the future I want to have an API like this where
it's fully shared between Next and React Native
6628.64 -> but there are still some things in the way
and if you want to help you can check out
6632.08 -> this issue I opened on the repository called
"The future API" and I would love to hear your
6636.72 -> thoughts and get your contributions. Next let's
talk animations coming from a web background
6642.88 -> I always loved using simple things like CSS
transitions and more advanced libraries like
6649.04 -> React Spring and Framer Motion in the past year
there have been some incredible innovations
6655.2 -> for performant animations in React Native
with the introduction of Reanimated 2.
6661.76 -> That said before I even started using React Native
Web something I felt I was missing in React Native
6667.84 -> when it came to performant animations was a simple
API in 2019 this feature request was opened on the
6675.76 -> Framer Motion repo for React Native support it was
one of those issues that got a ton of attention
6682 -> a lot of upvotes but was outside of the scope
of what Framer Motion was focused on which was
6687.04 -> just the web this inspired me to write an RFC
in October of 2020 for a simple cross-platform
6694.24 -> animation library for React Native and React
Native Web I wanted to borrow a lot of the cool
6699.12 -> features from Framer Motion like mount animations
and automatic transitions and I ultimately decided
6704.8 -> to build my own library called Moti and I
launched it on twitter about eight months ago
6711.04 -> in the time since Moti has gotten almost 2,000
stars and has gained quite a bit in popularity.
6717.92 -> This is what it looks like to use Moti you
get a Moti view and a Moti text component
6722.96 -> you can use the from prop for mount
animations and anything you pass to
6727.6 -> animate will automatically transition which makes
it really easy to animate based on React state
6733.76 -> you can also get full control of your animations
using the transition prop like Framer Motion
6740.4 -> one of my favorite features of Moti is the mount
and unmount animations. Under the hood Moti uses
6746.96 -> Framer Motion's animate presence to bring this
feature to React Native for the first time
6752.48 -> in fact Matt Perry from Framer Motion recommends
Moti as the native compatible alternative if you
6759.6 -> want to animate based on hovered or pressed
states with Moti it's as simple as passing a
6764.96 -> function to your animate prop you can interpolate
between hovered and press states and the results
6770.64 -> will automatically animate without triggering
any re-renders that means we get cross-platform
6776.24 -> animations that run at 60 frames per second one
of my favorite design patterns is animating a
6782.56 -> component when someone hovers or presses it notice
what happens when I hover over the see more link
6789.44 -> see that the background turns yellow and
when I hover over an artist they scale up
6795.84 -> getting this kind of feature parody
between a website and an iPhone app
6799.92 -> would previously be really challenging
but with React Native, React Native Web,
6805.04 -> and Moti this parity comes out of the box.
To the right we have the BeatGig iPhone app,
6811.04 -> let's see what happens when I press on the see
more button the background also turns yellow just
6815.68 -> like the website and when I press in on the artist
as I scroll they also scale up the exact same way
6823.84 -> with Moti you can also do more advanced
interaction based animations such as animating
6829.52 -> the children of a pressable component if you open
the BeatGig website and hover over products in the
6834.96 -> header you get this nice drop down each item has
a background transition and an icon that animates
6842.08 -> in or out this is actually built with Framer
Motion and React state because I hadn't launched
6848.56 -> Moti interactions yet but once I shipped this on
the website I wanted to try to remake it with Moti
6855.6 -> here we have the exact same component from
BeatGig's website built with Moti what I
6860.24 -> find interesting is this is a web only
component and yet implementing it with
6864.8 -> Moti which is a React Native library was a
lot simpler than doing so with web libraries
6870.72 -> I think this is a common side effect of
building with React Native and React Native Web.
6875.44 -> Rather than focus on platform-based implementation
you think strictly about the UI and as a result
6881.92 -> you come up with APIs that are a lot simpler than
what probably existed the code for this drop down
6888.08 -> is open source and I'll link to it at the end of
the talk Next.js is a first class citizen of Moti
6895.2 -> add Moti to your next transpile modules
add a single polyfill and you're good
6900 -> to go let's look at one final animation
example animating based on scroll position
6907.68 -> on the right we have the BeatGig iPhone app to
the left the mobile website notice that the header
6913.76 -> fades in when I scroll down the animation code
here is shared 100% cross platform and there's
6920.8 -> actually no special library in play here this is
using the vanilla animated API from React Native
6928.32 -> for simple things like scroll animations
this API is quite easy to use and can get
6933.6 -> you great performance. Next let's talk theming
and responsive design back in 2017 I was running
6941.68 -> an ecommerce sneaker brand called Patos I wanted
to make some custom edits to my shopify website
6948.72 -> so I started learning CSS and JavaScript and
it didn't take long to fall in love with both
6956 -> soon enough I considered myself a web developer
I was using CSS all the time so when I started
6963.28 -> styling and React Native I had some mixed feelings
to start let's compare what it looks like to style
6970.08 -> in CSS and React Native next I'll discuss the
pros and cons of React Native's styling system
6978 -> and finally I'll show you what we do here we
have a component class name written in CSS
6984.4 -> and at the bottom we have the equivalent in React
Native React native has a built-in stylesheet API
6991.52 -> rather than use classname we'll pass this to the
component directly using the style prop. If I want
6997.76 -> to use multiple styles I just pass an array in
this case I'm forwarding props.style the order
7004 -> of the styles is determined by their order in
the array which is a lot more predictable than
7008.4 -> CSS I can also do conditional styles in this case
I'm only applying props.style if props.isEnabled
7015.52 -> is true finally if you want to add dynamic styles
you can do that by putting them in line like this
7021.6 -> for a deeper understanding of styling and
React Native I recommend checking out the docs
7026.32 -> but hopefully that gives you a good
overview of the differences with CSS
7030.88 -> next let's look at the pros and cons first the
pros there are no global styles in React Native
7038.96 -> at first I viewed this as an annoying limitation
but it's actually crucial if you want to know
7044.64 -> the styles applying to a component you just
look at the style prop it's dead simple and
7051.2 -> there's no risk of accidentally setting a global
style that has side effects on other components
7057.68 -> there are no nested styles like there are in
CSS. All styles are scoped to a single component
7064.56 -> and the logic is handled on the JavaScript side
making each component incredibly predictable
7069.92 -> React Native also doesn't have pseudo elements
if you want to track a component's focus state
7074.96 -> you use the onFocus prop instead of the CSS
selector this is a lot safer as it maintains
7080.72 -> your components as a function of their state and
you can come back to it months later and know
7085.28 -> exactly what's going on. Finally in React Native
there are no issues with import order of styles
7091.44 -> with CSS you can cause many bugs simply
by the position in which you import a file
7097.36 -> on the other hand in React Native if you want
to know the order of styles that are applying
7101.6 -> to a component you just look at the style prop
there are no cascading styles no nested styles
7108.64 -> no global styles everything is scoped to a single
component which means your component based design
7114.08 -> system is scalable. For a long time I thought I
loved CSS and part of me still does but once I
7122.24 -> started styling with React Native it was pretty
hard to go back the level of predictability and
7128.88 -> simplicity lets you move so quickly and keeps you
from getting bogged down by little CSS bugs and
7135.52 -> platform-based issues one interesting thing is the
stylesheet API from React Native Web is actually a
7141.84 -> highly optimized CSS in JS solution if you want
to see how companies like Twitter use this on
7148.32 -> their website I highly recommend this talk by the
creator of React Native Web , Nicholas Gallagher
7154.64 -> Okay now the cons of styling in React Native
React native doesn't have CSS grid this isn't
7161.68 -> the biggest issue in the world but it would just
be nice to have it next React Native doesn't have
7167.04 -> the concept of media queries so responsive design
can be a bit challenging you have to actually use
7173.36 -> JavaScript to track screen dimensions in render
in fact React Native Web actually recommends not
7179.84 -> using media queries instead they take the position
that you should render different component trees
7185.44 -> altogether based on screen size or view container
size so what's the verdict I've spent a few years
7192.96 -> building with both CSS and React Native and
ultimately the low level styling API provided
7199.68 -> by React Native and React Native Web is better
than that of CSS the level of predictability and
7207.36 -> scalability in a component-based design system is
too hard to beat now there are some missing pieces
7214.48 -> and in these cases I think it's up to us to
build libraries to add in features like theming
7220 -> and responsive design let's take a look at how
we solve these things for BeatGig. In 2019 this
7226.56 -> feature request for React Native support was
opened on the Chakra UI repo I thought this was
7231.92 -> pretty exciting because I wanted a library like
chakra for React Native and React Native Web with
7237.6 -> unstyled components I ultimately decided to build
my own library called Drips. Dripsy is a set of
7244.72 -> responsive un-styled UI primitives for React
Native and React Native Web based on a theme
7251.92 -> this is what it looks like to use Dripsy
it's heavily inspired by Theme UI from React
7257.28 -> on the left we have our theme and on the
right we can style a component using the
7261.92 -> sx prop so I'll try adding a background color
and here it pulls values straight from my theme
7268.8 -> if I want to make a value responsive such
as padding all I need to do is pass an array
7275.36 -> here it'll use the third scale on mobile devices
7278.64 -> and 0 on any screen bigger than that we now
have a way to use theming and responsive
7283.28 -> design across platforms creating a consistent
user experience no matter where your users are
7289.84 -> next let's talk platform specific features every
now and then I come across a feature from web that
7296.96 -> doesn't yet exist in React Native. Two good
examples are anchor tags for scrolling down a
7302.56 -> page and URL query parameters let's take a look at
how we use these features in a cross-platform app
7310.08 -> and then I'll show you how you can make
your own something I love about HTML
7314.72 -> is how easy it is to scroll from one part of the
page to another using an anchor tag the issue is
7321.12 -> React Native doesn't have anchor tags so to get
around it I built my own library called Anchor.
7328.48 -> Anchor lets you scroll to any arbitrary component
inside of any scroll view it works cross-platform
7335.04 -> with the exact same API I found this to be
especially useful when a user submits a form
7342.24 -> and I want to scroll down to the errors.
To the left we have the BeatGig website
7346.64 -> and on the right the iPhone app let's see what
happens if I submit the form with missing fields
7353.68 -> notice that it turns red and scrolls
to the correct field let's do the same
7357.2 -> thing on the iPhone app and the same thing
happens so I'll enter my offer amount here
7363.28 -> and I'll do the same thing on the app and I'll
hit submit again and now it takes me down to
7369.04 -> the date so this time I'll set a future date say
December 2nd and I'll set one on the app as well
7379.12 -> alright so I'll submit one more time and
it takes me down to performance length
7384.56 -> so I'll fill this in do it on both and
now we have the app submitting on both
7390.72 -> for offers to Loud Luxury. Here we were able
to use anchors to nudge users along the way
7396.48 -> and make the form experience much more enjoyable
even when there are errors next let's take a look
7401.92 -> at using URL query parameters across platforms
something I find really cool is using query
7408.64 -> parameters as our React state so I made a hook
called useParam which lets us do just that
7414.64 -> what's cool is this hook actually works cross
platform on web it uses next router to get the
7420.64 -> query parameters and on native it uses normal
React state here I have a name and a set name
7426.64 -> returned by useParam which works just like use
state the first step is to set the actual name
7432.24 -> of the query parameter which in this case is just
name and that is pulling from the types up here
7438.72 -> when I call set name it should set it in the query
parameters and use that as my state so I'll try
7443.12 -> that here and there we go now it's rendering this
name it's in the query parameters and if I refresh
7449.36 -> I maintain my exact same state let's
try adding a clear name function
7454.8 -> I'll just set the name to null and then I'll add
a button alright so I'll go ahead and click clear
7459.84 -> name and now it's back to null it clears that out
of the query parameters and there's nothing here
7465.2 -> now let's look at a more complicated example
using age which is a number. The reason this
7470.4 -> is more complicated is because age is a number and
query parameters are always strings so here I have
7477.36 -> TypeScript complaining the reason is because I
need to parse the value in from the URL string
7482.32 -> so in this case I'll use the parse function which
gives you the value from the query parameters and
7486.96 -> it expects you to return the type you want so
in this case I'm going to return a number based
7492.32 -> on the query parameter I have okay but why
is this still upset well what happens on the
7496.8 -> initial render if you don't set a value you need
to set initial similar to use state from React
7503.2 -> and there we have it we now have an age query
parameter which is a number gets parsed in
7509.12 -> from the URL and also lets you set an initial
value if it's undefined on the first render
7514.8 -> to recap parse works similar to a JSON parse but
you can do it by query parameter now if I wanted
7520.96 -> to have a custom value in here let's say it was
number or hello in this case the age type is going
7526.88 -> to recognize that parse returns number or hello
but I'll just clear that out and now age is always
7533.44 -> going to be a number this is especially useful
if in parse you want to restrict users to only
7538.64 -> a specific set of types for example you might want
it to be a number that's only one, two, or three
7544 -> and you can handle that inside of parse and that
is it this is probably the most useful hook I have
7550.08 -> and it's so simple it works just like React
state across platforms but on web it lets you
7556.08 -> manage it all through your query parameters
next let's look at writing our own platform
7561.04 -> specific code to run different code based on the
platform you're using import platform from React
7567.28 -> Native using platform.os you can distinguish
between your platform and run different code
7572.8 -> typically you'll want to provide a fallback for
other platforms alternatively you can import
7578.08 -> different files altogether based on the platform
using a dot platform extension on a file name in
7584.48 -> this case index.web.ts will be imported on web and
index.ts will be imported on all other platforms
7592.8 -> and you can do this for as many platforms
as you want in general I actually recommend
7597.92 -> against writing platform-specific code directly
in your app in fact in the Moti docs I wrote that
7604.96 -> using Platform.OS is an anti-pattern if you find
yourself needing to write platform specific code
7612.72 -> chances are you've found a good idea for an open
source library platform inconsistencies should be
7618.32 -> handled by third-party libraries so that apps can
always build with a single unified API next let's
7625.68 -> take a look at the monorepo structure for React
Native Next.js app the best way to structure a
7632.08 -> React Native nexus app is with the monorepo here I
have a packages folder and an applications folder
7639.28 -> inside of applications I have my two separate
entry points "next" is just my Next.js app as
7644.8 -> you'd expect and "expo" is the React Native app
that will run on iOS and Android. Expo provides a
7652.08 -> set of libraries and services that makes building
and deploying with React Native super easy while
7657.76 -> it isn't a perfect comparison in many ways Expo
is to React Native what Next.js is to React it
7664.4 -> makes shipping your product into production a way
better experience I highly recommend using expo ,
7669.28 -> for the React Native side I find this to be pretty
uncontroversial I won't spend too long on this
7675.28 -> instead at the end of the talk I'll link to an
example monorepo which you can use as your starter
7682 -> With React Native we have an instrument to turn
ideas into component based products quickly
7688.8 -> combine it with Next.js and we can leverage the
best features the web has to offer but there's
7695.44 -> still work to be done and if you want to take part
in building the cross-platform stack of the future
7701.92 -> I encourage you to follow and reach out to me on
twitter @fernandotherojo I hope you enjoyed this
7708.8 -> talk and I can't wait to see what ideas you have
to keep pushing this stack forward. Thank you.
7825.92 -> Welcome to another episode of compressed.fm a
podcast all about web development and - James you
7831.36 -> know this isn't a podcast right? It's not a pod-
what is this? This is Next.js conf. Next.js Conf?
7839.2 -> You mean they can see - you might you know want
to check your teeth. Oh all right, let's try this
7844.56 -> again. Welcome to our audio and video talk at
Next.js Conf, we're really excited to talk to
7851.84 -> you about the tech stack behind compressed.fm
a podcast all about web development and design
7857.6 -> in February. James and I started recording a
podcast all about web design and development
7862.4 -> it's released every week and you can find it on
your podcast of choice whether that's Spotify,
7868.8 -> Google, iTunes, you name it hopefully it's there.
A podcast huh that's right alright tell me more
7876.4 -> that's right we've recorded over 30 episodes
and we've also done two crossover episodes
7883.44 -> one with the folks at WebDev Weekly and
another with the folks at Perfect Dev,
7888.08 -> we have over 25,000 downloads we have five
sponsors and all of our sponsors are our favorite
7895.28 -> but I do want to highlight one in particular:
Vercel and we are so excited to be here at Next.js
7900.48 -> Conf okay that's enough about the podcast let's
introduce ourselves my name is Amy Dutton I'm the
7906.88 -> creative director at Zeal and my name is James
Quick I'm the developer media manager at Auth0
7913.68 -> and I figured I might be able to shed a little bit
of light on why we decided to start this podcast.
7918.72 -> When Amy and I started to talk we realized that we
both share a love for teaching we both feel like
7924.32 -> we have a lot of experience a lot of knowledge
that we really want to share with other people
7928.16 -> to help them grow and learn as well and we also
realized if we were going to start this podcast if
7934.08 -> we wanted to build up an audience if we wanted to
help people we would need to have a website which
7940.24 -> we did not have so Amy do you want to tell people
a little bit about the features that we thought
7945.28 -> we were going to wanted to include in the website
as we built it out that's right so like any good
7950.32 -> website we needed a home page and on this homepage
we wanted to feature general information about the
7955.6 -> podcast itself where it could be found in the
most recent episodes we also needed sub pages
7961.84 -> to highlight all the episodes on the podcast
a page with the individual episode information
7969.2 -> a contact page a newsletter page so that people
could sign up and also see previous newsletters
7976.24 -> and for all the designers out there can we just
take a second to appreciate this Figma board that
7980.72 -> Amy put together that's right everybody loves a
good Figma board or at least a good well-organized
7986.72 -> Figma board another piece is we wanted to have
a custom audio player that would feature all the
7992.72 -> bells and whistles and some of those bells and
whistles are deeplinks into an episode itself
7998.24 -> so you can change the url it would jump to that
specific place in the episode it would also have
8003.68 -> jump cuts so we could list out different chapter
marks within the episode you could click on that
8009.52 -> and jump to that particular section of the episode
then we wanted a featured player that was a little
8015.68 -> bit bigger and larger on the homepage for the
newsletter page we wanted to provide the ability
8021.36 -> for people to register as well as highlight
all the information in previous newsletters
8027.12 -> and then probably one of the features that I think
James and I are the most proud of is our sponsor
8031.6 -> dashboard we wanted a way for sponsors to be able
to log in and see in real time how many downloads
8038 -> and listens each individual episode
that they've sponsored has received
8042.8 -> in addition they would be able to see
all the contracts and all their invoices
8047.2 -> so what did we actually build well before we get
into that maybe we should start with the data
8053.2 -> as we all know data is the thing that powers
websites and actually makes them functional
8057.6 -> and exciting and fun to use so let's start
there we decided to host our podcast and
8063.92 -> simplecast so if you look inside of simple cache
you can see all of our episodes are hosted there
8069.04 -> in addition to hosting the actual episodes
themselves Simplecast gives us some analytics
8074.32 -> that we can follow about how we're doing in terms
of downloads and listens and that sort of stuff
8078.88 -> and that's really neat but the next level
iteration of that is the fact that uh not
8083.68 -> only is that data accessible inside of their
dashboard but through their API we can make it
8089.6 -> available inside of our dashboard so we've been
able to integrate as you'll see in a few minutes
8094.8 -> with the simple cast API to grab that listen
and download information and display that for
8099.2 -> our sponsors so that they can see that and
check how their sponsored episodes are doing
8104.64 -> now that's just one half of the data that we
have that's for the analytics and the episodes
8109.04 -> themselves what about miscellaneous data how do we
keep track of sponsors and jump links and metadata
8115.2 -> associated with the different episodes well Amy
and I both have used Sanity.io which is a headless
8120.32 -> CMS in some of our personal projects in the past
and have really enjoyed it and decided that would
8125.52 -> be a great option to go with for storing the data
for our Compressed.fm podcast so one of the things
8132 -> that's really cool and interesting about Sanity is
you have the ability to customize your dashboard
8136.8 -> and your models in your schemas through code so
you can see here a quick screenshot of all the
8141.44 -> different schemas that we have for all of our
data which is actually maybe a little bit more
8146.48 -> than you would expect and then this translates
to inside of the actual Sanity studio itself
8152.48 -> you can see those are the different categories
of models or schemas that we have and then here
8157.36 -> you can specifically see the information that's
associated with each episode like a title slug
8162.8 -> date sponsors cover image so on and so on you
can tell it's actually a decent amount of data
8168.32 -> so on the home page itself we need to be
able to pull in that information from Sanity
8173.2 -> to display general information about the podcast
and the most recent episodes so if you look at
8178.4 -> the code itself you'll see a query here and
it's using grok and that's the query language
8184.08 -> that Sanity provides you can also export that
as GraphQL but here we're using grok so we're
8189.68 -> asking the database for all the information
for each episode that has been published before
8195.68 -> now and it will order those by date and provide
all the metadata around that specific episode
8203.52 -> then we're passing that information over to
the layout and the cool part about Next.js
8209.12 -> is we were able to create several different
layouts one for the home page and one for
8212.88 -> the interior pages so you can see here our
home page is actually being wrapped in the home
8217.84 -> layout then we had to create a bunch of different
subpage layouts for the episode page itself we
8224.72 -> used a query as before from Sanity to grab all the
podcast episodes and then I kind of glossed over
8230.88 -> this before but we're using getStaticProps so that
this page renders as fast as possible and then
8237.6 -> similar to before we are wrapping that with
a layout in this case the interior layout
8242.56 -> for the episode page and we're passing all the
information that we got from getStaticProps
8247.68 -> into our component itself for the individual
episode page this is going to look similar
8252.88 -> to before we're querying Sanity for the
information and then we're using getStaticPaths
8258.64 -> and getStaticProps now the difference here is
getStaticPaths checks the database to say hey
8264.319 -> these are all the urls and all the paths that you
need for all the episodes and then it passes that
8269.359 -> information to getStaticProps so it can get all
the information it needs for each individual page
8274.88 -> and again this allows the site to be super fast
one of my favorite components on the site is the
8280.24 -> audio player and one of the reasons I got so
excited about this particular component was it
8284.72 -> not only proved to be a fun coding challenge
but it allowed me to have complete control
8289.12 -> over the design so there are multiple players
throughout the site so on the home page we have a
8294.8 -> player that's large and in charge that's a
featured player then on the sponsor dashboard
8300.08 -> which we'll talk more about later we're able to
highlight the actual sponsor ad read so that when
8305.04 -> a sponsor comes to their dashboard they can see
where in the episode their actual sponsor read
8310.8 -> is then at the individual episode page we have a
different player that allows the user to have a
8316.88 -> little bit more control over the playback itself
so you can listen to it at 1x or 2x speed you can
8322.64 -> jump forward 30 seconds or back 30 seconds
it just provides a little bit more control
8328 -> and if you're interested in the specifics of
the player and the code behind it I actually
8332.96 -> have a whole series on youtube where we break it
down line by line that's at self teach me so for
8339.04 -> the newsletter page we need to have the ability
for the user to sign up and then we also need to
8344 -> display the previous newsletters so there's some
fun things that are going on with this particular
8348.56 -> page we're querying it just like we did with
the episodes page but we're also using sanity's
8354.399 -> portable text feature to be able to have control
over each individual newsletter layout so whether
8360.8 -> that's highlighting a full screen image or having
an image on the right and text on the left or vice
8366.64 -> versa the portable text allows us to have that
type of layout control within the Sanity panel
8373.439 -> so this query looks a little bit different just
because we are accommodating for portable text and
8378.8 -> how that information is being returned but it's
still using that getStaticPaths and getStaticProps
8384.8 -> to be able to render as quickly as possible so for
the newsletter itself the form is actually pretty
8391.28 -> sweet we are using quest forms which just so
happened to be a Compressed.fm sponsor but
8396.479 -> we were actually using them before they became
a sponsor and one of the reasons that we loved
8400.8 -> using quest was it allowed us to create all kinds
of integrations and do fun things on the back end
8406.479 -> without writing additional JavaScript and
serverless functions so if you go to the
8411.439 -> quez form site you'll see that they handle spam
protection as well as built-in validation and
8417.52 -> the validation happens on the front end in your
browser but it also happens on the server side
8421.84 -> so there's no chance of malicious code being
injected along the way but it also handles local
8427.2 -> testing and multi-step forms one of the cool ways
that we're using these features is on the sponsor
8433.6 -> application page so we're pulling information
about all the pricing for each episode into
8439.68 -> the form and displaying that but on the future
episodes it's checking to see which episodes
8446.08 -> are haven't been sponsored yet and displaying
those as options within the sponsor application
8452.24 -> if you go to the quest form site it will tell you
that using their form is an easy simple three-step
8458.72 -> process you just add a class name to the form
itself you can add rules for validation as
8464.399 -> attributes to the input field itself and then
you include their script along with an action
8469.6 -> attribute and it is as easy as this three-step
process so if you look at our code we are using a
8476.24 -> use effect to initialize the form and then on the
form tag itself you'll see we have that action tag
8483.2 -> each of our inputs have a unique name attribute
and that's really all there is to it it just works
8489.76 -> out of the box which is pretty sweet now quest
forms has several integrations that they provide
8495.28 -> but we are actually integrating with Zapier
and one of the reasons that we're using
8499.359 -> Zapier is it allows for multiple steps to
happen after the actual form is submitted
8504.88 -> so for example the newsletter it just gets passed
off to Mailchimp but for the contact form one of
8510.479 -> the things that we're doing is I get a message
in Slack directed towards me but then it also
8515.68 -> checks to see if the user wants to be added to
the newsletter and it will add them to Mailchimp
8520.08 -> as well one of the reasons why we went with
Mailchimp was it was more cost effective solution
8524.24 -> but it also allowed us to customize the newsletter
itself with their built-in tools we're also making
8531.52 -> use of their journeys feature so different things
will happen depending on which form you fill out
8537.04 -> if you are a sponsor or a guest you get a unique
thank you message sent from Mailchimp or if you
8543.6 -> join the newsletter you get a unique welcome
message that way as well then I just wanted to
8548.16 -> throw out with next we were able to achieve a
perfect Lighthouse score without much effort.
8557.04 -> So let's talk now about the dashboard and I think
this was uh maybe in comparison or in addition to
8564.08 -> the audio player like one of the most intricate
pieces that we have in the dashboard because we
8568.479 -> need to make sure that only certain people with
certain emails should be able to access the
8572.88 -> appropriate sponsor dashboards and then we need
to integrate with simple casts and our API data
8577.68 -> and all that sort of stuff in addition we wanted
to show the relevant invoices and contracts and
8583.2 -> episodes that are associated with each individual
sponsor on their dashboard page and as we started
8588.96 -> thinking about how to best protect our application
we started wondering what's the best way to do
8594 -> that and we're a little biased because I work at
all xero but we decided to give austiro a shot
8598.479 -> and in fact this was actually amy's first time
ever using austiro yeah I did just want to throw
8604.24 -> out there that I obviously have a connection
to office zero through James but it was so
8611.2 -> easy it took me about five minutes to set it up
myself originally the plan was that James was
8615.52 -> gonna help walk me through it but I jumped the gun
and did it myself without any trouble at all so
8621.28 -> if I can do it as a designer then you can
definitely do it don't don't let her fool
8626.319 -> you on her development skills but we did decide
to use all zero and we used it for a couple of
8631.12 -> different things we used it for authentication
of handling the login process and deciding
8635.92 -> who is this user and then authorization the
difference here is what does that user have access
8640.8 -> to which is actually really important and we'll
talk about that more in a second all xero actually
8645.76 -> also does the user management for so that we don't
have to and then it has really nice integration
8650.64 -> with sdks like the Next.js sdk that you'll see
here in a second so that Next.js all serial sdk
8658.16 -> is on Github you can go and check it out you
can try it yourself and once you do after you
8662.24 -> configure a couple of environment variables you'll
be brought to the screen where you'll need to
8668.64 -> export this handle auth function and that's really
all the configuration that you're going to need
8673.76 -> what this will do is it creates a dynamic route
for you which behind the scenes then generates the
8678.72 -> associated routes for login logout callback and
me login and logout are probably self-explanatory
8685.28 -> the callback route is the API route the serverless
function that gets called after the user redirects
8690.56 -> over to auth0 logs in and then comes back to
our application it calls that callback function
8695.359 -> where you can add custom logic if you want to
the me route there is just if you if you want
8700.56 -> to call that route and get general information
about the user that's what that one is there for
8705.2 -> so with those in place if you go over to the
code if you want to add a login button what
8710.08 -> that becomes is just a link to the logout or
login routes so you can see here that we are
8716 -> conditionally displaying login and logout buttons
based on the user themselves now one of the things
8721.76 -> that Amy did as a designer that I thought was
really really cool is she uh customized the
8726.399 -> universal login page for our application this
is a login page that's actually hosted in all
8731.2 -> zero but as you can see has our brand wave forms
in the background and then our strong black and
8737.359 -> yellow colors on top of it so it really looks
like it's natural to the Compressed.fm brand
8743.2 -> now we talked about trying to protect certain
pages for our dashboard to make sure only the
8747.359 -> right person could get there well you can start
with exporting this with page auth required thing
8752.88 -> that comes from allzero and what that does is
it automatically checks to say hey if a user is
8758.16 -> trying to access this page and they're not logged
in it's going to redirect them to the login page
8763.04 -> so this will make sure that the user is
authenticated but this doesn't make sure that the
8766.88 -> user is authorized to have access to that page so
what do we do next well you can actually customize
8773.04 -> this getServerSideProps function and add
any additional sort of logic that you need
8778.319 -> so for example what we did is we were able to
track associated emails with a different sponsor
8784.96 -> inside of Sanity so as we onboard a new sponsor
we can grab an email address from them add it to
8790.479 -> the associated emails property and then be able to
check that as a user logs into that specific page
8796.64 -> so we have different pages dynamically or
dynamically generated pages for each sponsor
8801.84 -> and then inside of this custom getServerSideProps
we can grab the user that's logged in we can grab
8807.52 -> the email associated with that user and then
based on the url or the slug for that sponsor
8813.28 -> we can go and query from Sanity to get all the
information about that sponsor that is that the
8819.04 -> user is trying to access their dashboard for after
we have that sponsored by slug we can check the
8824.8 -> associated emails and see if that associated email
includes the email of the logged in user or see if
8831.359 -> it's one of our admin emails so that Amy and I
kind of have a backdoor so that we have access
8835.439 -> to all the dashboard pages to go and look and
make sure that things look good as we're testing
8840.96 -> so after all of that takes place we're able to
allow the user through to the dashboard where we
8846.96 -> will display all of their information inside
of here you can see not only do we have all
8851.6 -> the information that comes from Sanity about
the sponsor but then we go ahead and iterate
8856.319 -> through each one of their episodes and interact
with the simple cast API to grab the associated
8861.28 -> download and listen information as well so that
they have all the information they need right
8865.359 -> inside of that dashboard page alright so that
was kind of a lot let's do a quick recap here
8870.8 -> Amy and I decided based on all of for teaching
that we wanted to start a podcast because we
8875.84 -> wanted to start a podcast we then realized we
needed a website and not only did we want a
8880.319 -> website but we wanted it to be kind of impressive
we wanted it to be as good as we could make it
8885.84 -> so not only did we do static pages for our home
page and our episode landing pages and all that we
8891.92 -> have integrations with Sanity for all the metadata
that we need we integrate with simplecast to store
8897.12 -> our podcast episodes and get analytics from Amy
built out a really sweet custom audio player
8902.8 -> that has lots of functionality you should go and
check out that video series on her youtube channel
8907.359 -> had really cool integrations with quest forms and
Zapier and Mailchimp to handle our newsletter and
8913.52 -> onboarding stuff and then lastly we built out a
custom dashboard with all zero to help protect
8919.2 -> our application before we display the only the
appropriate information for the appropriate
8924.479 -> sponsor based on the user that's logged in if you
want to check us out please go to your podcatcher
8930 -> of choice and search for Compressed.fm and
if you enjoy it and only if you enjoy it
8934.88 -> please leave a rating and review it really does
help the logarithm and give our podcast a lift
8939.84 -> helping other listeners just like you find our
podcast if you want to connect with us directly
8944.8 -> you can find us on Twitter James @jamesqquick
and myself @selfteachme that's all we got.
8964.88 -> Hi there Tim from Checkly here today I want
to talk to you about the performance and
8969.84 -> reliability of your modern web app more
specifically I want to show you how you
8975.359 -> can use a new generation of headless browsers to
catch common performance and reliability issues
8982.399 -> all before you go live in production this sounds
a lot like end-to-end testing then you're right
8990.56 -> but end-to-end testing is a little bit boring
it used to be flaky right well kind of used to
8997.2 -> be but stick with me and I will show you why I
honestly think we are entering a golden age of
9004.399 -> end-to-end testing what's important to notice is
that performance and reliability are top of mind
9011.68 -> among JavaScript deaths in the recent JAM stack
community survey of 2021 performance and in
9018.96 -> this case uptime were the number one and number
two concerns for devs when building a website
9026.399 -> this talk is going to be very practical I will
talk you through some code examples that you can
9031.76 -> run yourself using Nodejs Playwright my headless
browser framework of choice and Github actions
9038.64 -> all of this code is available on Github in the
link below essentially I'm going to show you how
9044.479 -> to build a mini checklist because at Checkly
we run millions of these headless sessions
9049.28 -> per month so no need to sign up to any servers
right now except Github to get your feet wet
9056.24 -> and start exploring of course at the end I will
do an obvious pitch of how great Checkly works
9062.56 -> in this context and how it deeply integrates with
Vercel for all your Next.js projects let's dive in
9071.68 -> here I have a very basic Next.js project
using Next.js 11. this should be bread and
9077.76 -> butter to the most of you now we wouldn't
want this super enterprise level website to
9083.76 -> be shipped to production with catastrophic bugs
or terrible performance would we no we wouldn't
9090.319 -> so let's introduce Playwright to make sure
that this doesn't happen so what is Playwright
9098.16 -> Playwright is an open source framework developed
by microsoft that enables you to talk to a browser
9103.6 -> from your code you can click on buttons fill
inputs take screenshots and much much more
9110.399 -> Playwright itself is written in TypeScript so
it plays very well with the JavaScript ecosystem
9116 -> however it also supports Python Java and .Net
what sets Playwright apart from other similar
9123.92 -> frameworks like Puppeteer and Selenium are its
speed and its smart features like auto waiting for
9130.56 -> screen elements to appear before clicking on them
okay let's write our first Playwright script here
9137.359 -> it is it's a simple JavaScript file that I put
into the end-to-end test directory just step one
9144.479 -> and this is my whole Next.js code base for
the project I just showed you so let's run
9149.84 -> through it and see what it does well firstly we
install Playwright in this case I'm installing
9156.16 -> Playwright Chromium just for demo purposes
because it only downloads the Chrome browser
9162.479 -> instead of Chrome Webkit and Safari as Playwright
supports all of these three browser platforms
9170.72 -> then we have a small run function an async
function so we can run the await code
9176.16 -> we create a browser we create a page and then
we set a target URL variable you will see that
9184.479 -> it uses a target URL environment variable and
a hard-coded production domain name and I will
9192.72 -> show you why that is and how it comes in very
handy later when we run this in Github actions
9199.6 -> so we go to our target URL with the page go to
method we click on our button we snap a screenshot
9209.439 -> and then we close the browser
that's it so let's run it
9217.76 -> It did the thing it opened or target URL in
this case localhost click the button snap
9222.96 -> the screenshot close the browser let's have
a look at the screenshot amazing it worked
9231.359 -> now let's get some more data from the Playwright
script and create a little report on reliability
9236.64 -> okay here's a rundown I added a report
object here with a bunch of counters
9242 -> that will record some key metrics that
happen throughout our browser sessions
9246.96 -> we have properties for all requests that finish
with a good status code so anything up to 399.
9255.2 -> then we have all the requests above 3.99 the
bad ones that fail then we have a failed request
9262 -> counter this is just for requests that error
out on the network level and never respond
9269.12 -> and then we have a counter for console errors
this could be anything your own JavaScript
9274.08 -> erroring out some third-party library or some
malformed JSON response confusing your code
9280.8 -> and we collect this data by listening to events
emitted by the Playwright page instance you can
9287.28 -> see that right here uh we have some listeners
on the request field on respond and on console
9294.8 -> and every time we do a little
console.log and we bump these counters
9301.2 -> so all the way in the end we just log this
to our console which you can see right here
9306.96 -> and that's our little reliability
report let's give it a spin
9317.6 -> Oh my god we have some errors we got console.error
lines you can see it right here two of them
9324.8 -> and we got a failing request also and um we
have 11 normal requests that filled with a
9333.2 -> status code lower than 399 what you can see that
apparently we had some requests to some servers
9339.28 -> with a non-existing domain name what's interesting
also is that none of these errors were actually
9347.12 -> obvious when we snapped that first screenshot so
in this specific case the image was at the bottom
9354.399 -> of the viewport and it was missing and you can
see that right here so there is a broken image
9362.72 -> Okay let's add some performance metrics
in our case I want to add some web vitals
9368.56 -> again we create a data structure to capture these
and we're going to capture the web vitals FCP or
9376.24 -> first contentful paint and LCP the largest
contentful paint we use a Playwright feature
9383.84 -> where we can directly inject a script into
the page and in this case we're injecting the
9388.479 -> standard web vitals library that I just installed
using NPM note that we're only interested here
9395.68 -> in web files that make sense in a lab or synthetic
environment opposed to the web files collected
9402.24 -> in the field using real user traffic for instance
what Vercel gives you with their analytics feature
9409.68 -> so you can see a bunch of code here that
essentially calls the library that I just injected
9418.399 -> and then adds the metrics to this little object
9422.399 -> again we console log that object at the
end of our script let's give it a run
9439.68 -> Here we go so we got the same errors of course
as the previous run but you can see that we
9445.76 -> added the first contentful paint and the largest
contentful paint and we logged it to our console
9452.96 -> so how do I run my end-to-end script, I'll need
to deploy. Well there are many services offering
9458.479 -> this hint in hint we exactly do that but you
can run this from your continuous integration
9463.439 -> setup we will use Github actions for this
as you can see this file I added it to the
9469.439 -> standard .github/workflows directory and it's
pretty standard actually let's walk through it
9477.52 -> it targets first of all the Nodejs runtime and it
checks out our code it does a little setup then it
9487.28 -> installs our dependencies and then it runs the
end-to-end test command from your package.json
9496.08 -> but there's three things to note here firstly we
only trigger this action when Github receives a
9502.24 -> deployment status event from Vercel in this
case then we check if that deployment status
9509.04 -> is actually successful lastly we assign a
target URL parameter that comes with the
9516.16 -> deployment event and assign it to a standard
environment variable so we can read it in our
9520.72 -> script you already saw that when I ran our tests
against my local host in this case we're going to
9526.08 -> get the preview deployment and the production
deployment URL given to us by Vercel injected
9531.6 -> into the script so we can run our end to end test
against all the preview and production deployments
9538.72 -> so what does that look like in practice well
of course I ran a little bit earlier and you
9543.68 -> can see it right here this is our script and
here is the test step you can see what happens
9551.68 -> We get a target URL that is specific
for this commit it runs through our
9557.68 -> checks and it prints the same info that we saw
earlier in this case the Github action passes
9564.96 -> we could add a little exit code to the script to
make sure it fails send you an email or otherwise
9571.28 -> trigger something in your pr review to know
that hey this thing broke I need to take action
9578.72 -> what I just showed you is of course just the tip
of the iceberg Playwright allows you to script
9583.52 -> and test much more complex multi-step flows and
extract a lot more data and we do this at Checkly
9590.88 -> to check our own web app here's what that
looks like on the checklist dashboard this
9596.56 -> is a multi-step Playwright script that logs
into Checkly and navigates some key pages
9602.479 -> we run these tests against our staging and
production environment on each git push that
9606.88 -> Vercel deploys for us so not against a mocked
environment that runs inside some CI pipeline
9613.439 -> this gives us way more confidence that what
we ship actually works in real life what's
9620 -> even cooler we also run the exact same set of
scripts every 10 minutes against production
9627.68 -> two things to note here all the Playwright
instrumentation and collection of metrics
9632.56 -> is done for you automatically we also
automatically snap a screenshot for you
9638.16 -> when an error occurs in your Playwright script and
second we now have a great integration with Vercel
9645.6 -> that can automatically block your
deploys if any of these tests fail
9651.279 -> if you want to play around with this sign up
for a free forever plan over at checklyhq.com
9658.56 -> So let's take a step back I mentioned at the
start that I think we live in the golden age
9663.12 -> of end-to-end testing what do I mean by that well
I mean that there's a convergence of three things
9670.319 -> first accurate preview deploys on each commit
by companies like Vercel, Netlify and others
9678.16 -> second cheap fast serverless docker-based
or other ephemeral infrastructure resources
9686.399 -> third of course this new generation of snappy
and easy to use headless browsers together they
9693.2 -> make shipping reliable and performant web apps
a ton easier and cheaper than it used to be
9700.64 -> that's it for me right now I hope
I gave you some cool insights
9705.439 -> as mentioned this is just
the tip of the iceberg visit
9708.72 -> playwright.dev for a ton more info on Playwright
and checklyhq.com/learn/headless for an extensive
9716.479 -> set of guides on how to use Playwright
in the wild thanks for watching, bye bye!
9737.12 -> Hi everyone thank you for joining me today my name
is Michelle Bakels. I'm a program director at G2i
9742.399 -> where I work on community focused solutions for
developer health and preventing and recovering
9747.359 -> from burnout and today I'd like to share with you
my experience building for non-profit communities
9752.479 -> with Vercel and Next.js and to begin sharing
that experience I'd like to introduce you to
9758.399 -> the community that I've been working with for
the last several months and that is 1909. 1909
9765.04 -> is a community in West Palm Beach that is for
creators by creators dedicated to the holistic
9772.08 -> growth of entrepreneurs creatives freelancers
offering workspace programs resources and events
9778.96 -> for the like-minded who give a damn about building
a better tomorrow and if that sounds like a very
9784.319 -> ambitious statement it is however I promise you it
has all of the impact and punch behind it in 1909
9792.8 -> is one of the most incredible communities that
I've ever seen let alone had the fortune of being
9797.76 -> a part of and what makes it so great is of course
the amazing people who are the members of 1909 so
9805.439 -> to tell you a little bit about who we are we are
content creators, marketers, bakers, gardeners,
9811.52 -> economists, activists, musicians, inventors,
yogis, the members of the 1909 represent a
9820.64 -> very diverse array of skill sets and talents
and I think on a higher level you could really
9828.16 -> describe the members of 1909 as creators,
freelancers, startup founders, entrepreneurs, and
9836 -> first employees so there is a lot of experiences
that we share with each other we help each other
9845.439 -> through the struggles and the hard times however
we also are there for each other for the wins
9851.439 -> and successes that we can celebrate together
and so it's really a great community and
9858.88 -> if you have ever been a startup founder or an
entrepreneur or been close to someone who has
9864.399 -> then you'll know that there are some pretty big
struggles in that journey and one of them I think
9871.439 -> is when you're starting early on you have to wear
10,000 hats because it's typically just you or you
9878.64 -> and a couple of people and so if you're like Anne
Wayla here in the bottom photo you may be really
9883.52 -> passionate about teaching kids how to grow their
own food at home and educating them on nutrition
9889.279 -> however you'll find yourself also doing the
bookkeeping and the social media post and
9896.319 -> advertising and a million other things that
you may not be necessarily very good at
9903.92 -> and so one of the things that we want at the
1909 for our members is the ability to stop doing
9914 -> the things we're not good at so that we can focus
on the things that we are good at and we already
9920.08 -> have at the 1909 this culture of giving towards
each other without expecting anything in return
9927.2 -> and the mindset of going further together so
with that known and with that already in practice
9934.24 -> the team at 1909 got together and came up with a
plan to create a platform to facilitate innovate
9942.16 -> and incentivize on this relationship that our
community already has amongst each other and so we
9948.88 -> got together for a colab day which is essentially
kind of like a startup hackathon in a sense where
9955.439 -> we fleshed out the idea for the exchange which is
a platform that has a feel of a task board crossed
9963.92 -> with venmo and it would be where our members could
post things that they needed help with and someone
9973.439 -> could basically pick that task up in exchange
for a couple of tokens which they would then
9978.96 -> be able to use again on the marketplace to get
something done for them that they need help with
9985.84 -> so it was a really cool idea around gamifying
and incentivizing something that already occurs
9994.56 -> and just making it a little
bit more robust for our members
9999.12 -> we also had the opportunity here to collect data
around the activities of our community which
10003.84 -> was really important as a non-profit community
there is quite a bit of data that we can collect
10009.6 -> however insight into the everyday as a member
of 1909 can really help with grant proposals
10017.76 -> and when you're speaking with donors so for
example imagine being able to say in q1 of 2022
10025.359 -> our members exchanged thousand dollars worth of
services amongst each other in support of growing
10034.24 -> entrepreneurs and small businesses in West
Palm Beach, Florida so that's a pretty powerful
10039.279 -> statement to stand on and to be able to speak
to when you are running a non-profit community
10044.479 -> so there was a lot of incentive to put this
platform up so we came up with a game plan
10050.8 -> to find developers to work on the project
design and build the MVP and then iterate
10055.6 -> as we received feedback and this is all pretty
straightforward typical for developing a project
10062.479 -> and so we began on the first iteration where
we built a simple transaction application
10070.16 -> with a React front-end node back-end we invited
any developer to work on it if they wanted to
10076.24 -> it was really an open invitation and we used the
simplest tools and languages that we felt that
10082 -> anyone could work with they would either likely
already know it or they could easily pick it up so
10089.92 -> despite like some of our best intentions
here and coming up with what we thought
10095.12 -> was a pretty straightforward simple plan there
were some unexpected bumps specifically with
10101.04 -> doing extra work on the side or volunteer
work outside of your normal 40 hour work
10108.479 -> work week so what we learned is that the company
MVP is very different from the community MVP so if
10116.319 -> we were building this in a company it would
actually probably be considered pretty trim
10122.399 -> however for side work we really needed to narrow
it down even more we created too much to maintain
10128.319 -> outside of the most critical functionality
the most critical functionality was the actual
10133.68 -> transactions however we did end up wasting quite
a bit of time trying to get this profile image
10143.12 -> uploader to work that we ended up scrapping so
things like that that didn't even contribute
10148.399 -> to the actual functionality of the transactions
we had to really pare down everyone's spare
10155.359 -> time is different so we needed to ensure that we
could async everything if not as much as possible
10162.08 -> and then probably one of our biggest pain
points was building and deploying created too
10167.12 -> many unexpected blockers especially when we were
onboarding our developers so this is just a common
10176.56 -> wall that we would hit when we were bringing
in developers or or setting people up was that
10181.84 -> the platform that we were using was just a
little complicated especially if you didn't
10189.84 -> have experience with it so our takeaway here
was that every process that left the potential
10195.359 -> for significant time loss risked a completely
losing a developer or volunteer for the project
10202.319 -> or delivering on the project at all so since
time is so valuable with volunteer inside work
10211.12 -> you know we really didn't have hours to waste
on anything because that a couple hours wasted
10218.56 -> can put delivery back a week or two when we
were talking about doing things on the side so
10225.12 -> we went back to the drawing board and
we came up with a new iteration that was
10229.68 -> way pared down called skillshare which we're still
working on the name but in any case we designed
10236.88 -> it like it was an MVP for a hackathon
so what can you deliver in 24 hours
10244.88 -> that works and 24 hours of volunteer time is
actually quite a bit of time so we also wanted
10252.08 -> to make sure that we got strong commitments from a
small group of self-starting developers so it was
10259.84 -> you know before where we would ask like would
you like to work on this yes now it was okay
10264.72 -> what time exactly do you have to spend what
do you intend to take ownership of when do you
10270.479 -> think you could deliver this it was a much more
explicit conversation so I take that on myself
10277.12 -> the open door will be great to revisit again once
we have the MVP done however in the beginning when
10283.52 -> we're just trying to get it out there we have
to close that circle async everything as much
10289.359 -> as possible from communication to development
to planning and of course prioritize removing
10295.68 -> processes and the potential for time loss so we
needed to recognize where we were losing time
10302.319 -> sometimes that's on code and it's inevitable
and you just have bugs and you have issues and
10308.08 -> it's part of of being a developer however there
were some processes especially in our deployments
10315.359 -> and builds that we kept hitting issues with and
that was a moment of okay let's reassess this
10324.24 -> and figure out what we need to do to not make this
such a problem anymore so we had another colab day
10332.96 -> and we decided to try and execute on this new game
plan that we made and for this colab I kind of
10344 -> just woke up in the morning and decided
to start working on it and made a plan to
10352.8 -> essentially set up the foundations and the
structures for our new apps because it was really
10358.8 -> a whole app ecosystem that we were restructuring
the skillshare was a part of it and I wanted to
10365.04 -> set up the builds and deployments for these apps
as well and so since we were starting from scratch
10370.8 -> again more or less I wanted to take a look at
Vercel and Next.js because I've heard so many good
10376.479 -> things about Vercel and what they offer and so I
allocated about a half of a day to learning Vercel
10387.76 -> or at least starting to and was very pleasantly
surprised that I only needed about 45 minutes
10395.6 -> the tools were unbelievably simple to set up
and use and as soon as I deployed our first
10403.76 -> project I realized that this was the answer to
one of our greatest pain points and time wasters
10409.76 -> which was our builds and deployments so
that was really great I could simply add
10414.8 -> other developers to our team we didn't need to be
installing anything and and debugging console.log
10420.88 -> statements it was very very straightforward
and with Next.js it eliminated our need for
10427.6 -> two of the back-end repositories that we were
planning on setting up and using for these apps so
10437.12 -> yeah I mean I really enjoyed using Vercel and
learning it and being able to integrate it into
10447.439 -> our work with this nonprofit community and I think
just the whole process was just so unbelievably
10454.399 -> simple I still get really like all those same
feelings of like happiness and excitement and you
10461.68 -> know relief when I think back on that day and that
moment where I was like wow this really is so easy
10468.64 -> and I and it's funny because I tell people the
thing that took me the longest was looking for the
10472.96 -> rest of the instructions because when I was first
using it, because of my experiences were just in
10480.72 -> complete disbelief that everything I needed was in
one UI and so I actually started searching around
10487.6 -> the internet for the rest of the instructions
on how to deploy on Vercel and of course
10493.439 -> it was really as straightforward as it seemed and
so at the end of the day what I was actually able
10500.319 -> to deliver was the foundation for these apps
the builds and deployments for all of them
10505.2 -> I was also able to get our developers onboarded
and then spend the rest of my afternoon
10511.92 -> actually writing the code which is the thing
that we really care about and the part of these
10516.8 -> projects that we really want to do is delivering
the value and the features for our community and
10522 -> I was able to build two front-end apps
completely one of them being the skillshare
10527.76 -> and get those deployed so that moving forward
we just start working on the services so really
10534.56 -> exciting day and was really great to share with
the team and they were all really excited too
10540.72 -> so comparing our previous experience to using
Vercel again our last platform wasn't really
10548.96 -> even too terrible a lot of it was just
expected in the developer experience
10554.56 -> however once you use Vercel the bar gets raised
really quickly so with the previous platform
10562.96 -> it required a CLI install and that's fine that's
really common however the error messages were
10570.399 -> really difficult to decipher even for experienced
developers if you weren't familiar with what those
10576.16 -> error messages were really trying to tell you you
could be debugging that for a while no automatic
10583.84 -> builds and deployments by default which is nothing
I ever expected in my life however once you have
10589.2 -> a taste of that life then you can't go back we
had longer builds and deployments again something
10596.399 -> that I just accepted as par for the course and
at times the documentation was really confusing
10603.68 -> and differed a lot from our actual experience
with trying to follow that documentation
10609.76 -> so again this is you know something that
I really would have always considered
10615.2 -> part of the developer experience however
switching to Vercel where we could connect
10619.68 -> a repo create a team build and deploy an
app in one UI in about five minutes really
10626.399 -> changes the game we also had automatic
builds and deployments by default which
10634.399 -> you know I is just like a dream to me the UIs
don't require documentation which is fantastic
10642.24 -> the page works the way that you expect it to and
the documentation doesn't require Google and Stack
10647.76 -> Overflow so for Vercel to be the creators of the
product and to be the best source of information
10654 -> on how to use that product is a little bit more
rare than I think we like to admit when we're
10659.76 -> using software products in our programs so yeah
I was overall very impressed with the developer
10669.76 -> experience completely understand what all of the
hype is about around using Vercel and Next.js
10676.319 -> and what was really happy to make the decision
to move forward with using it in our project so
10684.399 -> where are we now and where are we going we
have a core team of developers which is awesome
10690.16 -> we're moving forward with our new apps
built with React and Next.js and Vercel
10695.52 -> and we're going to begin testing with our
community soon we don't have an exact date yet
10700.24 -> however our road map to testing is pretty short
at this point so we're getting really excited
10707.68 -> and I also wanted to give a quick shout out
to the dev team that's been working on this
10713.68 -> Rue and Becca thank you so much for picking up
the torch and running with this project. Andres
10721.359 -> the original 1909 developer and the creator of the
blueprint for gamification software at the 1909
10731.12 -> it's been awesome to work with you on
these projects and then of course Ryan
10736.08 -> who's really kind of the visionary
innovator pusher of the project
10743.6 -> very dedicated to this idea of creating the
skill trading platform for the members of the
10751.68 -> 1909 and it's been incredible working with
you and of course there's a ton of people
10757.84 -> to mention that aren't listed here it's really
a community effort to put this out but I really
10764.479 -> wanted to make a special thank you to the
team that I work with and talk to about this
10770.16 -> on a day-to-day so with that said thank you so
much to the dev team that I get to work with
10777.04 -> thank you so much to Vercel and the team there for
creating amazing developer tools and experiences.
10785.68 -> It's again just a game changer for us for the
industry the bar has been raised you set a new
10793.6 -> standard so we are really excited to continue
working with your tooling and seeing what we
10799.68 -> can do and of course thank you everyone for
joining me today for this talk and hearing
10806.319 -> our story about how we build for non-profit
communities using Vercel and Next.js. Thank you.
10830.479 -> Hello everyone I am Ahmad Awais and I'm
super excited to be here for the second time
10836.479 -> on the Next.js conference stage and today I'm
going to be talking about building the developer
10841.84 -> relations stack entirely with Next.js but before
we go ahead and jump into the details of that
10848.64 -> how about I introduce myself a little bit so you
know where I'm coming from and why I'm building
10853.76 -> everything with Next.js. So I am an award-winning
open source engineer I've been writing open source
10860.16 -> code for over 10 years now I've written all
hundreds of projects a lot of them are CLI
10865.76 -> one of them is a Shades of Purple core theme or a
Corona CLI and millions of developers are using my
10872.08 -> code which is a humbling feeling I cannot even
explain a really teeny bitty you know bit of a
10878.399 -> code that I actually contributed to open source
ended up on Mars so I think I can claim the status
10884 -> of being a Martian right. Anywho I am a Google
developers expert the recipient of eight Github
10890.319 -> gold star awards and I've been around the block
I'm really excited about the web platform I'm a
10896.319 -> web purist and the fact that Next.js is building
the next generation of you know soft like software
10902.8 -> development kit for web it just excites the hell
out of me I also love to teach developers if you
10909.359 -> go to nodecli.com you can learn everything I know
about JavaScript in automation to build your CLIs
10915.04 -> or if you go to VSCode.pro you can learn
from me how to become a VSCode power user
10920.8 -> right now I'm working on a nextjsbeginner.com
course which I'm super excited about
10927.76 -> but let's hope I can finish it in time for
next year. As far as my day job is concerned
10933.359 -> I'm part of the executive leadership team
here at RapidAPI as their senior director
10939.68 -> I am the head of developer relations I we are
like about five or six people in develop right now
10945.04 -> and I'm still hiring if you go to awais.dev/hiring
you can read all about that. Everything we are
10951.52 -> trying to do here in the developer relations
team is based on Next.js and they are very much
10958.08 -> you know super valid reasons of why I have chosen
Next.js to be the entire core of our devel stack
10964.88 -> and that is exactly what I want to talk about
today building your developer relations stack
10969.2 -> with Next.js in case you don't know what developer
relations is it's it's like this really awesome
10974.479 -> field where you can be a teacher and you can
influence the improvement of developer experience
10980.88 -> around the entire chaos that exists in building
literally anything if you're building anything
10987.2 -> there's one service that is broken there's this
language that is just not working this this
10991.76 -> entire kiosk that we've worked with and services
like warsaw in frameworks like next year's
10997.76 -> actually help us improve the entire developer
experience you know kind of master that chaos
11003.439 -> around what we feel like when we are as users
developers we are sitting around and building
11009.68 -> something same thing we do for APIs here
at rapid API and since I joined rapid API
11015.76 -> one of the things I really wanted to do was
explain and teach APIs in a different manner
11022.72 -> so you see there is rapid API hub which is
the world's largest hub for APIs we have 35
11029.12 -> 000 APIs and over 3 million developers are using
these APIs so you can consider it like a hub or
11036.8 -> just like Github but for APIs yet you can also
sell APIs there and make a lot of money right
11043.68 -> so there's business involved in there so one of
our products is a rapid API how developers go
11049.439 -> to list their APIs or to use APIs listed by other
developers and then if a developer wants to learn
11056.56 -> this thing what they have to do is either they
are left with a documentation or API reference
11062.8 -> there's nothing there in the middle where eager
developers or discerning developers could go
11068.96 -> beyond the product or the documentation
and learn through either interactivity
11074.16 -> through videos or whatever you know their
preference is so I along with my team decided
11079.76 -> to build something but we are internally calling a
devel stack a bunch of products built inside devel
11087.76 -> which influence your learning the entire learning
platform and the knowledge you attain as an API
11093.2 -> developer this platform that we are building with
next years does not only help you master what an
11100 -> API is but it actually helps you improve that
chaotic experience into an improved developer
11106.72 -> experience when you're either trying to learn or
build something here's one of the projects as you
11111.76 -> can see this is not a production ready right now
we are hoping to launch it on first november but
11117.52 -> what do you see in front of you right now is what
we call guides right these are interactive guides
11124.64 -> filled with content that you want on a particular
topic but the fun thing about it is that they use
11131.439 -> a lot of interactive components as you can see
right now this is this project is actually in
11137.12 -> its infant stage there are community members like
saad and our devil team members like pratham are
11143.2 -> currently building content for this baby project
right now that we have what we are building here
11149.2 -> is this interactive content but either smaller or
longer form of content that is based on one single
11157.04 -> topic while this might just look like a blog to
you there is a lot going on behind it this is
11163.84 -> based on ssd this is mostly static content with
a flavor of client-side rendered components that
11170.88 -> actually help you improve everything that you're
trying to learn for example open API spec right
11176.72 -> and everything you see here is powered by markdown
so all of these are either React components
11183.359 -> in most of the content writers that people who are
writing content is coming from markdown and while
11188.64 -> this might look like a random block to you the
technology that's powering it the read more the
11195.439 -> relative uh suggestions that is coming from here
are all based on next cas and there's a particular
11201.52 -> algorithm that we have been able to build we are
using Next.js image component here and the script
11207.52 -> loader which has made the entire experience really
useful and the real user experience has improved
11214.96 -> a lot it's not just that using Next.js
the script component the images optimized
11220.72 -> images in everything it it kind of builds this
entire productivity stack for writing content
11227.2 -> where your content not only looks good feels good
is interactive but also has a really good SEO
11234.479 -> power or SEO juice in it because it next is the
script component especially the script component
11240 -> takes care of a lot of things for the core
web vitals the new Google you know SEO ranking
11246.399 -> parameters are the or the parameters on how Google
actually measures the real user experience where
11251.84 -> something like warsaw's analytics also come in
another project inside this devil stack is our
11258.56 -> video lms platform which is also based on
next css as you can see a lot of really good
11264.72 -> community members like irian JavaScript mastery
jessica siraj course trekker jesse catalin you
11271.52 -> know a lot of members have actually gone ahead and
produced excellent quality content on turning your
11278.56 -> APIs into a startup and selling them on rapid API
what we wanted to provide are developers who are
11284 -> trying to learn this skill from the get go is this
kind of experience where they can see everything
11290.64 -> in different modules and learn it in the way
they prefer so now what might look like a simple
11295.92 -> video embed to you nexus actually helps us derive
this kind of new experience around learning that
11303.279 -> enabling us to distribute the content in different
modules and helping users mark a particular module
11310 -> as complete as you can see at the bottom here all
of this is being built with nexius and the core
11316.399 -> that powers this is actually marked down so if you
have a video if our different team creates a video
11322.399 -> they can actually use a simple markdown file
to split that video into different modules
11327.52 -> not only hosted on youtube but also hosted on
our particular platform to own that part of the
11333.279 -> content and the fun actually doesn't really stop
here what I've shown you is just part of this
11338.8 -> particular mono repo different projects that share
different components and and this right here what
11345.12 -> you see is an interactive guide a learn platform
that we are building for example if you are trying
11351.04 -> to learn about http and different methods like the
post request a user or developer can not only just
11357.12 -> read about it but if you go down here you can
see you can play around with this interactive
11361.84 -> component so if I zoom down here a developer could
come here learn their post request method for
11367.92 -> the first time and create different kind of data
through this particular interactive component as
11373.68 -> you can see the response body includes my name and
my job through the small tiny little interactive
11380.64 -> component right here this helps you learn by doing
and at the bottom as you can see there are quizzes
11387.04 -> in all of this information that is actually
helping developers learn in a really good way
11392.56 -> we have also tried to gamify this experience at
the dark and light modes which look really awesome
11400 -> and are super super easy to do with Next.js and
the moment I move to the next lesson you can see
11406.8 -> the post request lesson has been tick marked
as complete as something that you have actually
11412.319 -> learned and you are able to not only just read
about it you are able to send requests and
11418.72 -> understand this particular part of API development
in an extremely deep and careful way and this is
11425.279 -> exactly what we are trying to build with a bunch
of different things this is not documentation
11429.52 -> this is like a stack that is sort of like projects
based learning where nexius has helped us produce
11435.84 -> this really performant blazing fast experience
around something which is not documentation
11443.04 -> it's sort of like courses in ebooks mixed together
on the web platform shown to you in different
11449.68 -> manners for example here is this React component
which is taking a bunch of data from our API hub
11456.08 -> so this is rapid API hub and this is a particular
crunch based API listed on it that you could use
11462.399 -> as you can see the latency and service level this
particular API offers on our develop stack what
11468.72 -> we can do is whenever someone mentions this it
renders as this particular React component with
11474.08 -> this information listed there on the client
side some of it is on the client side some
11478.96 -> of it is server side rendered and some of it
is for the sake of SEO completely statically
11485.04 -> generated in case you want a review of what that
is we're using csr with nexus to load components
11492.8 -> that are where we just render a small page with no
dynamically loading data you see a loading state
11500.16 -> and then the page displays everything using
an API for some other pages we are using ssr
11507.12 -> mostly these components are the components where
we want to authenticate some part of the workflow
11512.72 -> where the API is either non-existent or either
the API is only internal for example if you want
11518.88 -> to create an account on rapid API hub and do a you
know send a particular request to a particular API
11525.12 -> instead of doing all of that we can authenticate
your request through a particular server pipeline
11531.76 -> using the ssr server side rendered pages and
nexus and now we without even authenticating you
11539.359 -> we are able to show you a sandboxed experience
of what it feels like to either sell
11545.92 -> host or you know use APIs that are hosted on rapid
API right and ssr is super super helpful there
11553.92 -> but there are also documentation pages here as
you have seen in guides or in the lms where the
11560.479 -> ssd statistic generation comes in super handy
for the basic part the static side generation is
11567.359 -> the server generates the entire website for us
there is like no dynamic data for the client side
11574.16 -> process but there is also incremental static
regeneration where as you know we have like
11579.2 -> 35 000 different APIs and we want to build
documentation or information site for that we
11585.6 -> are able to use ISR for that in our develop stack
we are using incremental static regeneration very
11591.52 -> creatively ISR or incremental static regeneration
is where you can use the fallback true parameter
11598.479 -> and what it does is the server generates the page
defined on a particular path on the built-in if
11604.08 -> that path particularly exists in your source
code right and if that part does not exist what
11609.84 -> it does is shows you the loading state since a
request to that particular API generates the json
11616 -> and hydrates the data for you at that particular
instant but the second time you visit that
11621.76 -> particular page it now has a static cached copy of
that particular page right you see I never really
11629.2 -> like the fact that all of my images in markdown is
hosted with the code repository while it's easier
11636.16 -> and fun there's no database that you need to care
about it's more kind of more secure per se but for
11642.479 -> content writers or if you are that particular
content writer editing a particular post
11647.6 -> you have to worry about downloading all of those
assets in all of the Github repository and it's
11653.359 -> just kind of a big mess when you're trying to
just add a blog post inside of a Github repository
11658.96 -> so what we have been able to build is a module
that we plan to share with you folks soon
11664.08 -> which allows us to actually keep our images data
all of the data in a separate Github repository
11670.56 -> and all of our code including a mono repo based on
learner that virtual supports in a separate Github
11677.279 -> repository so if you are part of the marketing
team or content team writing content for this
11682.96 -> particular stack all you really care about is
markdown files and images you do not see any
11689.279 -> of the code but if you are a programmer if you're
trying to improve this ui as you can see here if
11695.6 -> you're trying to build new uh ways of interactive
content that developers are going to use
11700.88 -> you only care about the code not the data not the
you know images or a markdown or what have you and
11707.76 -> that is a fun part like our build script is able
to generate a json API at the build time and as
11714.72 -> soon as someone visits this page ISR method using
the ISR method we can also use a fallback for new
11723.04 -> guides for new things that our content writers
are writing in a completely separate repository
11729.2 -> and that folks is a whole lot interesting in
that is like things like these are what makes me
11736.56 -> super super excited about the future of web
development with something like next ges and
11742 -> just like that with csr ssr and ssc we are able
to build an activation developers tab so you see
11751.04 -> millions of developers are already consuming our
content but this stack is actually activating them
11756.88 -> allowing them to learn by example and by doing or
learn by watching or whatever their preference is
11763.6 -> we are able to render things on client-sides or we
are able to creatively use the ISR method to bring
11769.6 -> data from different sources into a particular
single Github repository which is completely
11775.52 -> separate from code I'm personally really excited
about all of the things that next year's has
11781.04 -> enabled us to do without ever worrying about you
know image optimizations Webpack configurations
11787.84 -> or anything really we have at this entire stag in
TypeScript and we don't worry about our types of
11793.2 -> configurations because Next.js has kind of tucked
those configurations away from us so we can focus
11799.68 -> on building awesome projects like this I am
really excited about what we are going to launch
11805.68 -> early next month here at rapid API using next ces
if you are excited about something that I have
11811.04 -> presented if you have more questions you can reach
out to me on Twitter I'm mostly active there at mr
11816 -> motherwest and I'm really excited about the future
of web per se with all of the creative components
11823.68 -> that Next.js have made super super simple through
all of this innovation in just the last couple of
11830.56 -> years a small team here at rapid API is able to
build massive projects like these without a lot of
11837.92 -> effort and with an excellent developer experience
we are building our entire developer relations
11842.72 -> stack in next years and if you are interested in
something like this go ahead and visit a west.dell
11847.92 -> hiring or reach out to me on Twitter and let's be
friends there I've seen developers think of nexus
11853.92 -> as this one single thing you know it's either
built for static sites or for dynamic sites or for
11859.52 -> only web apps but as you can see it's not jam
stack it's I think it's I and I completely believe
11865.2 -> it's much more than jam sites jam stack and beyond
jam stack you can not only build your entire
11871.279 -> landing page your blog your marketing stack for
the next years but you can actually try and build
11876 -> your sas app your actual application with nexus
and that is exactly what I kind of predict is
11882.56 -> going to happen next we are going to consume
the entire documentation stack for next years
11887.2 -> and then our marketing site in parts of different
products that are based on web right using Next.js
11893.92 -> if you have any question related to that and if
you're excited about what we are building reach
11897.92 -> out to me on Twitter and with that I hope you had
fun I hope you enjoyed my talk take care bye peace
11927.84 -> Hey everybody my name is Nick DeJesus
I am so excited to give this talk
11932.239 -> pitching the JAM stack and its ecosystem
to your clients a little bit about me
11939.6 -> I'm a developer experience engineer at Prismic
I like things related to all things related to
11945.342 -> eCommerce Stripe and how devs make money building
sites which is actually what this talk is about
11952.239 -> so if you're here already you're signed up for
an xjs conf you're probably already aware of
11956.239 -> the JAM stack you probably already love the
JAM stack you know we love the scalability
11960.8 -> the security the performance and everything
else that comes with it the entire ecosystem
11966.399 -> however how do we sell the JAM stack to others
so this is a really fun talk it's actually a
11973.76 -> joint talk well I'm the only one speaking
but I got some help from Dan Spratling,
11978.72 -> Dan is a front-end developer freelancer and
founder of Skyward a virtual agency focused on JAM
11985.6 -> stack development and I also had the pleasure of
speaking to four other successful agencies Jono at
11993.2 -> Rubato Studio, Hayden from Jelly Pepper DJ and TJ
from Monogram and Pablo from Somos Gente Digital
12005.04 -> so let's start off with how do you find
your clients a lot of them get their
12010 -> clients from referral systems from other
JAM stack specialists that find clients
12014.56 -> through social referrals and direct contact
asking specifically about JAM stack projects
12026.239 -> putting out ads on specific use cases they'll
get clients from people looking to leave other
12031.279 -> platforms they're not very happy with their
plug-in ecosystems or website performance
12038.16 -> and some business some businesses
are looking to get away from
12042.16 -> expensive hosting situations where maintaining
and upgrading is a nightmare for them
12051.04 -> and then there's the good old-fashioned
cold calls or or are walking in on a
12055.92 -> business and you know asking if they
need any kind of website work and
12059.6 -> you're usually targeting people that might
look to build something with platforms like wix
12066.479 -> and then there's educational content stuff like
blogs that have titles where things say like JAM
12072.8 -> stack versus some technology or straight up
saying that Next.js is the best framework.
12080.239 -> So who is the JAM stack good for they get a lot
of clients that are maintaining marketing sites
12088.479 -> you know they're the main ambassador of a brand
like a SAAS company for example now these sites
12094.88 -> have marketing teams focused on website promotion
and then there's also light eCommerce sites
12102.479 -> clients that are already using shop
something like Shopify on the back end
12106.72 -> and want a more personalized experience to
set themselves apart from the competition
12114.8 -> and then there's companies that have marketing
teams that are a little more technical pro tip
12120.16 -> these are marketing teams that are more likely
to go JAM stack versus straight up software teams
12127.92 -> and then there's also cios who may have
heard about Next.js or the JAM stack
12134.64 -> and so why is the JAM stack good for these
categories for marketing eCommerce and SAAS
12143.359 -> So the benefits per site type so with marketing
12147.359 -> you you want to talk to them and let them know
that you're going to get great performance
12151.04 -> security everything's going to be cost effective
and an overall better developer experience and for
12158.56 -> eCommerce you get to use multiple back-ends so for
example you can use Prismic for your content and
12164.88 -> Shopify for your products and then there are
SAASes so you get to share data across pages
12173.279 -> shared payments you can still use it as a single
page you still use the JAM stack as a single page
12179.359 -> apps app and it's really easy to set up doc sites
on the JAM stack and just to be clear every single
12186.72 -> category here they all benefit from all
the same things these are more or less the
12190.8 -> things that you'd want to say you know for the
clients that are running these types of sites
12197.68 -> so you found a good lead what's next so we asked
these agencies how do you pitch the JAM stack
12205.6 -> to clients now selling the JAM stack isn't
actually very special if you can sell a website
12213.92 -> you can sell a JAM stack website and so
you know selling a website and more or less
12220.399 -> about faster growth saving money saving time the
thing is JAM stack makes these things a lot easier
12231.6 -> So what really makes JAM stack
better well out of the box you get
12239.279 -> high performance because there's
no background processing and data
12243.359 -> is served through an API it's a lot easier to
get fast websites without doing anything extra
12250.399 -> marketing teams are more likely to go JAM stack
versus software teams we said that earlier
12258.72 -> they are secure by default static sites don't
really require a constant connection to a server
12265.359 -> meaning less chance for hackers to break
your website you don't have to worry about
12268.56 -> the guy in that give they're easy to scale
scalability allows them to grow if they have
12275.68 -> hundreds or thousands of blog posts products or
marketing pages the JAM stack can handle it all
12283.439 -> and they also work for every type of site it
doesn't matter if you have a marketing website
12288.64 -> an eCommerce site a SAAS or something else the
JAM stack will work for you and I'm sorry I really
12294.08 -> tried to find a gift for this one I i was really
struggling I wasted too much time on this slide
12300.399 -> and then it they also work with any platform
you're not really restricted by a single platform
12306.64 -> pick your front end pick your back end you're
not locked into an ecosystem by your decisions
12314.399 -> so one pro tip we got out of these interviews
is that you should pitch design systems so
12322.64 -> these are some screenshots provided by Dan on how
Skyward pitches their projects so static websites
12331.92 -> can still be dynamic Skyward creates component
driven architecture starting with their designs
12338.64 -> building modular design means making edits and
it's much easier and you're not restricted to just
12345.52 -> one layout it also means developers don't
have to guess what can and can't be edited
12354.8 -> working off modular designs means coding
is much easier developers have been used
12361.76 -> to component driven designs for a long time but
having designers and developers speaking the same
12367.04 -> language and thinking about components the same
way makes collaboration between the teams a lot
12372.8 -> easier and everything is documented and tested
automatically Storybook is used to document
12381.6 -> components creating a system where everyone
can refer to and linking up designs and code
12389.12 -> Chromatic is used to visually test the components
12393.52 -> based on Storybook ensuring components don't look
different between pull requests Cypress is used
12398.8 -> to functionally test components and make sure the
user can interact with them as expected every time
12404.88 -> you don't need this approach but it does add a
lot of value for just a little bit of extra effort
12412.64 -> and so one thing Somos Gente
shared is that they are able to
12418.96 -> build really fast there they don't actually
pitch their design system directly to
12426.239 -> the clients but because of the design
system and the fact that it exists
12430.399 -> allows them to say things that like they can
deliver a website in two weeks and promise that
12438 -> and then from Roboto you know clients
when they see the design system
12442.8 -> they get to see what they're
getting how it's built and they
12446.239 -> understand what they're paying for it gives them a
strong sense of security that supports conversions
12454 -> and so Prismic slices they they help tremendously
with putting together fluid design systems
12459.92 -> that are easy to present to both
technical and non-technical clients
12467.68 -> and then you also would benefit from demoing
how easy it is to use Prismic not any of the
12475.359 -> agencies that I've interviewed but a while
ago I heard someone say to to a client that
12481.2 -> you know if you can write an email then you can
use Prismic and I thought that was really helpful
12490.239 -> So at the end of the day you know like this here
is a list of things that are really important
12497.12 -> like the valuable parts of the JAM stack you
want to figure out which one of these things
12502.479 -> resonate with your clients the most so just
to read it off you've got high performance
12507.92 -> low maintenance it's secure by default easy to
scale works for any type of website works with any
12515.04 -> platform and you can consume multiple content
sources and it's cost effective long term and
12522.8 -> just to share a little story about the
flexibility of multiple content sources
12530.64 -> I believe it was Jelly Pepper they had a client
that wanted to move to the JAM stack however
12536 -> their old platform had over 300 blog
posts and they wanted to maintain that
12542.72 -> seo value so what would you do in that situation
12547.439 -> well what Jelly Pepper did they kept their current
back end as the source of data while upgrading
12552.239 -> the front end to the JAM stack so they got the
performance boost they maintained the seo and all
12557.68 -> that other good stuff they later moved everything
over to Prismic when the client was ready
12566 -> So one might ask is JAM stack cost effective
well short term if you're building a website from
12572.399 -> scratch and you're getting started with the JAM
stack it'll be quicker and easier if you're using
12576.8 -> a template if not you might find that traditional
solutions currently offer faster ways to get up
12583.12 -> and running but long term JAMstack makes a lot
of headaches simple for the long term maintenance
12591.279 -> expansion automation testing reusability this
leads to reduced costs and creates a better
12596.88 -> experience for you and other developers on the
project so let's talk about getting the work done
12605.76 -> so you know we're talking about planning
building and the maintenance so with planning
12613.2 -> you want to organize what you'll be doing and
break it down into different parts if you're
12618.88 -> working with a team you can overlap you know
like working on design and development to be
12624.239 -> even more effective and then you just straight
up build you know you get the designs done
12630.08 -> the content the development any other parts of
the process that you need to get out of the way
12636.399 -> and then maintenance kind of looks like answering
questions fixing bugs if you get any of those like
12642.239 -> I haven't seen any bugs or anything so and then
like other like ongoing support I know I think
12649.12 -> it's Somos Gente they like to say always answer
the phone I'd throw that under the maintenance
12654.399 -> category and so what's different compared to
traditional builds so the process doesn't change
12662.8 -> much but there are some small things you might
find different if you're used to building with
12667.84 -> drag and drop editors you'll find less of that in
the JAM stack space at least for now but instead
12673.2 -> you get a better experience for your developers
making growing easier and more fun to work with
12679.12 -> projects also require less maintenance
after project is completed which is great
12683.76 -> for clients as they they aren't held hostage
to keep their website up and running which
12688.64 -> saves money long term and allows them to spend it
effectively on improvements that actually matter
12699.04 -> So what to do after project completion
so we've got these categories here
12706.72 -> maintenance and support gemstack sites don't need
maintenance to keep running unlike traditional
12711.68 -> sites but if you'd like to offer maintenance
it's a great way of getting more continued work
12717.359 -> you can dedicate support time to improvements
which are a better value for your clients anyway
12724 -> dan shared one of their favorites analytics
reporting bug fixing and improving marketing
12730.239 -> over time with new landing pages
or slices to improve page content
12737.92 -> you can also suggest more improvements if your
client has a huge piece of software there will
12745.2 -> probably be more areas which you can help them
improve do a great job and it'll be easy to
12750.479 -> convince them to keep working with you for other
projects and you'll be in a unique position where
12755.439 -> you already have inside knowledge about their
projects another thing you might want to do is you
12761.12 -> want to get more testimonials and referrals work
brings more work so when a project is coming to an
12767.68 -> end be sure to get testimonials from your client
and that you can use in future pitches or on your
12773.92 -> website clients are also a great way of finding
other clients they have connections they work
12779.52 -> with they work with so ask them to refer you to
others in an easy in as an easy in for more work
12788.479 -> and marketing marketing is the core of getting
work done for every business so when you
12794.88 -> have some down time it's a good time to start
creating some newsletters get on social media
12799.76 -> start tweeting reach out to others and
you can find your next project that way
12807.52 -> So at the end of the day what you're really
selling to your clients is the future of the web
12815.359 -> JAM stack is modular it's designed to have
parts swapped in and out to best suit your
12820.72 -> needs you want an eCommerce store add Shopify
you want to accept Stripe payments add that too
12826.88 -> you can do it all without
changing your original stack
12830.8 -> JAM stack is powerful you're not losing any
potential by switching to the JAM stack you
12837.68 -> get better performance better security
and better scalability out of the box
12844.72 -> JAM stack is loved most developers who work with
the JAM stack love it satisfaction is increasing
12851.68 -> and more companies are switching to the JAM stack
because of it and just straight up JAM stack is
12858.88 -> the future and Prismic wants to help you find your
future clients we've actually built a free pitch
12867.6 -> deck template to help you land more clients the
link is prismic.com/nextjs/conf thank you Vercel
12878.8 -> for letting me give this talk if you want to
stay in touch make sure you follow me on Twitter
12884.399 -> also follow Prismic we're going to be diving
deeper into these topics in the future, bye!
12906.8 -> Hi everyone my name is Anuradha Kumari and I'm
so excited to be presenting to you all today.
12913.359 -> Today I will be talking to you all about
taking Next.js applications to next level
12918.319 -> with accessibility and SEO optimization before we
start little bit of introduction about myself I'm
12925.279 -> working as a front-end consultant with passionate
people I'm a Google developers expert for web
12930.319 -> technologies and Cloudinary media developers
expert and also an accessibility advocate
12936.56 -> You can reach out to me on Twitter @miracle_404
Let's get started the agenda for today is I will
12945.279 -> be talking about some tips for creating accessible
and SEO friendly Next.js applications first
12952 -> briefly see what these terms are accessibility
means making resources and services usable by
12958.64 -> everyone there are multiple types of disabilities
in the world and disabled people use different
12963.92 -> types of assistive technologies to access the
web like screen readers switch keyboards etc
12970.56 -> so we need to ensure that we follow proper coding
guidelines so that we make our applications
12975.76 -> accessible to all our users SEO or search engine
optimization means making improvements in our
12983.92 -> application which might have noticeable impact in
the way our website appears in the search results
12990.8 -> to understand why we need SEO let's see how
the search engines like Google, Bing, etc work
12999.04 -> So the search engine or search system
have four main responsibilities
13003.6 -> they parse the content in all the websites
available and this is called the crawling phrase
13008.8 -> then the data collected from crawling phase is
stored for further access it is called indexing
13014.88 -> sometimes they also go to the rendering phase
where they perform some operations if the website
13021.6 -> has client-side JavaScript then comes the ranking
where the data is stored in the indexes is query
13028.96 -> as per user search inputs or keywords every search
engine has a crawler like Google has googlebots
13039.279 -> So if you want to check if your website is indexed
or not you can go ahead and search in Google
13046 -> site:your_website name so let's quickly check
it out here I have tried to search for my
13053.76 -> website which is anuradhakumari.com and when
I search for it I can see all the URLs for my
13059.68 -> website which is good it means that my
URLs are getting indexed by the Google
13065.6 -> you can use this to check if your website is
indexed or not if not it's time to make some
13071.279 -> SEO optimizations let's code we can create a new
Next.js application using "yarn create next-app"
13078.08 -> application and then we can run the dev server
using "yarn dev" so I have created a basic website
13084.16 -> here where I have made some changes to the default
layout let us see how it looks so I have a header
13093.2 -> which is I have trying to create a game
wherein to fight the inaccessibility and then
13099.92 -> I have three different levels of game lowest
medium and highest now at this point what I
13105.2 -> want to do is I want to run an audit and see how
accessibility and SEO are doing in this stage so
13114.399 -> you can right click on the website and
inspect then the dev tools will open up
13118.479 -> in devtools Lighthouse what we can do that we
can select for categories accessibility and SEO
13123.6 -> go ahead and generate the report the results are
in we can see that accessibility has a score of
13130.16 -> 97 and SEO has a score of 100 so if we see what is
the error with accessibility then it has a missing
13137.68 -> lang attribute on HTML before we go ahead and fix
this I would like to tell you that this code is
13143.76 -> not indicative of the total accessibility of your
website it is just the some automated checks are
13149.68 -> run and they contribute to almost 30 to 40 percent
of accessibility issues so we must also manually
13155.279 -> test our websites so for this talk we will stay
with these Lighthouse reports so let us go and see
13165.04 -> So we ran the Lighthouse audit and we saw that
there was a missing lang attribute on the HTML
13172.399 -> now what is this error so this is a very
common error and of WebAIM which is a
13176.8 -> non-profit organization they every year run
report accessibility checks on top 1 million
13183.52 -> website home pages and in that report if you
see there are like this is the report and
13189.92 -> almost 28.9 percent of home pages as of February
2021 had this missing document language error
13198.16 -> there is also a very nice Github discussion
around it on Vercel Github where they talk about
13206.08 -> different ways in which we can solve this for our
nexus application we are going to look at two of
13211.92 -> different approaches today so how can we fix it we
can either add a custom document to our website or
13219.279 -> we can add the locales in next.config.js so let's
start by using first approach which is creating
13226.56 -> a custom document so for that we can go ahead
and add a _document.js file in our pages folder
13235.04 -> so I have created a _document.js file in the pages
folder and this is the default code which I have
13241.68 -> taken from the next year's website and if we see
the main thing here is that we add a structure
13249.12 -> so we have HTML head body tags here now we want to
add the lang attribute to our HTML so go ahead and
13256.56 -> add lang so I would like to add language of
English since my website is in English language
13262 -> so if we go ahead and check this now so in
elements tab we can refresh the page and see that
13269.04 -> now the HTML contains the language of English so
now this will pass in the Lighthouse error report
13276.8 -> So we saw how to add lang to
HTML using the custom document
13281.199 -> we can also alternatively add i18n configuration
in Next.js config file wherein we can add multiple
13288.319 -> locales and then we can also add a default default
locale and our HTML will pick this default locale
13296.64 -> now we added one single page and made it
accessible now let's add more pages and see
13304.8 -> So I have added three different folders because
I have three different levels for this game so
13310.08 -> lowest medium and highest so and I have added
some code so I have a section and a heading
13317.12 -> for it and then a form where it different shows
different questions so let's see how it looks
13324.479 -> So if we go to the lowest level we see the
list of questions which we can select from
13330.88 -> so now we are interested again in running the
Lighthouse report so I will run it again so the
13336.56 -> results are here and if we see the Lighthouse
score again is 97 so we have a different error
13342.96 -> here now the document does not have a title
element why because we haven't added any
13347.359 -> title yet but it is a very very important piece of
information it is also important for accessibility
13355.04 -> as well as for SEOs because the screen readers use
it to make the users know that what your page is
13361.52 -> about like what's the overview of your page and
also the search engine crawlers they rely on it
13366.96 -> to determine if your page is relevant to the user
search or not so it's a very important information
13373.84 -> and if we check for SEO errors we can find the
same title error apart from that we also do not
13379.92 -> have yet added a meta description it is also
important because when your website appears in
13385.359 -> search results it shows the summary of what your
website is for so and it gives users a clear idea
13392.399 -> if they should really come and visit your website
or not so these are very important informations
13397.68 -> so let us see how to fix that before that there
is one more thing which I noticed when I created
13402.56 -> new pages the default heading and footer is not
coming but what I want I want my pages to have
13409.439 -> header and footer all all of them because they all
represent a game together so we can also manually
13417.12 -> add it on on different pages but we can also use
something called a layout so let us see so first
13423.6 -> we will start by adding a layout what we can do we
can create a components folder with a layout file
13429.68 -> so here I have created a components folder
and a layout file and here what we have done
13436.16 -> is the common header and footer I have picked it
and added it here so we have a header and we have
13442.08 -> a footer and also what I want I always want main
on all my pages right so and then there is this
13448.319 -> children so whatever we will write now on all
the pages the that content will come inside the
13455.6 -> children we want it like this so we will wrap all
our pages within this layout component so let's go
13461.199 -> ahead and do it so we will start with our index.js
file so in index.js file we will go ahead and
13467.92 -> remove this header and remove the
mail we will add a layout to it
13480.88 -> then we'll remove the footer as well
13502.56 -> we do the same with our pages so we will
just see for lowest and we go ahead and
13509.92 -> add the layout to it
13521.72 -> okay
13522.72 -> let's go ahead and check the website again so we
see now we have this header and footer on this
13528.96 -> and if you go to home page it's still there so
now it's reusable and we can use it in all the
13536.479 -> pages that we want so now let's fix the title
and meta issues for that Next.js provides a head
13546.16 -> tag so what we can do that whatever title
and meta description that we have to use
13551.359 -> they go in the head tag and they will appear in
the head of the HTML document so I can add a title
13562 -> So I will write the name of
my game that hey this is it
13566.16 -> and then I'm on the lowest level page
so this gives the users an idea that
13570.399 -> where I am currently on their page on the
page and now I can also add a meta here
13577.439 -> so I have added a meta of description so which
will give a overall description of what my website
13582.96 -> this website is about like it's the lowest level
of game and the questions are related to level so
13589.68 -> this will give uh overview to the users that what
this web page will contain now if you go ahead
13595.68 -> again and if we see now uh it it displays the nice
title and uh if we run the Lighthouse report again
13606.56 -> the scores are there and if you
can see they are both hundred now
13610.479 -> because we have fixed all
the issues which were listed
13613.76 -> so we have added a layout so that the code does
not get repeated and also we have created a tight
13620.88 -> added a title and meta description for new pages
as well so they also do well in search results now
13627.52 -> that we have seen some of these code examples let
us also see some of more important terms in SEO
13636 -> so there is a robot.txt file this file tells the
search engine crawlers that which URLs the search
13643.12 -> engine crawlers can access on our websites we can
also use this to block some of the unimportant
13649.359 -> resource files like images etc so a sample of
this is this is a sample code wherein if I want
13658.399 -> to block some pages so like I want do not want
Google bot maybe to crawl my admin URL so I can
13664.8 -> say that hey this is a user is in Google bot and I
would disallow this URL to be crawled by googlebot
13672.319 -> otherwise in other cases we can just have that all
different types of user agents and alloying all
13678.96 -> our URLs and we can also add a link of site map
of our website site map to this robot.txt files
13685.84 -> now what is a site map so sitemap is a file
where we can provide information about our pages
13693.279 -> videos and other files on the website it helps
the search engines to find crawl index all of
13699.04 -> our website content and it also tells the search
engines which of our pages are more important
13705.68 -> so we are going to see how we can create
a sitemap.xml file for our website
13711.199 -> going to note here is sitemaps might not always be
needed for SEO but it's recommended and we can add
13716.88 -> it for our websites so how can we generate a site
map we can also generate it manually so we can
13722.8 -> create a sitemap.xml file in our public folder
and generate it via some online generators or
13730.08 -> write code ourselves for all our URLs but then
we will have to update it every time we add new
13736.239 -> pages to it like when there are new URLs we can
also use multiple automated solutions for it
13742.399 -> I am going to show you how we
can use a package to do this so
13746.96 -> there is this package called next hyphen site map
so we can add it in depth dependency in our code
13752.88 -> and then we will have to create a sitemap.js
file and add it in our post build script to
13759.439 -> say that after the build is finished please go
ahead and generate a site map for my websites
13765.199 -> let's see so I've already added this package to
my dev dependencies and we can create a sitemap.js
13772.72 -> file with few information it is very much
configurable but I have added the few necessary
13778.64 -> configurations here first of them is site URL
so you should go and add the website where your
13785.76 -> code is deployed to this so for example I have
deployed this code to file iPhone inaccessibility
13791.04 -> dot virtual dot app so my website currently
sits here so I have added it to the site URL
13797.439 -> and then we can say that hey please go ahead and
generate a robot.txt file for me and also we can
13804.16 -> optionally give it a size of sitemap now when in
package.json I have a post build configuration
13812.479 -> so in scripts there is a post build script which
says that go ahead and run the next hyphen site
13818.84 -> map with this configuration which is present
in our sitemap.js file and I already ran it so
13825.199 -> if we go to public we see that robots and site
map files are created and if we take a look at
13830.399 -> what a site map xml file looks like so it is a
list of URLs of my website so for example this
13837.92 -> is the home and then I had three different
levels so the three different URLs for it
13844.399 -> so we have seen a way in which we can
automatically generate our site map now
13849.84 -> that we have created our website and made it
accessible and SEO friendly so is our work
13856.56 -> done will we just wait for the search engines to
rank our web page higher and wait for the users
13862.64 -> to search for keywords so that our websites appear
in search results so we do that but we also share
13870.319 -> our links on social media so that users are aware
of it when you share your links on social media
13877.04 -> how will the link look like in the social
media preview like on Twitter Linkedin
13882.239 -> we have multiple ways in which we can check it
like Twitter has its own Twitter card validator
13887.279 -> Linkedin has a post inspector Facebook also has
one and there is also a website which I really
13893.76 -> like because it gives you preview of all these
websites together which is meta tax preview so so
13899.52 -> far whatever we have coded let us see how it will
appear when we will share it in the social media
13909.04 -> So the code is deployed here so the
code till now is deployed at this
13914 -> link so I will go to metatex dot io and
try to check how it looks so if we see
13921.04 -> it it it gives the title and a description and
the link of this website but there is nothing
13927.68 -> to preview in the image so it's not a very rich
experience for users they will just see a text and
13932.8 -> a link so it might not impress the users much and
they might not click on it so how can we fix it
13942.8 -> so there is something called an open graph open
graph is an internet protocol which enables any
13948.72 -> web page to become a rich object in a social
graph so when we are sharing any link we can
13954.479 -> also customize it to contain rich information
like title image URL description types etc so
13962.72 -> title image URL and types these are recommended
mandatory things which we must add when we are
13968.88 -> adding OpenGraph information to any web page there
are others also which are optional but you can go
13974.399 -> ahead and add it for a more rich experience how
we can add it we add it in meta tag itself so we
13982.56 -> add the property name in property and then we
add the value of it in the content attribute
13988.8 -> of meta tags so let's go ahead and add these
few oz values for our website so here I am in
13996.479 -> my homepage index.js and if you see there are
these oz values added so the title corresponds
14004.239 -> to it should be very similar to the title of your
website and description same goes for description
14011.76 -> then you can add a customized image here so this
image will appear when your website is shared on
14018.479 -> social media so this is a very nice thing which
we can do and we can also add the URL where it
14023.6 -> is hosted so with this code let us see how it
looks now in the social media preview so this
14030 -> is deployed this code is deployed on our main
website which is fight inaccessibility dot app
14037.76 -> and if we search for it I have added a custom
image to it it does not look very beautiful but
14046.479 -> I mean this is just to show you but uh so it
will look like this uh you actually will see
14052.16 -> a good image and then the title which you add in
the open graph and the description so it it's a
14058.88 -> good way to engage the users and let them know a
preview of what they might expect on your content
14066 -> and it provides a very rich user experience we
just saw how we can use open graphs to enhance
14073.04 -> the social media sharing of our website
links let us conclude now with some takeaways
14081.04 -> always add a document language and set title
for every page so that the screen readers as
14088 -> well as the search engine crawlers know what
to expect on the page and user knows what
14093.04 -> exactly is on that page we also saw how
to create robot.txt file and sitemap.xml
14100.72 -> then we saw how we can add open
graph via meta tags in the head
14108.64 -> I have added few links for the further read
these are very nice links and uh we also
14113.68 -> have a learn SEO tutorial on our next year's
website so go ahead give it a spin and see
14123.199 -> all the resources for today's talk will be
present at the website anuradhakumari.com/talks
14129.439 -> You can also scan the QR code and get
quick access to this website it was very
14135.52 -> nice presenting to you all here I hope it was
helpful thank you and have a great day, bye!
14156.16 -> Hey guys my name is Shadid and I love Next.js
I'm a developer advocate at Fauna the serverless
14163.6 -> database and today I'm gonna show you guys how
to build a GraphQL API with Next.js and Vercel
14172.88 -> Alright so why would you want to
build a GraphQL API with Next.js
14178.399 -> suppose you have a React or Next.js application
and you're interacting with many small micro
14183.72 -> services and third-party data sources so at this
point you might want to consider combining these
14189.76 -> into a single GraphQL service doing so will reduce
complexity in your client-side code you can build
14196.239 -> a GraphQL service inside your Next.js API layer
that way you don't have to create and maintain
14202.72 -> an entirely new application your graphical code
will live in the same repository as your Next.js
14208.88 -> client code making it easier to develop co-modules
and share code in between these two services now
14215.199 -> finally when you deploy your Next.js application
to Vercel it turns your GraphQL API into
14223.279 -> a serverless function now that is powerful you
don't have to deal with scaling your application
14229.359 -> and it will auto scale you don't really have
to care about maintaining servers for your
14235.68 -> GraphQL API it will be completely
serverless so that's interesting
14241.199 -> alright so we're going to build on a simple
GraphQL API using Next.js and Vercel so stay tuned
14248.88 -> and let's jump into the code alright so here
we are in our terminal and the first thing
14256.08 -> we are going to do is to create our new
Next.js application so I'm just going to
14261.439 -> use create-next-app so npx create-next-app
and my app name I'm just gonna call it myapp
14273.359 -> and wait for it to scaffold our application
14279.439 -> Alright so it's it's working
14288.479 -> okay perfect now we can cd into our
application and open it up on VSCode
14298.239 -> alright so what we're going to do
is we're going to put our GraphQL
14303.12 -> into the API layer so we're going to
create a new file here called GraphQL.js
14312.479 -> alright before we can write any code we
need to install a couple dependencies
14316.72 -> so let's jump back to our terminal and
we're gonna install our dependencies so
14324.399 -> "npm i apollo -server-micro micro" course save
14337.279 -> and we're installing the latest
version of Apollo Server Micro
14342.56 -> So this is going to install the new Apollo
Server the Apollo 3. alright so let's jump back
14352.16 -> So the first thing we're gonna do is we're
gonna import our dependencies so let's
14359.279 -> import CORS from micro-cors and then
14369.04 -> import gql and ApolloServer from
apollo-server-micro alright so next we can
14392 -> create our typedef actually so let's create
our typedef so type that's equals gql
14405.6 -> oops and here okay so let's do some simple
GraphQL model so I'm just gonna call it
14415.12 -> I'm just gonna call I'm just gonna make a
type called book so book will have a title and
14426.399 -> a book also has an author property
14431.04 -> and then I'm just going to create a
simple type to query all the books
14438.319 -> books and book returns an array of it's a books
return ray of book alright so that's our typedef
14448.16 -> so next let's create a resolver
for this okay so resolvers
14458 -> and here query and then books and we can
14471.52 -> okay so we have to return something alright so
let's so let's create a static array since we're
14481.68 -> not we're not connected to a database so we're
just gonna create an array with some objects
14493.84 -> okay so title
14500.239 -> uh what are some good books I'm just gonna
use the the one they have in Apollo website
14514.16 -> just some random books alright and
title for the next book city of glass
14527.12 -> alright author
14538.239 -> okay awesome and let's just oops return
books okay perfect alright so we got
14552.08 -> we got that figured out we got our resolver
oh okay so let's also do our course
14568.8 -> yeah I'm not really using semicolons and this
one alright okay so next let's create our Apollo
14580.08 -> server and we're gonna make a new ApolloServer and
put our type defs right there and we're going to
14591.68 -> put our resolvers right there we can do a context
let's do a contacts and contact is just a function
14607.84 -> and well we're not returning anything
but let's just do it anyways and then
14618.319 -> we're gonna have introspection true and you
can also enable the playground so playground
14633.84 -> true alright okay
14641.12 -> alright so next what we can do we're gonna
have our servers to start so we're just gonna
14654.399 -> start I can't spell today server dot
start so we're defining a variable and
14664.56 -> we're putting the start function in there
now we're gonna see why we need to do that
14671.439 -> it's because we need we need to wrap our Apollo
server to course and that's like the only way
14681.199 -> to make the polysover micro an Apollo 3 to
work with next alright so we can do export
14691.76 -> default and wrap our we're going to wrap the
whole export into the course function and that's
14702.479 -> why we bought in course at the micro course
alright so here we can create a async function
14715.359 -> and
14718 -> it takes a request and a
response just like a normal
14723.439 -> just like a normal Next.js API layer function
handler API tabular and then what we can do we can
14731.439 -> check if the request method
is equals equals option or not
14741.04 -> because we only want to process post requests
technically so if it is then end the request here
14754.239 -> return false
14758.08 -> if not move on and then await
the Apollo server to start
14769.04 -> oh I don't think we need yeah since we already
defined it like that so we don't really need
14777.359 -> to put the parentheses there and then await
apolloServer.create handler right there and
14794.8 -> let's put our path and this path has to match
your API path so we're going to go api/graphql
14808.08 -> and we return our request requests and response
object and that's about it alright let's save it
14822.239 -> and let's try to run our application back
14825.439 -> in the terminal let's try to run
our application with npm run dev
14833.6 -> okay now let's visit in our browser
so we're gonna go to api/graphql aha
14844.319 -> so looks like it's working so let's try
to query our server and there is an error
14853.04 -> alright so let's try to figure out what went
wrong and looks like we forgot to turn off
14865.84 -> we forgot to turn off the body parser from
Next since we're using since we're using
14875.52 -> Apollo server micro we don't need the body
parser so body parser and false set it to false
14889.6 -> alright so we run the application and let's
go back here and okay now it's working
14903.04 -> okay so books title author let's
run it and it's running it's working
14915.359 -> alright
14919.359 -> okay so we're back here in our code so the next
thing we're going to do is we're going to connect
14925.439 -> to a database and pull the book data from our
database to do so we're going to use our favorite
14932.319 -> database Fauna okay so let's hop back into my
browser here and we're gonna go to fauna.com
14942 -> and to get started it's it's completely free to
get started you know you just have to sign up
14947.52 -> for an account and you don't really need a credit
card so it's it's super simple so I'm just going
14954.399 -> to log into my Fauna dashboard and I am going to
create a new database alright so we gotta give our
14962.239 -> database a name I'm just gonna call it book store
2 because I already created a bookstore earlier
14970.96 -> alright and then you can select the region
group and this specifies where your data is
14978.72 -> located so I'm gonna I'm gonna say
classic and create and there you have it
14986.64 -> so this is our our database and here we can create
a new collection so the collections are like
14996.399 -> the tables if you're if you're coming for a
SQL background a collection is a table yeah
15005.04 -> so let's create a table called book collection
called book and hit save alright and a new book
15017.359 -> collection is created now we can add document to
our collection and as you can see it's really easy
15026.56 -> to insert document it just uses JavaScript syntax
so we can pretty much just copy these things
15034.72 -> and save them and they'll show
up let's create the other one
15046.239 -> save there you go we got both of our documents
and there okay so next thing what we have to do
15054.96 -> we have to install the Fauna DB driver so
let's install that I can get rid of this
15063.199 -> save it go back to my terminal install save
and let's wait for this to get installed
15078.08 -> okay so we got our driver installed now
what we need to do is we have to generate
15084.72 -> a new Fauna secret so that our client application
our Next.js application can connect to our Fauna
15093.52 -> database alright so let's go ahead and do that
okay so I'm just going to go back to my browser
15100.8 -> and in my Fauna dashboard here in my bookstore
to database we're gonna select security and here
15111.439 -> I'm gonna select new key and I'm gonna generate an
admin level key now in production you should never
15120 -> generate an admin level key you should only use an
admin key in your pipeline in your ci cd pipeline
15128.88 -> so you can you can take a look at the Fauna blogs
for for some of the best practices that we have
15135.52 -> around authentication keys and securities and so
on and so forth however for this there's a funnel
15145.279 -> blog right there okay so you can check this out
check this blog site out for best practices and
15152.96 -> whatnot however for this demo application
we're just gonna use the admin role okay so
15160.56 -> let's generate a key let's name our key next app
and I'm gonna hit save and a new key is generated
15171.92 -> so I'm just gonna copy this go back to my
code over here and here we're gonna create
15180.8 -> a couple new environment variables so we're gonna
create a dot env file and I'm gonna call it Fauna
15189.439 -> secret and copy paste that also for our local
environment we can create another one env.local
15202.56 -> copy paste that there alright okay
so let's hop back into our graphql.js
15210.239 -> file now what we are going to do is
we are going to create a new client
15217.279 -> for our Fauna so we're going to create a
new client to connect to the fonda database
15224 -> and query some data from there to do so we
first need to import the client from Fauna
15234.64 -> and then we create a new client
so we just create const client new
15242.64 -> client and here we have
we're going to have to pass
15246.319 -> in the secret and this is the secret that
we just created so process.env.fauna_secret
15256.72 -> and the domain at the domain can be db.fauna.com
15264.479 -> there you go and now using the client we are going
to query the database now here in our resolver we
15275.04 -> can just get rid of this go to async function
there you go alright okay so const response
15290.88 -> we're gonna say await client dot query and
inside this query function we put our query
15304.64 -> to interact with Fauna we use a query language
called Fauna query language or FQL in short it
15311.439 -> is very similar to JavaScript and based on
a functional programming paradigm it allows
15316.72 -> for complex precise manipulation and retrieval of
data stored within Fauna okay so let's take a look
15324.64 -> at how we can use FQL to query our database
by the way if you want to learn more about FQL
15331.76 -> just visit the official
documentation site for Fauna
15335.6 -> and a good place to start learning FQL would be
the FQL cheat sheet so take a look at that as well
15346.319 -> okay so back here in the code and I just realized
there is a typo in here so it's not going to be
15352.72 -> Fauna db it's just going to be Fauna alright
so let's fix that alright so back here and the
15359.68 -> query let's write our Fauna FQL query so I'm gonna
use a map function and bring in this map function
15371.439 -> alright so a map function in Fauna is very similar
to a JavaScript map function the type of map
15380 -> function you use to simplify your arrays alright
so within the map function we're gonna use the
15385.359 -> paginate function so this will paginate the list
of documents that we get back from Fauna and then
15393.6 -> we're gonna use documents and I'm gonna use the
documents function from the library and collection
15405.6 -> and name of the collection okay so let's
bring in the collection here as well
15412.96 -> right okay looking good and then finally
we're gonna use a lambda function
15420 -> and by the way lambdas are similar lambdas
are pretty much like the arrow functions in
15427.279 -> FQL and we're going to use the
lambda function just to define
15432.96 -> just to define like whatever we're getting back
from the paginate function and to return it
15439.52 -> and we also use a get function to get the data
from there alright so let's console.log this
15456.08 -> okay so this here is pretty much your FQL query
15462.64 -> okay alright so let's test this out so let's
go back to our browser let's query this
15472.88 -> and return null and we can see that our
console log it is returning some data
15482.72 -> so let's map this data and return them
as an array okay so here what I can do
15494.159 -> let's define a new variable and response.data.map
15505.439 -> item and we are going to get the
item dot data back okay and return
15519.359 -> and return
15522.319 -> the yeah box don't really need that we
don't also need this anymore so let's save
15531.92 -> and try it here and there you go now
we're getting the data from the database
15538.96 -> awesome okay so next let's deploy our application
15547.279 -> okay now let's go ahead and deploy our application
and the easiest way to deploy the application
15554.239 -> is to Vercel CLI so I'm going to say I'm going
to npx vercel --prod it's going to go to prod
15567.68 -> and depending on your internet speed it's gonna
take a few few minutes or a few seconds all right
15585.76 -> deploying you're gonna get a URL so I can
just go to the url it's done so I can go
15596.56 -> API GraphQL it takes me back here okay so I can
just copy this url come back to Apollo Studio
15607.6 -> and run a quarry just to test everything is
working and there you go everything is working
15616 -> as expected now I can also go to vercel.com and
I can kind of take a look at my logs and if we
15627.68 -> go to function logs and this is our GraphQL
API it turned it into a serverless function
15640.96 -> Hey I hope you enjoyed that video if you
have any feedback or if you just want to
15645.439 -> say hi feel free to do so my social media
links should be in the description below and
15651.92 -> other than that I will see you
next time and have a good day!
15668.88 -> Hello Next.js audience welcome to this great
session where we're going to talk about unlocking
15674.96 -> composable commerce with Next.js we've got
great content lined up for you where we're
15679.76 -> going to talk about the good the great and
the ugly of doing headless implementations.
15687.359 -> We're going to talk a lot about composable
commerce and the definition of composable
15691.52 -> commas for us is really revolves around
greater flexibility it's all about creating
15696.479 -> differentiated shopping experiences anywhere with
a powerful commerce engine on the back end from a
15703.6 -> quick introduction standpoint my name is Sachin
Wadhawan I'm the vice president of technology
15707.68 -> partnerships here at BigCommerce I oversee our B2B
headless and back office strategy partner strategy
15715.359 -> for BigCommerce here and very excited to have my
co-presenter here George joining us George please
15722.8 -> introduce yourself as well great thanks sachin yes
I'm George Fitzgibbons I'm a senior sales engineer
15728.239 -> here at BigCommerce I get the opportunity to work
with our prospects from a technical perspective
15732.96 -> but also operational so get really in the weeds
as far as making sure things work for everybody
15739.12 -> developers business marketing all included
awesome alright so from an agenda standpoint
15745.76 -> we've keep we're keeping it very simple we're
going to talk very quickly about industry trends
15750.159 -> I'm going to give a quick overview of the
open SAAS platform and what that means to us
15755.04 -> we're going to go into some good grid and the
ugly and then I'm going to pass it over to George
15759.439 -> who's going to talk about value of open SAAS for
developers and also do a next year's demonstration
15764.08 -> I think that's the part you guys are going to
be most excited about alright so starting with
15768.72 -> pretty slides and all I want you to take away from
this research that was done by idc is that the
15776.88 -> non-headless implementations are declining
and they're going to continue to decline over
15781.6 -> the next couple of years and what's been gaining
traction is really the hybrid headless platforms
15787.12 -> that offer both the out-of-the-box front-end
functionality as well as freedom of choice
15792.64 -> on how you want to build your headless stores uh
in contrast to that what Gartner has been saying
15800 -> in that by 2023 Gartner predicts that
organizations will have adopted a composable
15805.6 -> approach which will outpace competition by 80 in
the speed of new feature implementation so we're
15812 -> definitely seeing the industry kind of going in
that headless headless commerce space now we all
15819.76 -> know that monolith platforms have been declining
and being replaced by modular solutions and
15825.92 -> what these modular solutions are providing
are fast performance flexible uh capabilities
15833.92 -> uh they're they're suited for any digital channel
they're more open and we'll talk a lot about open
15838.96 -> SAAS they're very focused on experience versus
a consumer experience versus product experience
15845.04 -> they're cost effective and of course
they are leveraging the microservices
15849.52 -> architecture and we'll talk about that as well now
when you think about eCommerce technology spectrum
15855.12 -> right you've got open source on left-hand side
so think about magentos of the world where it's
15860.159 -> custom it's on-premise it tends to provide you the
most flexibility on the right-hand side you've got
15865.92 -> cloud-based solutions SAAS solutions so think shop
files of the like that can tend to be restricted
15872 -> in what you can do with that platform or or not
think about Bitcoin sits right in the center
15877.6 -> there and we coined that term open sat so you get
advantages of both open source and cloud-based now
15884.479 -> peeling the onion a little bit later furthermore
when you think about what is this headless
15890.08 -> commerce platform or open SAAS platform of course
you've got the presentation layer at the top
15895.199 -> right this is where you're going to build those
Next.js storefronts and and create the amazing
15900.479 -> beautiful compelling user experiences from the
from the front end but then you've got the core
15907.68 -> commerce capabilities right and this is
where the complexity of commerce comes in
15911.6 -> around merchandising and and and promotions around
product catalog around data management customer
15917.92 -> management cart and checkout management and to
add on top of that this platform also needs to
15924.64 -> integrate with other systems that the business
or the merchant that you're working with might
15929.68 -> be using like erps or order management systems
or pims right if you peel the layer even further
15936.88 -> right you've got you know even more complexity
in each of these commerce domains so within
15942.8 -> product catalog you've got price list you've got
brands that you've got a you've got to figure
15947.359 -> out which in within payments and tax you've
got tax classes and you've got tax providers
15953.279 -> all of this complexity when you're leveraging
uh open SAAS platform all of this complexity
15958.72 -> is something that you don't have to deal with you
know as a developer while you're building and and
15963.52 -> growing and managing the front end layer now you
want to make sure that the open SAAS platform also
15971.279 -> is leveraging modern SAAS structure right so it's
built with growth in mind it's built with scale in
15977.76 -> mind so as your implementations and your customers
continue to grow in their uh growth journey they
15984.399 -> can continue to stay on that on that platform
now we truly believe in in mark architecture we
15991.279 -> are part of a member of the mock alliance and
as you can see on the screen many of the other
15996.479 -> players in this market that have also uh you
know joined the market line so it's a great
16001.439 -> great movement you know towards bringing
success towards headless implementations
16007.199 -> alright so let's dive into the good the great
and the ugly on the good side I've already talked
16012 -> about open SAAS right some of the bullet points
under open says the benefits of open SAAS that
16018.239 -> you as the developer community and
the nexus community can expect are
16022.159 -> lower total cost of ownership for your merchants
and and for you you don't have to worry about
16027.04 -> upgrades and availability so the platform scales
easy to upgrade there are no uh disadvantages or
16033.84 -> or hassles around maintenance of the
platform we take care of all of that
16037.84 -> and then on top of that you get 24/7 global
customer support of course the platform needs to
16043.359 -> be scalable that's the good part and as developers
we need to make sure that as you are customizing
16049.359 -> and and creating unique feature set on behalf
of your customers you want to ensure that your
16055.12 -> platform scales and it's flexible and nimble
to support those those capabilities you want to
16061.279 -> make sure that the open SAAS platform comes with
comprehensive partner ecosystem right it should
16066.159 -> have pre-built integration so you don't have to
it should have best-in-class choices for your
16072 -> merchants in every category right so the platform
should not force your customers or your merchants
16077.84 -> to pick one solution only right it should provide
that freedom of choice and then it should also
16082.56 -> enable easy upgrade path for the installed
apps so from a merchant experience when they do
16088.56 -> add those add-on solutions to their store
right it should be easy for them to leverage
16094.08 -> new features from those app solutions that are
relevant to that customer right you also want to
16099.68 -> make sure your open SAAS platform is innovative
right and it's keeping up and staying on top of
16105.92 -> the latest innovation so again you don't have
to right so think about omni-channels so what
16111.439 -> how are businesses selling through tick tock
through facebook through instagram you want to
16116.479 -> make sure that the platform supports that what
about buy now pay later what about buy online
16121.279 -> pickup and store what about 3d ar vr how about SMS
marketing which is getting a lot of traction right
16127.76 -> so this is the good part of having an open SAAS
platform that the platform is ensuring that it
16134.479 -> offers features and capabilities in all the latest
and greatest innovation now payments gets complex
16142 -> really fast right so think about does the platform
provide the flexibility of the payment gateway the
16148.72 -> payment methods the payment types that you want
integrations to so think about Stripe think about
16155.68 -> chase think about klarna right the platform
already has should have those integrations
16160.64 -> pre-baked in so you don't have to worry about
how does your store enable these payment gateways
16167.04 -> right similarly I talked about omni-channel
so what if your customers and merchants
16172 -> want to list their products on wish on Walmart on
amazon do you have to worry about how to create
16179.279 -> and integrate into those channels or the good part
is that you should rely on your open SAAS platform
16185.68 -> to already have those integrations built in and
maintained over time now I talked about a few
16193.68 -> of the partner ecosystem but this is just a quick
flash of the most common you know categories where
16200.96 -> the these app solutions are going to be really
relevant right so we already talked about
16204.399 -> payments but think about shipping think about
fraud think about email marketing point of sale
16209.359 -> and you can see hopefully you recognize
best-in-class solutions available here
16214.08 -> that are instantly available to you from the open
SAAS commerce platform alright on the great part
16222.479 -> wouldn't it be nice if this great platform was
also developer-led wouldn't it be nice if it
16228.159 -> offered unlimited APIs would it be nice if it
offered really fast site performance and had
16234.239 -> globalization capabilities in case you need
to build stores in different languages and
16239.04 -> just different currencies and would it
be nice if it just came mobile optimized
16244.159 -> out of the box right so these are all the benefits
that make even that open SAAS strategy and vision
16251.439 -> you know greater for especially for for the
developer community now on the ugly side
16257.359 -> right so three categories that we see and
the reason we're calling it ugly it's really
16261.92 -> these are some of the areas where we see that
our agencies and our developer community kind of
16266.72 -> get stuck or these are the gotchas right
so when you're doing a headless build
16271.279 -> from a payment security standpoint you've got
to think about pci compliance are you going to
16274.88 -> manage that or is the merchant going to own
pci compliance right as your business grows
16280.8 -> and you're getting more phishing and ddos attacks
who manages that right do you need global payment
16286.72 -> support if you're launching into different
countries do you have the relationship with the
16291.279 -> banking companies and banking institutions in that
region in that country to be able to support multi
16297.52 -> currency what about digital wallets what if your
customers want you to enable apple pay or chase
16303.199 -> pay on their stores how easy it is for you to do
that and and and how you how do you do that right
16309.359 -> from a marketing site right you can create amazing
beautiful compelling storefronts but what happens
16315.76 -> to those you know visitors that you attract how do
they convert into paid customers right discounts
16321.84 -> and promotions can get very complicated you need
segmentation and you need notification emails
16328.239 -> to be able to to to manage that right I talked
a lot about integrations you've got single click
16333.84 -> apps that we that we that we looked at you want
to make sure that you are not having to work with
16339.279 -> each of those app providers to build a custom
one-click single click you know integration
16345.6 -> as you start to put all the pieces
together data gets complex right who's
16349.92 -> who has to deal with transforming the data and
managing the sync between different data sources
16355.359 -> and last but not least of course you know are your
stores you know google optimized right from an amp
16362.64 -> perspective right so these are all some of the
most common scenarios we have seen where where
16368.64 -> the developers can can content tend to get stuck
or have challenges as they are doing headless
16374.88 -> uh implementations so with that I'm going to pass
it over to George to talk about value of open SAAS
16381.52 -> for developers great thanks sachin so before we
get into the nitty-gritty of this list I generally
16387.92 -> have the same conversation when I'm talking about
open SAAS to an engineering team how I describe
16393.199 -> it is anybody could connect to a tax provider
but does any engineer want to work with taxes
16400.24 -> I don't know if there's any tax specialists
out here but you know those are the kind of
16404.879 -> tasks where it needs to get done but there isn't
necessarily a gain for the business and so when
16410.719 -> we're talking about open SAAS we're talking about
the flexibility but also the SAAS perspective
16416.48 -> and when I'm thinking about SAAS I'm thinking
plug and play we have there's more than a handful
16423.6 -> of best-in-class tax providers that are keeping
up with all the newest laws north dakota changes
16429.439 -> the tax providers keep up to date being able to
plug and play and have that connected to your
16434.959 -> cart and checkout out of the box in a task that
your engineering team doesn't have to worry about
16440 -> is really the power and beauty of open SAAS so
really to start getting into it a bit more and
16446.24 -> we're going to walk through all these in some
tangible examples but our theory is adding
16452.32 -> out-of-the-box capabilities and functionality
to best-in-class APIs and documentations
16457.84 -> is really taking the idea of headless and
decoupled front-ends to the next level
16463.52 -> taking it so you are able to focus on core
business in executing on commerce with
16470.879 -> flexible easy to use core functionality so with
powerful APIs everything can be built but not
16479.199 -> everything needs to be built you don't necessarily
need to own taxes you don't necessarily need
16484.719 -> to own shipping you don't necessarily need to
own checkout those are just a couple examples
16491.119 -> BigCommerce offers a robust admin so when that
marketing team wants to run a promotion and you
16496.639 -> tell them you need to write a script you're not
going to you know alienate business and developers
16502 -> you're going to really unite and giving them the
tools they need but also you're going to have
16506.32 -> everything you need from an API developer's
perspective so the combination of the two
16513.359 -> checkouts is a great example for us checkouts
can be hard we have over 70,000 merchants using
16520.24 -> our checkout we've gone ahead and open source that
checkout so you can bring that wherever you want
16526.639 -> whether you host it with us and we take on full
pci compliance or you need to heavily customize
16532.24 -> it and do whatever you want with it that is a
resource that we're giving to the community that
16537.359 -> you can take advantage of and although by the way
it's tied in with our taxes tied in with shipping
16542.639 -> and really easy to customize and we'll go through
that and so would it at the end of the day when
16549.76 -> we're talking about open SAAS own what you
need to own whatever is core to your business
16555.439 -> your unique problems your unique solutions
that you as engineers solve those are great
16561.68 -> that's what makes the business special and
what brings value but the core commerce is a
16567.199 -> solved problem we have solutions we have domain
expertise and we can bring that to the table
16574.24 -> so that again you can focus on your business
problems we can take care of the commerce problems
16580.799 -> so I'm gonna hop in to a couple demo examples
now I'm gonna take the screen from your sachet
16588.561 -> so quickly just to orient before
we start jumping all around
16592.719 -> what we really focused around in this
problem statement is somewhat of a
16597.199 -> common problem in a problem where business
pro business and engineering need to solve
16604.48 -> it's an example of subscriptions subscriptions
are something that is core to businesses
16612.24 -> selling products is more in the commerce front
I'll give you an example you need to list products
16619.199 -> you need a mark you need to merchandise the
products you need to set prices organize change
16626.24 -> orders of products you need to add in promotions
but the end of the day somebody's buying a product
16632.561 -> once that product is bought that's where core
logic or core business rules come into play with
16638.32 -> subscriptions i.e how am I enrolling the user how
am I handling it once a user buys say a physical
16645.52 -> product and a subscription product and all the
complexity that can come with subscriptions
16651.039 -> in the general example anything that comes into
play with unique business logic so I'm in the back
16658.32 -> end of big up BigCommerce and so this is really
a SAAS component so the analogy that I was given
16665.039 -> earlier again as a developer you don't want to get
into building out uis of how you set up products
16673.199 -> you want to give tools for the right job business
users are able to come in here set up products
16680.4 -> build out kits build out bundles all those core
commerce things that you see across the web
16687.279 -> very common we've solved that they're all baked
into an easy use admin and so when we're talking
16694.24 -> about Next.js and the front end just to call
out generally BigCommerce is front-end agnostic
16702.639 -> we call them storefronts can have multiple
storefronts i.e what we describe as channels
16709.92 -> so in this example we're really going to
blend in the open and beauty of Next.js
16716.561 -> and the great framework with the SAAS in
this example so just walking through this
16723.439 -> site it's very basic just to call out
you have a basic subscription product
16729.439 -> razors it could be food could be perishable goods
you know any of those common examples of refill
16736.561 -> products that are getting automated uh weekly
they may have different delivery dates you know
16741.439 -> all the complexity that can come with adding a
subscription and maintaining that subscription
16747.119 -> but from this simple example I have this Next.js
framework powering it all via the BigCommerce
16754.48 -> backend when I'm going to interact with the cart
and checkout this falls back into the SAAS domain
16762.879 -> things like taxes things like shipping things
like promotions can all be set up and enabled
16769.6 -> via the admin and respected by the API and
really where some of the more magic comes in is
16776.4 -> when you're going to a checkout I always call this
out when you're talking headless checkout is a
16783.439 -> is a big thing to always think about because
again you can build anything you want with APIs
16789.039 -> but checkouts you of course can build but there's
compliance and security risks that come with that
16795.52 -> so by us bringing a checkout to the table can
add a ton of value you can really focus on that
16801.6 -> next front end that user experience but at
the end of the day you're having a fully
16806.879 -> optimized checkout and just to call out check
out our github our checkouts there that's what
16813.359 -> I'm going to be leveraging in the example as
I said we can host it or you can take this
16819.359 -> and host it wherever you want and of course fully
customize this but taking that step to check out
16828.08 -> what we'll see is going from the
next framework to posted checkout
16834.879 -> so I'm going to march through this
checkout and call it a couple things
16839.279 -> so first BigCommerce can handle all the
account creation if you have your own uh
16846.16 -> identity management platform you certainly
support single sign-on and things like that
16851.039 -> but again it's another service that's out of
the box you can take advantage of from there
16856.24 -> calling out mobile payments I had the google the
google pay we'll talk about that in more detail
16862.16 -> but core things every checkout is going to
need the ability to collect shipping from there
16869.199 -> shipping methods just to go back to the admin and
show some of that functionality so similar analogy
16876.719 -> to taxes you of course could go out and connect to
any shipping provider get those rates returned and
16883.68 -> really you know own the entire checkout but when
you have the power of open SAAS those are things
16890.32 -> you can just take care of in the back end think
about setting up shipping zones tying in carriers
16895.92 -> those are all turnkey functionality you want
to try new markets try new carriers you're not
16901.92 -> burning by okay now I have to build that out you
can really take advantage of some of this stuff
16908 -> and so I have free shipping going from there
billing is the other big call out so I'm
16914.48 -> connected with Stripe and Stripe is gonna
be really a call out in this flow as I'm
16919.68 -> gonna enroll myself in a starter package one ten
dollars a month I'm gonna get razer shipped to me
16926.719 -> that's really a core business thing rules that
you may want to layer in your own logic again
16933.279 -> it's not necessarily affecting the front end I'm
able to set it up use everything out of the box
16939.119 -> I'm abstracting this out and that's really we're
going to get into some of the Next.js examples too
16945.199 -> and so I for this sake I'm just going to
do the BigCommerce uh fake credit card so
16951.279 -> similar to Stripe ecommerce is a fake credit
card you can use instead of four two four two
16957.52 -> it's four one one one one but I'm
going to kick off this checkout
16967.279 -> and so from here we're going to transition to
talking more in the weeds in the code so what
16973.52 -> this site the Next.js site it's all running this
Next.js boilerplate starter so I have all my code
16982.24 -> front end end encapsulated in one directory
this has a huge advantage just from management
16988.561 -> I have everything in one place I can reuse
components reuse integrations all in this
16994.48 -> centralized location so again what we're focusing
on here is a use case of basic subscriptions
17003.68 -> so I'm going to kick off the flow of I have an
order now within BigCommerce our API is completely
17010.719 -> observable meaning when an order happens pass that
downstream or pass that to my Next.js layer in the
17019.84 -> Next.js layer I'm going to do something with it
when I say we abstract basically you're able to
17026.561 -> do whatever you want in the front end use take
advantage out of the box marketing can do their
17031.76 -> thing you guys as developers can own that logic
and so one thing I really love about Next.js
17038.719 -> is the serverless functions so I
was a huge fan of service functions
17044.24 -> when using them in Next.js it really took them
for a next level to me I had my entire front end
17050.08 -> my entire back end as I was saying encapsulated
into this one layer where I can control everything
17056.16 -> so when I kick off this order I'm going
to send the order to my Next.js function
17061.039 -> and then I'm going to enroll this user in a
subscription so from there I kick this off
17072.08 -> there's a couple important call-outs so this may
seem very subtle but this is a very SAAS component
17081.199 -> you may have scoped out a beautiful site
you may scope out all your business logic
17086.16 -> but one thing that's always at the tail end of
the list is notification emails it's very subtle
17091.84 -> but BigCommerce has a full notification system
of course you could use the aws sqs set up a
17098.16 -> notification triggers all that but we're talking
about weeks or days of work just saving because
17104 -> it's out of the box so I've kicked off that
order and now that order is getting pinged to
17110.24 -> my subscription layer from there just to call out
a little bit of order operation about tangibly how
17116.639 -> something like this could work walking through
the function I'm getting order data from there
17125.76 -> what I'm going to do with it is I want to
say hey BigCommerce give me every information
17131.76 -> about the order BigCommerce API gives you line
level data so this could be a great example of
17138.24 -> some orders are physical products one time some
are subscription you're able to do essentially
17145.119 -> what we described as mixed carts so in this
basic example I look and say hey are any of
17151.039 -> the products in the order subscription products
if they are let's enroll them in a subscription
17159.039 -> one big call out with our API in its openness is
this idea of a transaction id so we take care of
17166.48 -> sending data to Stripe and what I mean take care
of it that's another task that you can easily do
17172.08 -> in the dashboard so whether you're switching from
Stripe to adn to another payment gateway or you
17178.24 -> have multiple payment gateways because you're in
south america you're in emea you need to manage
17184.48 -> all those different uh currencies with different
payment gateways good easy to set up we have over
17190.561 -> 70 pre-integrated payment gateways but in the
example of Stripe really the task is as simple as
17198.08 -> connecting with your Stripe account from there
you have the granular settings I turned on google
17202.719 -> pay really easy to turn on one thing that you're
going to want to do if you're doing a flow like
17207.84 -> subscriptions is you're going to want to store
the credit card get we are not storing credit
17212.959 -> cards we're storing it with Stripe handling
that very securely with the payment tokens
17218.799 -> so all that work that would go into building out
a direct integration or even using Stripe elements
17225.119 -> you've taken a smallish medium developer test
and turned it into a couple pushes of a button
17233.439 -> so really the advantage of turning Stripe on
vaulting credit cards when I want to interact
17244.08 -> with that we aren't closing it off you are still
able to get to your transaction id that Stripe
17250.561 -> generates that's going to be key if you want to
do anything with the transaction after it happens
17256.32 -> in this case we're going to give you the
transaction id back and what you're going to
17261.119 -> then do is okay let me get that information about
the customer and the payment method from Stripe
17267.6 -> and from there now I have everything I need to say
enter this user into my standard subscription you
17274 -> can pass in more granular information of oh he
signed up for a free box for the first time so
17280.24 -> don't charge the first month charge starting
next month Stripe has a great flexible API
17285.92 -> again you're able to take advantage of Stripes
flexibility our flexibility and our openness we
17292 -> aren't a closed ecosystem just because you use our
checkout doesn't mean you can't access the data
17297.92 -> you can and that really gets to the idea of you're
able to own your business logic so at the end of
17305.199 -> the day all within the same Next.js layer I
have the ability to build my own front end
17312.799 -> interact with all the data give business users
a powerful admin but when it comes time to okay
17320.08 -> BigCommerce you've powered all my core needs as
far as selling but I'm gonna take over and that's
17326.4 -> really this API layer of okay subscriptions
is core to me so I'm gonna take over great
17332.639 -> we'll give you all everything you need user gets
enrolled and at the end of the day you're managing
17339.279 -> with the best in breed tools tools like Stripe
BigCommerce merge together to give developers
17346.32 -> powerful out of the box dueling just enough
structure so you're not rebuilding everything you
17352.561 -> have guard rails but a ton of flexibility you're
not sacrificing anything by getting SAAS value
17363.6 -> Awesome that was great George thank you so much
17366.799 -> for the demonstration again our goal here was
really to give you an overview of the open SAAS
17373.439 -> commerce platform and if uh this content piqued
your interest you have to go nowhere other than
17379.119 -> next year's site we've got a starter kit with with
Vercel go check it out try us out start a trial
17385.84 -> play around with with Vercel next and
and BigCommerce and if you have questions
17390.32 -> reach out to us thanks for joining us have
a great rest of the conference bye everyone!
17477.431 -> eCommerce is driving one of the largest and
fastest global economic transformations in human
17484.32 -> history BigCommerce is a software-as-a-service
platform that powers 60,000 of the world's most
17490.639 -> interesting and beautiful e-commerce stores we
provide everything that a business needs to create
17497.76 -> manage and grow an online store from the design
of that store to the infusion of product catalog
17504 -> the checkout and all of the tools that help you
market and grow our mission ultimately is to help
17511.199 -> our customers turn their long-term digital
transformation into competitive advantage.
Source: https://www.youtube.com/watch?v=PWi-49ODKAs