Learn different strategies for incrementally adopting Next.js into your development workflow.

Incrementally Adopting Next.js

What is static generation and how does Next.js use it to build dynamic web apps? We'll walk through:
* What is static generation
* What happens when you build a Next.js app
* How can you statically export a Next.js app
* How you can deploy those static files to Netlify

🗒️ Original Post
Coming soon...

🔔 Subscribe for more tech and developer videos
https://www.youtube.com/colbyfayock?sub_confirmation=1

🐦 Get updates straight to your Twitter @colbyfayock
https://twitter.com/colbyfayock

✉️ Or a newsletter right to your inbox!
https://www.colbyfayock.com/newsletter/

💝 Sponsor me for more free content like this!
https://github.com/sponsors/colbyfayock

👨‍🚀 Brought to by colbyfayock.com
https://www.colbyfayock.com

🎥 Want to know what A/V equipment I use?
https://www.colbyfayock.com/what-i-use

🧰 More Resources

How to Create a Next.js App and Deploy it to Vercel
https://www.youtube.com/watch?v=9nV4pIrKmyE

Use Github Actions to Automatically Deploy a Static Site - Next.js & AWS S3
https://www.youtube.com/watch?v=D3h91EvRxuk

How to Create a Next.js App: Rick and Morty Dynamic Wiki
https://www.youtube.com/watch?v=iW39Merz0zE

🎼 Music
Cover by Patrick Patrikios
Youtube Audio Library

Static Generation with Next.js - What is it and how does it work?

This guide will explain different ways to use Markdown and MDX with Next.js.

Markdown/MDX with Next.js

In this video we'll take a look at the new Image component in Next.js 10 that does automatic image optimization. We'll cover the 4 different layout options and talk about how they differ and when to use them.

---------- Links

Image Optimization: https://nextjs.org/docs/basic-features/image-optimization
Image Component: https://nextjs.org/docs/api-reference/next/image
Starter Code: https://github.com/leighhalliday/next-image-demo/tree/524249fdb53f95ab92b3980afe6e78c27e526532
Finished Code: https://github.com/leighhalliday/next-image-demo

---------- Connect

Join this channel - https://www.youtube.com/channel/UCWPY8W-FAZ2HdDiJp2RC_sQ/join
Join me on Discord - https://discord.gg/wcSNwfu

---------- Timeline

00:00 - Introduction
01:00 - Fixed Layout
04:00 - Intrinsic Layout
05:40 - Responsive Layout
08:30 - Fill Layout
11:30 - Loaders

Next.js 10's New Image Component

In this video we start from scratch, building out a serverless AWS back end using CDK, AWS Lambda, GraphQL on AWS AppSync, and Amazon Aurora Serverless PostgreSQL. We then wire up the API to a Next.js app using AWS Amplify and show how to connect to the API, build routes at build time, and enable fallback routes to dynamically generate routes at runtime.

The code for this demo is located here: https://github.com/dabit3/graphql-api-cdk-serverless-postgres

The blog post referenced in this video is located here: https://aws.amazon.com/blogs/mobile/building-real-time-serverless-apis-with-postgres-cdk-typescript-and-aws-appsync/

Live Coding a Full Stack Serverless App with Next.js, Amazon Aurora Serverless, CDK, & TypeScript

#Blitzjs is a framework based on Next.js but it has at least one feature which makes it a full stack framework, and that feature is that you don't need the API to get the data to your app. Blitz is able to communicate directly with databases right out of the box, it has migrations, it uses #Prisma2 as its #ORM and I think that is what makes it special. In this video we are going to focus on how Blitz handles the data from databases.

Since it's based on Next.js and React, it has you covered on both backend and on frontend side of things. Definetley something to keep an eye on.

⭐ Kite is a free AI-powered coding assistant that will help you code faster and smarter. The Kite plugin integrates with all the top editors and IDEs to give you smart completions and documentation while you’re typing. You can check it out here:  https://www.kite.com/get-kite/?utm_medium=referral&utm_source=youtube&utm_campaign=watchandlearn&utm_content=description-only

### Code used in this video

https://blitzjs.com/docs/tutorial

