Guillermo Rauch

Come see why it's never been a better time to be a frontend developer. The special announcements in this Keynote will immediately change how all Next.js Developers work.

Keynote

Belén Curcio

Solution Architect

Tim Neutkens

Head of Next.js

Joe Haddad

Senior Software Engineer

 Shubhie Panicker

We are a team in Chrome with a mission of enabling web developers to build compelling experiences on the web, where excellent UX & performance is a side-effect of using a well refined tech stack. Given the popularity of React, we are partnering with Next.js and React to bring the power of strong defaults to the React ecosystem, with the goal of providing a tooling foundation for excellent outcomes. This talk covers our journey – how we are working towards this goal, a number of features landing in Next.js and what's coming down the pipeline.

Bringing Excellent UX to the React Ecosystem via Strong Defaults in Next.js

Software Engineer

Houssein Djirdeh

Developer Advocate

Joshua Callender

A quick peek back at Lyft's journey of web infrastructure since I joined in 2015 and what led us to NextJS. We'll pull back the curtain on our new web infrastructure, and talk about how we utilized NextJS. Finally, we'll wrap up with a look at how we migrated over 100 micro-services to this new infrastructure.

Changing Lanes with Lyft

Staff Engineer

Jean-Michel Lemieux

On this panel, senior executives from Vercel, BigCommerce, Shopify, Target, and Hy-Vee come together to discuss trends in online commerce, what’s working and what’s not working. The group will tackle complex issues surrounding mobile, headless e-commerce, and the endless competition for clicks.

Future of Commerce

Sophie Koonin

Find out how one of the UK's fastest-growing banks is using Next.js to power their web apps and internal tooling.

Building a Bank with Next.js: How We Use Next.js at Monzo

Senior Web Engineer

Ahmad Awais

Should this page be static, server-rendered, or should I do it all on the client-side? Maybe I should regenerate the page every sec on the server? Dang! Decisions like these for Next.js beginners are pretty hard. Let Awais help you decide.

CSR, SSR, SSG, ISR and OMG.WTF?BBQ!

VP of DevRel

Nate Stewart

VP of Platform Strategy

Lydia Hallie

Learn how the new Redirects and Rewrites features make it easier to incrementally adopt Next.js, control what kind of content is served based on the incoming request path, and efficiently configure redirects.

Incrementally Adopting Next.js

Michael Novotny

Director of Software Engineering

Tina Fang

Combining the Serverless Services and Next.js Framework, Tencent Online Education team scales to millions and also saving costs by 90%. They use CDN/LRUCache to improve performance and sets up a CI/CD pipeline for automated deployment.

How Tencent Scales to Millions with Serverless Next.js

Senior Product Manager

Alex Castle

A discussion of image-related performance problems that commonly affect Next.js applications, and how the new Next.js Image Component can address those problems for you. I’ll discuss widespread performance issues including non-responsive images, unsized images, lazy loading strategies and resource network priority. For each problem, I’ll describe common solutions, as well as how that issue motivated the design of the Next.js Image Component.

Why Images Hurt Your App's Performance and How The New Image Component Can Help

Brandon Roberts

Figuring out the right balance of collaboration across teams and applications in a codebase is a challenge. Working out the mechanics of building these applications using a monorepo simplifies these challenges. Nx is a next generation suite of build tools. Next.js is state-of-the-art framework for building web applications. This talk is a quick rundown of how Nx can help you maintain multiple Next.js apps, with multiple teams, while sharing components and libraries for consistent user experience.

Collaborative Code with Nx and Next.js

Architect

Ishan Anand

Tune in to hear from developers at Shoe Carnival and Turnkey Vacation Rentals on the lessons learned in using Jamstack and headless for e-commerce, especially on sites with large catalogs, frequent updates, and legacy e-commerce platforms.

Jamstack for E-Commerce at Scale

Simen Skogsrud

Wouldn’t it be nice if you didn’t need to wait? In his talk, Simen shows you how to use Next.js and Sanity.io to collaborate, preview, and publish in real-time while maintaining excellent web vitals.

Why Real Time Matters

CTO & Co-Founder

Rachael Thompson

The Next Big Thing in E-commerce is here, Next Commerce. The teams at Next, Vercel and BigCommerce bring to you the most powerful headless application in e-commerce. Learn how you can leverage BigCommerce utilizing the first open source application for e-commerce from Next.js.

The Next Big Thing in E-Commerce

Chris Ball

Explore the power of experimentation, conventions, and shared solutions that use Next as the foundation. Open Source projects like BlitzJS and Bison can "stand on the shoulders of giants" to bring powerful features to users in record time.

Next.js: A Framework For Frameworks

Manu Ganji

