- Oh, Next.js Conf is starting. Let me message the Next.js
community on Discord to let them know that I'm gonna
need a little bit more time. See, we have a lot of big
announcements planned for today, but before I get started, let me tell you a
bit about how Next.js is helping everybody
build a better web. Back when the web got started, it consisted mostly
of simple documents that could however
be transmitted and rendered very efficiently. The web was mostly
static and plain, but that didn't last very long. As time went by, the web
became a lot more dynamic and interactive and animated
and user personalized. Thanks to the
power of JavaScript and the introduction of
new CSS capabilities. Companies like Facebook
created groundbreaking new web experiences on this web to power products like
chat and newsfeed. Lines of code started
flowing from the backend and into the frontend, where JavaScript with primitives
like functions and classes, it just wasn't quite
ready to harness and control these emerging needs of frontend engineers
and product designers. The React component
was then invented and open sourced by Facebook. It became the building
block to organize and build this new kind of web experience. Almost exactly four
years ago today, Next.js was introduced on the
cusp of the React revolution. See, React was invented
to build components but at the time, we wanted
to build full pages. We didn't wanna mess around
with libraries and bundlers and configuration. We wanted an entire solution. We wanted a framework
and we wanted a platform, and we thought that
that was a very big gap that needed filling. Our focus was then to
create the best way to develop, preview and
ship pages to the open web. Next.js pages are
unlike any other because they give
you, the developer, complete control over the
entire frontend experience. It's never been a better time
to be a frontend developer. As the API economy matures, you as Next.js engineer,
have a tremendous advantage. You get to pick and build
on top of any backend, whether it's been pre-built or whether it's been
built by your own teams, either way, you
get to prioritize what's truly important
for your business, great performance, rapid
feature development, and ultimately,
the ability to ship rich and delightful
user experiences. Next.js was the
first React framework to focus on server rendering. Prioritizing search engine
placement and user experience. Mostly by putting computation
that was expensive and putting it in the cloud
instead of on your device slowing it down and
draining your battery. Over time, Next.js only
became more powerful, with features like AMP pages, we doubled down on search
engine optimization and mobile readiness. For larger teams, TypeScript
support was a game changer. With TypeScript,
you get to move fast but you don't introduce
new bugs as frequently. Finally, as of Next.js 9, we became the first truly hybrid
framework with capabilities like static site generation
and serverless functions. We entirely eliminated
the dichotomy between static and dynamic, giving you both
all in one package for you as a developer to
choose on a page-per-page basis. With the React component
as this amazing unit of collaboration combined
with the ability for Next.js to straddle from one page
to one billion pages, we enabled companies like
Apple, TikTok, Twitch, Lyft, Hulu, and Target to reinvent their entire
frontend experiences. What's more, for companies like HashiCorp,
The Washington Post, Airbnb and TripAdvisor. By deploying their
frontends to Vercel, not only did they ship fast but they became faster at
collaborating, iterating, reusing, and ultimately
they were able to stay fast over time, especially as our
world around us changes and new unforeseen
challenges emerge. Above everything else,
with these great companies and with the partnership
of Google and Facebook, and you, our contributors, with more than 1300
unique contributions to our open source project, we built the most exciting and amazing Next.js
release to date. Next.js 10 is available today and you can upgrade
with just one command. As it's always been
our commitment to
you, our developers, we've made it completely
backwards compatible. The first highlight
of today's release is about one of the most
important primitives of the web, the image. The image element was
introduced back in 1995, but has seen very
little evolution since. However, on average,
images will make up 50% of the average webpage size. When left unoptimized, images will hurt your
site's performance, and consequently your user
experience and your conversion. Next.js 10 solves this. Tim will now show you
how easy we've made it for Next.js developers. - Thanks, Guillermo. Our main goal of Next.js
is to improve two things. Developer experience
and user experience. By removing the image
optimization burden
from developers, user experience will
greatly improve. The Google Chrome
team and our community helped make this one of
the biggest optimizations we've ever released. This year, we've
already invested in both developer
experience and performance for all Next.js applications. By focusing on decreasing
the amount of JavaScript the browser has to load, we
introduced over 20 new features yet the JavaScript size of the Next.js core
was reduced by 16%. And the Google
Chrome team helped us introduce a new JavaScript
code splitting strategy, which let companies
see major improvements without any code changes
to our Next.js application. For example, Barnebys
had a 23% decrease in overall application size. And SumUp had a 70% decrease in their largest
JavaScript bundle size. All they had to do
was upgrade Next.js in order to leverage
these optimizations. And we're committed to
keep making these types of enhancement effortless
for developers. While our focus on
improving JavaScript size has paid off, the web
is not all JavaScript, it's also markup and images. Images alone take up 50%
of the total webpage size. Images impact Largest
Contentful Paint, since they're often the
largest physical element when a page loads. Joe will go in depth on this
Web Vital in a few minutes. And half of all images are
over one megabyte in size, which usually means
they aren't optimized. Today, users browse
the web using phones, tablets, and laptops, yet
images are still approached as a one size fits all. It's a problem when sites load
a 2000 by 2000 pixel image, but my phone is only
displaying it in 100 by 100. And 30% of images are outside
of the initial viewport, meaning I'm loading images
that I can't even see, that could have been
lazy loaded as I scroll. And images often don't
have a width and height set causing them to jump around
when they are loaded. This hurts cumulative
layout shift. Another Web Vital
Joe will cover later. Finally, 99.7% of
websites don't use modern image formats like WebP. So images are hard: size,
weight, lazy loading and formats all have to be considered in order to build
performant webpages. As developers we've had to
set up complicated build tools to optimize images, but those tools usually
don't even cover user submitted images
coming from CMS, make it nearly impossible
to optimize all images. This impossible development task inevitably leads to
frustrating user experience. That's why I'm excited to
announce the first two features of Next.js 10, the
Next.js Image Component and Automatic
Image Optimization. So let's start by taking a look at the Next.js Image Component. At its most basic, the
Next.js Image Component is just a drop-in replacement
for the HTML image element, but evolved for the modern web. The Google Chrome team helped
us create this React component to improve page performance by making best
practices the default. When using the Next.js
Image Component, images are automatically
lazy loaded, meaning they're only
rendered when the user is close to seeing the image. And by enforcing
image dimensions, browsers immediately render
the space needed for the image instead of having it
jump in when loaded, this prevents layout shift. And developers can mark images that are in the
initial viewport. Next.js will automatically
preload them, improving Largest Contentful
Paint by up to 50%, that's fast. Even with all of
these improvements, there's still a major
problem, we're still serving that 2000 by 2000 pixel
image to my phone. Today, we're also
solving that problem. The Next.js Image Component
will automatically generate the right sizes through
built-in image optimization. Not only does this serve
users for smaller images while preserving quality. It serves the images in
modern formats like WebP, which is about 30%
smaller than JPEG. Built-in image optimization
also allows Next.js to adopt future image
formats and serve them to browsers that
support those formats. It works with any image source, meaning that even if images come from an external data source
like a CMS, they're optimized. And instead of optimizing
images at build time, Next.js 10 optimizes images on
demand as users request them. This means that unlike
with static site generators and static only solutions, your build times
aren't increased, whether shipping 10 images
or 10 million images. Next.js 10 has made this
impossible development task easy and your users will
inevitably benefit. The new Next.js Image Component and Automatic Image Optimization
are powerful new primitives that massively improve
user experience. The Next.js Image Component
handles automatic lazy loading, pre-loading of images,
correct sizing across devices, and automatically supports
modern image formats. These features work with
images from any data source. I'm looking forward to
seeing how much faster the user experience becomes
with these new primitives. Our team of
contributors believes that if enough developers adopt
the Next.js Image Component, the web as a whole will become
a better and faster place. Later today, Alex Castle
from the Google Chrome team will talk about the
technical challenges that the Next.js Image
Component solves. So be sure to check that out. Now that we've
seen how Next.js 10 makes image optimization easy. Let me show you another feature that shows how great
developer experience creates a great user experience. This year, several businesses
and community members helped me understand
how important
internationalization is. For example, I learned
that 72% of consumers are more likely to
stay on your site if it's been translated. And 55% of consumers
said they would only buy from eCommerce sites in
their native language. So if you plan to go to
market in a different country internationalizing your project
is critical for success. Internationalizing a project
has two main pillars, translations and routing. Many React libraries prepare
applications to be translated, but most of them expect you
to handle routing manually, and generally only work
with one rendering strategy. That's why as part
of Next.js 10, we're releasing built-in support for internationalized routing
and language detection. And we're giving you
a hybrid strategy, so you can choose
between static generation or service at rendering
on a page-by-page basis. This release supports the two
most common routing strategies subpath routing
and domain routing. For both strategies, start
by configuring the locales in the Next.js configuration. A locale is a
standardized identifier, generally made up of a
language and a region separated by a dash. For example, this refers
to the Dutch language and the Netherlands as region. and I can also add this, which refers to
the Dutch language and Belgium as the region. Once your locales
are configured, you can choose between subpath
routing or domain routing. Subpath routing puts
locale in the URL. For example, I can insert locale
into URL like this or this, allowing all language
translations in the same domain. On the other hand, domain
routing enables you to map a locale to
the top level domain. Like this and this. Giving users an
extra local feeling. These language strategies
automatically integrate with Next.js' hybrid static
and dynamic rendering. In addition to the
routing strategies, Next.js 10 has built
in language detection based on the
Accept-Language header which is supported by
all modern browsers. Because Next.js
pre-renders the page markup through static generation
or service at rendering, it will immediately serve the
content to search engines, this helps with search
engine optimization. Next.js also avoids
content duplication by automatically adding
the language attribute on the HTML tag. If your site needs to be global, the internationalized routing and automatic language
detection in Next.js 10 provides you everything you
need to get started today. Guillermo, tell
us what's up next. - That was great, Tim. With Next.js 10 so easily
optimizing your images, whether static or sourced
from a dynamic CMS or API, you'll be seriously improving
your site's performance. With internationalization
support, you'll be reaching more
audiences in more markets. And with that, more users,
more networks and more devices. And frankly, more
challenges to performance. With that in mind,
we decided to solve the ultimate challenge,
staying fast over time. Here's Joe to show
you how Next.js 10 incorporates
performance monitoring as a key part of your workflow. - Thanks, Guillermo. You're right, we've been
measuring performance in the wrong ways or
at the wrong time. Today with Next.js 10, we're fixing that for
all Next.js applications out of the box. Developers all around
the world choose Next.js for its incredible
performance, why? Because to your visitors, performance is
absolutely critical. More than 50% of your visitors
will abandon your page load if it takes more than
three seconds to complete. And for eCommerce, improving
the speed of your page load by just 1/10th of a second can yield 1% increase
in conversion. At Vercel we're obsessed
with performance. This is why Next.js makes
best of breed performance optimizations like
critical CSS extraction, and differential loading for
modern browsers by default, with no configuration
required by the developer. And to sustain the
level of performance your visitors expect
from your application, automated conformance testing becomes a key part of
your developer workflow. Today as part of Next.js 10, we're proud to release
Next.js Analytics, the solution for tracking
performance metrics and making them a key part
of your developer workflow. This means instead
of measuring once, we'll be measuring continuously. Instead of measuring from
just our development device, it'll be from the actual
devices of our visitors. And instead of from
only our country, it will be from the
actual regions that
our visitors are in. Conformance is about
understanding the
entire picture, deeply understanding
our audience, and how our application
performs for them. As developers, we're normally
focused on performance when first implementing or
rebuilding an application but once we ship, it's easy
to lose focus on performance. This is why continuous and
automated conformance testing is so critical. Google in conjunction with the
Web Performance Working Group have come up with the set of
performance metrics to track how users experience the
performance of your website, aptly named Web Vitals. Web Vitals are the metrics that track the
perceived loading speed, responsiveness, and visual
stability of your website. All three essential for your
website's overall health. Perceived loading
speed can be measured by Largest Contentful Paint, or the amount of time it takes
for the page's main elements to be displayed on screen. For example, when I go to
purchase a pair of sneakers, the amount of time that lapses
from me clicking on the link to seeing the
sneakers, their price, and the add to cart button is Largest Contentful
Paint or LCP. Page responsiveness can be
measured by first input delay or the amount of time
that elapses between me clicking on the page and seeing
the reaction of that input. For example, when I
click add to cart, the amount of time it takes
for my cart count to update is First Input Delay, or FID. And finally, visual
stability can be measured by cumulative layout shift, or the measurement of
how often elements move after being displayed
to the user. For example, we've all
had the frustration of trying to tap on a button just to have it move
because an image loaded late on the page,
that's layout shift. The continuous
measurement of Web Vitals from your real users is crucial. It's the only way to
know how your website is performing for your users. This is because the
performance of your website can vary dramatically
from user to user or device to device
and network to network. An emulated test cannot
capture these differences. That's why we had to
create Next.js Analytics, because at the end of the day, it's your users who are
scoring your performance. Every time you deploy
you'll automatically receive actionable performance scoring. Instead of relying on a
one-off lighthouse score that you calculate, start
relying on a real-time score that your users calculate
directly from their Web Vitals. In addition to an overall score, we give you all the tools
necessary to further dissect and improve your
performance by Next.js page, connection speed, device,
region and so much more. Now as developers, we'll never forget our
focus on performance. Today, take the first step
towards developing side-by-side with your users. Visit nextjs.org/analytics
to learn how to enable it in your application right now. Back to you, Guillermo. - Thank you, Joe,
that was great. With Next.js 10 making it so
easy to optimize your images, internationalize your website and ensuring you're fast
every step of the way with Next.js Analytics, we still wanted to give
you one more thing. Today, many of the most
successful Next.js applications are in the eCommerce space. Thousands of new
eCommerce initiatives are spun up every week. Up next, Bel will give you
our all-in-one starter kit for high-performance
eCommerce sites. - Thank you, Guillermo. The pandemic not
only pushed us away from our friends and family but it also put traditional
brick and mortar businesses under extreme pressure. Before the pandemic began, we bought 16% of
our things online. Now, we buy nearly 34%. COVID pushed 10 years
of eCommerce growth
into three months. We expect huge innovation
from stores digitalizing, they have to make up for the
loss of physical experience by moving things online. We already learned from Joe
that a 10th of a second delay can drop conversions by 1%. When shoppers cannot touch,
they demand performance. Next.js 10 solves the problems
of modern eCommerce sites, delivering performance while
reducing developer work and enabling greater
collaboration across product, marketing
and engineering teams. The new Next.js 10 features are powerful new
tools for eCommerce. With the new Next.js
Image Component, your product images
are individually optimized for your shoppers. If your site needs to be global, the internationalized routing and automatic language detection provides everything you
need to get started. And with Next.js Analytics, you can shape your application
based on real user data, instead of basing your decisions on hunches of the loudest
talkers in meetings. But some traditional practices might still hold
eCommerce sites back. For example, traditional
eCommerce monoliths used to be the only
option for businesses, but with their complex
and inflexible structure, they create a single
point of failure. Rapidly changing market
demanded transition to headless eCommerce. Headless eCommerce decouples
the frontend from the backend, empowering teams to focus
on product and frontend, while letting other services handle the business logic
and eCommerce engine. That's why today in
collaboration with BigCommerce we release Next.js Commerce. The all-in-one starter kit for high-performance
eCommerce sites. With a few clicks,
Next.js developers can clone, deploy, and
fully customize it. Start right now at
nextjs.org/commerce. We've studied the best
practices across the web to make Next.js
Commerce, the best option for creating an eCommerce site. We're very grateful
for the insights of our customers and partners. Developers now have
all the source code of a best in class
eCommerce store, fully customizable, and yet
incredibly easy to ship. By removing the constraints of
typical eCommerce platforms, you're free to
market your product in the best way
for your company. Now, let me walk you through
the out of the box features. We take performance
really seriously. We've added all
the best practices to get the highest
lighthouse score. Every page has the
right SEO configuration. This gives you a
competitive advantage by making your
application indexable, searchable and rankable. As we mentioned, all
internationalized routing and automatic language detection is handled by Next.js. Comes enabled by default, work on one application and
become global in seconds. Next.js Commerce is
ready for all devices and specifically optimized for
the mobile user experience. We follow Google's UX
playbook for retail. We've standardized the
building blocks for eCommerce. These components allow
you to build any view basic or advanced
for your store. Themes are easily customizable. For styling, we
picked Tailwind CSS as an utility first framework for rapid customization
of UI components. We've also standardized the
data layer for eCommerce. Models like cart,
wishlist and catalog, get their own hooks
and utilities. We shipped with all the
right data fetching hooks. Thanks to Next.js Preview Mode, you can preview
your product pages and share the
modifications across teams. Get a fast and reliable
live editing experience thanks to Fast Refresh. Just run next dev
in your terminal. Ready for any hosting platform and integrate easily
with any backend. Right now you can deploy
with one click to Vercel integrate seamlessly
with BigCommerce. And all the features you
already know and love like incremental
static regeneration, link pre-fetching and so on. eCommerce is one of the most
important uses of the web. We are proud of this example, and all the advancements
it shows for eCommerce. And we know that the
Next.js community will contribute and together
we can raise the bar for eCommerce sites. Back to you, Guillermo. - Thanks, Bel, that
was miraculous. I can't wait to see the kinds
of great eCommerce sites that people launch
with your starter. 2020 has been a
very unique year. For those of us in tech,
it's been empowering to be enabling the kind
of rapid digitalization that the world needs right now. However, contrasting that,
and in view of the pandemic, injustice, division
and even the wildfires here in the West
Coast and Australia, we are determined to give back. Stay tuned to our Discord for an exclusive
Next.js swag drop. The proceeds of which will
go entirely to these causes. Or checkout nextjs.org/give
for more information. With Next.js 10
we're introducing
incredible new features like image optimization,
internationalization
and analytics. We combined all of them
into Next.js Commerce, our all-in-one starter
kit for eCommerce sites that you can clone
and deploy in seconds. Next.js Conf is just
getting started. With our community, our
partners and our sponsors, we've put together incredible
content that's coming up next. And tomorrow with the
Next.js Career Fair, we're creating incredible
new opportunities for employers and
job seekers alike. We hope Next.js Conf is a
turning point in your projects, your companies and your careers. Let's go build a
better web together.