### You can support my work on Patreon 

https://patreon.com/watchlearn

### Follow me on Social Media

Github:  https://github.com/ivandoric
Twitter:  https://twitter.com/ivan_doric
Instagram:  https://www.instagram.com/watchlearntuts
Facebook:  https://facebook.com/watchlearntutorials

Let's Checkout... Blitz.js

Today we are going to integrate Contentful in a Next.js 10 blog. We will look at advanced features like Static Incremental Regeneration and automatic optimization of images that are loaded from Contentfuls CDN.

PS: The API keys shown in this video have been revoked.

Building a blog with Next.js 10 and Contentful

Discover DatoCMS, our headless CMS for websites of any size. 

Tutorial: how to get real-time draft previews with Next.js and DatoCMS

In this video we cover Authentication using NextAuth, by the end you can self serve using email, GitHub and Twitter or add in Auth0 to have a one stop shop for Authentication.

https://github.com/perkinsjr/nextauth-examples
------

00:00 - Intro
00:54 - NextJS + Setup requirements
02:26 - NPM Packages
03:32 - Creating our Serverless function
07:25 - Creating our home page using sessions
09:05 - Adding our Provider 
10:12 - Handling our session
13:58 - Creating our .env
16:00 - Creating our GitHub Oauth app
17:00 - Creating our twitter app
19:06 - Adding the new secrets and tokens to our app
20:38 - Testing sign in for Twitter and Github
22:10 - Creating a secret page and api
30:21 - Testing our secret page and route
31:00 - Adding email through sendgrid
34:48 - Testing email sign in
35:47 - Adding Auth0 to the mix
39:07 - Testing Auth0 
39:55 - Outro
--- 
Need 1:1 mentoring? 
Want to Donate?
Want to do business?
https://snugg.me/snuggery/?id=AGZ8lAig7uf1zXobyhw0jfuXA6Q2 
--
Follow me on:
📃 Website/Blog: https://jamesperkins.io
👉 Twitter: https://twitter.com/james_r_perkins
👉 Linkedin: https://www.linkedin.com/in/james-perkins-268992a4
👉 Github: https://github.com/perkinsjr

NextJS Authentication Crash Course with NextAuth.js

https://nextjs.org/10
https://nextjs.org/analytics
https://nextjs.org/commerce
https://nextjs.org/give

Next.js Conf 2020

The most exciting and amazing Next.js release to date! 

Incredible performance enhancements with the Image component, automatic image optimization, and internationalization. Plus, maintain your app's best performance with Next.js Analytics. 

Finally, we've combined all these features into Next.js Commerce, the all-in-one starter kit for high-performance ecommerce sites.

https://nextjs.org/10
https://nextjs.org/analytics
https://nextjs.org/commerce
https://nextjs.org/give

Keynote – Next.js Conf 2020

Shubhie Panicker & Houssein Djirden (Google Chrome Team). 
 
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

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 - Joshua Callender (Lyft)

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 App Performance & How the New Next.js Image Component Can Help -Alex Castle (Google)

CSS + Cookies: A Perfectionist's Approach to Theming in the World of Server side Rendered Apps - Julia Qiu (Zillow/Trulia)

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 - Julia Qiu (Zillow/Trulia)

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

The Next Big Thing in Ecommerce - Rachael Thompson (BigCommerce)

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 - Samuel Snopko (StoryBlok)

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 - Alec Brunelle

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 - Tina Fang (Tencent)

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! - Ahmad Awais

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 & Why You Should Care -Jon Dahl (Mux)

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 - Daniel Lauzon

Sean gives 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 - Sean Li (Magic)

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 - Matt Perry

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 - Sean C Davis (Ample)

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 - Simen Skogsrud (Sanity.io)

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 - Ado Kukic (MongoDB)

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 - Jeff Escalante (Hashicorp)

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 - Arunoda Susiripala

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 - Jay Phelps (Outsmartly)

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 - Brecht De Rooms & Eric Wyne

Whether you want to securely access 3rd party APIs or handle data formatting on the server, Express has been a mainstay of development. In this talk we'll migrate from an Express server to Next API routes.