The biggest advantage of Next.js is not in lowered hosting costs but in the ability to work with small teams. Serverless technologies like Next.js and Firebase shrink the skills bucket needed to create world class experiences. This makes the business more likely to survive the competition.

Talent Scarcity and Next.js

Founder

Daniel Lauzon

In this talk, we present an experiment using WebAssembly and Next.js. We developed 3 implementations of a Video Pattern Generator; in JavaScript, Rust and Go. We explore their use in React components, API routes, and Server Side Generation

WebAssembly Zone

Kevin Van Gundy

On this panel leaders from Vercel, Sanity, MongoDB Sentry, and Moovweb will discuss the advantages and trade offs of headless vs integrated web architectures. Panelists will share their forward looking views on trends, what’s all hype, and what’s actually a leap forward.

Future of Performance and Data in the Modern Web

Lanice Sims

In our lightning talk, the Vercel sales team will provide a brief no-nonsense overview of Vercel’s workflow, plans, and use cases we see within our community. Our intention is to provide some guidance on which plan might map onto your requirements.

Develop. Preview. Ship.

Account Manager

Joel Hooks

We are working on the next generation of or primary website for egghead.io and went with Next.js over a lot of other options. This quick talk will dig into why we made that decision and what benefits Next.js gives us out of the box.

Why Next.js Is Great for Egghead.io

Digital Gardener

Myles Borins

npm is the world’s largest package registry, powering the world’s largest development community: JavaScript. Let's talk about where npm is going and how you are going to help us get there.

What's Next for npm?

Product Manager

Kyle Holmberg

Thanks to rewrites, catch-all routes, and optional catch-all routes, it's now possible to define gradual migration paths towards using Next.js. We made the switch at air.inc, and this talk outlines everything we learned along the way.

Gradual Migration Strategies for Next.js

Gabriel Benmergui

A study case on transforming a JAMStack website to an SSR solution while keeping most of the benefits and increasing technical leverage with Next.js Incremental Static Generation.

From Jamstack to Incremental Static Generation

Web Engineer

Cassidy Williams

“Choose your own adventure” books were (and are!) a bit hit for anyone who loves a little creativity in storytelling. In this talk, we use the power of Next.js, state machines (with XState), a GraphQL database (with Hasura), and character submissions from users (with Netlify Forms) to show how to build a crowdsourced, mad-lib, choose your own adventure story application. It’s a mouthful, but it’s a spooky, silly result!

(Choosing our own) Adventures in Next.js

Principal Dev Experience Engineer

Eric Clemmons

This talk provides a brief overview of Amplify Framework, how we adjusted our architecture to support server-side rendering, and demonstrates how to add authentication & an API to a Next.js app with Amplify.

From Front-End to Full Stack with Amplify Framework

Front-End Engineer

Mark Brocato

VP of Engineering

Darpan Kakadia

We created a builder function which accepts a list of app middleware. App middlewares can be used for everything: rendering, catching errors, loading SSR data. The beauty about them? Each of them represents its own encapsulated domain.

Middleware Architecture for Custom App Setup

Anna Gruber

Chapter Lead Frontend

Armando Gonzalez

In this talk we are going to talk on ways to optimize your assets load time by separating your components in a clear way, mobile, tablet and desktop or even views that are only useful for bots.

Responsive Rendering with Next.js

Lead Developer

Oluwanifemi Dahunsi

This is a story of a determined 17-year-old Nifemi from Nigeria who is on a mission to bring fun, inspiration and happiness to school kids in Lagos, Nigeria by teaching them modern web development using Next.js, Vercel and Agility CMS.

How a 17 Year Old from Nigeria Changes Kids' Lives with Next.js and Agility CMS

Olga Voigt

Growth and Marketing Director

Sean Li

Sean will be giving an introduction to Magic passwordless authentication and how it enables developers to effortlessly build more feature-rich Jamstack applications with just a few lines of code.

Magic Authentication - The Missing LEGO Piece

Jeff Escalante

Next.js is an incredibly flexible tool that can handle so many use cases, but it's important to have a balanced perspective. We'll dive into the architecture and philosophy of Next.js, when it shines, and when to reach for something else.

When Not to Use Next.js

Web Platform Lead

Corrine Toracchio

In this presentation, Corrine will cover the basics of three.js and react-three-fiber, share her journey through the creation of Counting Sheep, and even shed some light on shaders.

react-three-fiber and Counting Sheep

Arunoda Susiripala

Learning something new can be challenging. In this talk, I will show you how to learn React/Next.js as quickly as possible by choosing what to learn & what not to.

How to Learn React/Next.js or Anything

Teacher

Lauro Arujo

SSR solutions are often rejected by enterprise commerce. We’ll talk about the strategies for how to build for your daily transaction volume, peak sales period, and product drops and other events.