Do You Even Need That Express Custom Server Any More? - Kevin Cunningham

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 - Iván Olivares (Globant)

Documentation is a fundamental part of the software development world, but is often overlooked or done with minimal effort. In truth, docs are an opportunity to help someone learn – and there are lots of playful ways to get that done.

Playing with Interactive Documentation - Jason Etcovitch (GitHub)

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 - Lydia Hallie

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 - Manu Ganji (BountyHiring)

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 - Lauro Arujo

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 - Rodrigo Pombo

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. (Luke Miller & Lanice Sims @ Vercel)

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 - Kaho Cheung

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 - Kyle Holmberg (Air Labs)

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 - Gabriel Benmergui (Robinhood)

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 - Chris Ball (Echobind)

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 - Ann Gruber & Darpan Kakadia

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 - Hidde de Vries

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 - Joel Hooks

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 - Myles Borins (GitHub)

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.

Finding User's True Preferences with a Gamified Survey - Brendan Nee (BlinkTag)

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 - Armando Gonzalez

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 & Counting Sheep - Corrine Toracchio (Facebook)

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 - Brandon Roberts (Narwhal Technologies)

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 - Cathy Chen (Belay Labs)

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

Incrementally Adopting Next.js (nextjs.org)

Static Generation with Next.js - What is it and how does it work?

Markdown/MDX with Next.js (nextjs.org)

Next.js 10's New Image Component

Live Coding a Full Stack Serverless App with Next.js, Amazon Aurora Serverless, CDK, & TypeScript

Let's Checkout... Blitz.js

Building a blog with Next.js 10 and Contentful

Tutorial: how to get real-time draft previews with Next.js and DatoCMS (www.datocms.com)

NextJS Authentication Crash Course with NextAuth.js

Next.js Conf 2020 November 10th, 2020

Keynote – Next.js Conf 2020

Bringing Excellent UX to the React Ecosystem via ...

Changing Lanes with Lyft - Joshua Callender (Lyft)

Why Images Hurt App Performance & How the New ...

CSS + Cookies: A Perfectionist's Approach to ...

The Next Big Thing in Ecommerce - Rachael ...

Going Headless - Zero to Next js Hero - Samuel ...

Use Next.js Static Site Generation with Cosmic - ...

How Tencent Scales to Millions with Serverless ...

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

How Video Works: A Dive into the Biggest Thing ...

WebAssembly Zone - Daniel Lauzon

Magic Authentication - The Missing LEGO Piece - ...

Inside Framer Motion's Layout Animations - Matt ...

Everything is a CMS - Sean C Davis (Ample)

Why Real Time Matters - Simen Skogsrud (Sanity.io)

Building Next Generation Apps with Next.js and ...

When NOT to Use Next.js - Jeff Escalante ...

How to Learn React, Next.js, or Anything - ...

Introducing Edge Slice Rerendering - Jay Phelps ...

Scalable Apps without the Hassle with Next.js ...

Do You Even Need That Express Custom Server Any ...

Building the Next Generation of Airlines ...

Playing with Interactive Documentation - Jason ...

Incrementally Adopting Next.js - Lydia Hallie

Talent Scarcity and Next.js - Manu Ganji ...

Cache for Commerce Performance and Optimization ...

The X in MDX - Rodrigo Pombo

Develop. Preview. Ship. (Luke Miller & Lanice ...

Low Code Design in Next.js - Kaho Cheung

Gradual Migration Strategies for Next.js - Kyle ...

From Jamstack to Incremental Static Generation - ...

Next.js A Framework For Frameworks - Chris Ball ...

Middleware Architecture for Custom App Setup - ...

It's the Markup that Matters - Hidde de Vries

Why Next.js is Great for Egghead-io - Joel Hooks

What's Next for npm - Myles Borins (GitHub)

Finding User's True Preferences with a Gamified ...

Responsive Rendering with Next.js - Armando ...

React-three-fiber & Counting Sheep - Corrine ...

Collaborative Code with Nx and Next.js - Brandon ...

5 Projects in 5 Minutes - Cathy Chen (Belay Labs)

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