Cache for Commerce: Performance and optimization for high volume sales

Software Developer

Matt Perry

Framer Motion makes it simple to implement ambitious, app-quality layout animations with a simple API. But how does it actually work?

Inside Framer Motion's Layout Animations

Senior Product Engineer

Julia Qiu

Theming using CSS variables and :root pseudo-class yields a much simpler solution than hacking your way to achieving it with CSS in JS. In this talk, we will explore how we can make theming work flawlessly with server-side rendered apps while respecting system defaults.

CSS + Cookies: A Perfectionist's Approach to Theming in the World of Server-side Rendered Apps

Samuel Snopko

This talk will cover the setup of the Next.js project with Storyblok & Tailwind CSS from the scratch to deployment with Vercel. We will create a simple blog, configure various components for it, and explain what Component Driven Content is.

Going Headless – Zero to Next.js Hero

Head of Developer Relations

Iván Olivares

To talk about the future of the airlines, we need to understand the present. Today, large airlines have legacy systems that become an obstacle in the evolution of their business, this based mainly on the highly complex processes that they inherited from that, bringing a long onboarding for new developers and high complexity for new features with a long time to market, in many cases due to technical debt that accumulates in each "digital evolution". In this talk, you will see the challenge that Globant stars in 2019 to create a 100% digital airline, a project where Next.js was the key tech-enabler to an accelerated launch.

Building the Next Generation of Airlines Websites

Software Architect

Alec Brunelle

Static-site generation enables Next.js pages to be rendered at build-time. This enables easy integration into a Headless CMS. We will learn about SSG in Next.js and how it can work with Cosmic CMS for data management.

Use Next.js Static-Site Generation with Cosmic

Senior Software Developer

Sean C Davis

With a new CMS popping up almost weekly, how do you choose the right one? You have to consider cost, editing experience, front-end integrations, and so much more. And how do you protect yourself when moving to a new CMS? Let's find out!

Everything Is a CMS

Director of Technology

Jay Phelps

Dynamic content traditionally requires Server-Side Rendering (SSR) or client-side libraries, both with performance tradeoffs. This talk introduces a new approach: Edge Slice Re-rendering (ESR) that combines static analysis with Edge compute.

Introducing: Edge Slice Rerendering. Performant A/B Testing, Personalization, and more.

Co-Founder, VP of Engineering

Brecht De Rooms

Scaling applications became easy with Vercel. But what about dynamic data? In this talk, Eric from Commission Buddies describes how they arrived at FaunaDB to complete their Next.js stack, and will provide a look at some exciting features.

Scalable Apps without the Hassle - with Next.js, Vercel & FaunaDB

Senior Developer Advocate

Tyler Drone

Senior Manager, Digital Development

Rodrigo Pombo

Markdown is great for content-driven sites. MDX is even better, letting you embed components directly from your markup. It's often used for the same linear layouts you see on many blogs and READMEs. But it doesn't need to be that way.

The X in MDX

Software Overengineer

Cathy Chen

A lightning talk on 5 projects built during quarantine and the full-stack Next.js boilerplate I built them with.

5 Projects in 5 Minutes

Luke Miller

Sales

Jon Dahl

Odds are you will work with video at some point. In this talk, we'll go deep into the tech behind online video. We'll discuss why video is the way it, with reference to ancient tablets, tetrachromacy, and why vertical video is a travesty.

How Video Works: A Dive into the Biggest Thing on the Internet, and Why You Should Care

Co-Founder

Kaho Cheung

Designer developer handoff in 2020 is still slow and cumbersome. This talk showcases an experiment that brings low-code design to Next JS. Imagine a UI that allows designers to edit production code, saying goodbye to the handoff process.

Low-Code Design in Next.js

DX Lab Technical Lead

Ado Kukic

Next.js is a natural choice for your next awesome application. Shouldn't you expect the same of your database? In this talk, you'll learn why and how Next.js paired with MongoDB gives you the ultimate developer experience.

Building Next Generation Apps with Next.js and MongoDB

Hidde de Vries

Learn how the markup we write impacts not just the Document Object Model (DOM), but, indirectly, also the Accessibility Object Model (AOM), and how this impacts end users.

It's the Markup that Matters

Accessibility / Front-End

John Beadles

Lead Software Engineer

Bryce Kalow

Brandon Bayer

Blitz.js adds all the missing features you need when building a fullstack Next.js app, including a “zero-API” data layer, authentication, database access and migrations, Ruby on Rails style console and code scaffolding, etc.

Blitz.js — Fullstack Framework for Next.js

Creator

Brendan Nee

Instead of using a boring traditional online survey, use Next.js to build an interactive, open-source budgeting "game" that has been used by over 40 government transportation agencies to find a user's true preferences.

Speakers