Using Next.js

Next.js is a framework for building server side rendered applications. More info

Articles & Tutorials

Next.js 11 (
Jun 15, 2021
Next.js 11 continues our mission to create the best developer experience with a new conformance system and performance improvements.
Reducing HTML Payload With Next.js (Case Study) (
May 05, 2021
This article showcases a case study of Bookaway’s landing page performance. We’ll see how taking care of the props we send to Next.js pages can make loading times and Web Vitals better.
  • Liran Cohen
AWS Loves Next.js (
Apr 29, 2021
How AWS provides seamless development and deployment experience for Next.js apps
  • Dilantha Prasanjith
Next.js 10.2 (
Apr 28, 2021
Next.js 10.2 introduces performance improvements (faster builds, refresh, and startup), improved accessibility, Automatic Webfont Optimization, and more.
    What’s new in Next.js 10.1 (
    Apr 26, 2021
    As a part of this release, many of these features are tweaked for optimization while introducing a few new ones like a custom 500 error page, preview mode detection, and typescript config extension to state a few. In this article, we will explore these in more detail.
    • Kapeel Kokane
    How to adopt Next.js into your existing application (
    Mar 31, 2021
    Next.js provides a zero-configuration setup process similar to what Create React App does through a package called Create Next App. Today, we will look at how you can make use of Next.js on a pre-existing React application. This will allow you to add SSR to an existing project.
    • Austin Roy Omondi
    Next.js 10.1 (
    Mar 29, 2021
    We are excited to introduce Next.js 10.1
      How to fix layout shifts to improve SEO in Next.js apps (
      Mar 26, 2021
      In this post, we will discuss CLS specifically, with special focus on how to prevent layout shifts in Next.js apps.
      • Vilva Athiban P B
      Why do we love Next.js & what is Next.js used for? (
      Mar 16, 2021
      Practical introduction for CTOs
      • Witold Ossera
      Introducing Auth0's Next.js SDK (
      Mar 15, 2021
      Learn how to authenticate users with Auth0’s Next.js SDK
      • Adam McGrath
      Getting Started With Apollo Client in Next.js (
      Mar 09, 2021
      In this post, we’ll briefly cover each way to fetch and render data with Next.js, along with the important considerations for each approach. We’ll wrap up with a demonstration of how to configure Apollo Client for each one.
      • Kurt Kemple
      Testing and error handling patterns in Next.js (
      Mar 09, 2021
      Two valid concepts worth exploring when using every framework are testing and error handling. It’s no different with Next.js. This article aims to reveal the different ways to run tests and handle errors in a Next.js application.
      • Raphael Ugwu
      Incremental Static Regeneration: Its Benefits and Its Flaws (
      Mar 08, 2021
      Right now there are a lot of hot takes out there about how to improve and scale sites “beyond Jamstack” by adding in features that use a Node server. One of those features is called Incremental Static Regeneration.
      • Cassidy Williams
      How to Use Cloudflare Pages to Host & Deploy a Next.js App (
      Mar 08, 2021
      Building dynamic web apps that can be statically hosted, commonly known as the Jamstack, is a powerful way to help provide a fast and reliable experience to your website visitors.
      • Colby Fayock
      Building a realtime chat app with Next.js and Vercel (
      Mar 02, 2021
      This post will walk through the creation of a realtime chat application with Next.js and deploying it to Vercel.
      • Jo Franchetti
      Building Forms with Next.js (
      Feb 03, 2021
      Forms are an essential part of the web. This guide will demonstrate how to build a performant, accessible form with Next.js while teaching the best practices for HTML & React forms along the way.
      • Lee Robinson
      Incremental Static Regeneration with Next.js (
      Jan 12, 2021
      This post will cover the relevant bits of this new strategy and explain why it’s a game-changer for web development.
      • Ido Shamun
      How to Measure Next.js Web Vitals Using Quickmetrics (
      Nov 13, 2020
      Developers spend a lot of time optimizing websites to provide a better user experience. Web Vitals are a set of useful metrics that aim to capture the user's experience on a web page.
      • Umesh Yadav
      Story of how I built my Portfolio and Blog using and NextJS (
      Nov 13, 2020
      The idea behind this post is to tell the story of how I did it, the tech involved, what I learned along the way and most importantly to inspire many more people to build their own website.
      • Dinesh Balaji
      Building a Next.js App with Apollo Client & Slash GraphQL (
      Nov 11, 2020
      In this blog post, we will build a simple NextJS app from scratch, using Apollo Client to consume the GraphQL API of Slash GraphQL.
      • Apoorv Vardhan
      Testing UI - Next JS, Typescript, Jest and React Testing Library (
      Nov 10, 2020
      As you know, React is just JavaScript. That means it can be tested just like any other JS application. There are lots of testing libraries and test runners out there, but I find that the best setup is Jest + React Testing Library.
      • Maciek Grzybek
      How to Create a Commenting Engine with Next.js and Sanity (
      Nov 06, 2020
      In this article, we’ll use Next.js and to create a commenting engine that meets those needs. One unified platform for content, editors, commenters, and developers.
      • Bryan Robinson
      Next.js vs. React: The developer experience (
      Nov 05, 2020
      This post compares the developer experience of Next.js vs. React. I’ll walk through some background first and then dive into more specifics, discussing what it’s like to initially start a project, build pages, retrieve data, use the documentation, and perform advanced actions with both Next.js and React.
      • Andrew Evans
      How to Use Github Actions to Deploy a Next.js Website to AWS S3 (
      Nov 02, 2020
      The beauty of Next.js and static web apps is that they let you run the project pretty much anywhere using object storage, like on AWS S3. But it can be a pain to manually update those files each time.
      • Colby Fayock
      How To Build A GraphQL Server Using Next.js API Routes (
      Oct 29, 2020
      This guide will teach you the basics of Next.js API Routes. We will start by explaining what they are and why API Routes are useful compared to REST or GraphQL APIs. Then, we will guide you through a step by step tutorial on how to build your very first GraphQL server with Next.js and the Github API.
      • Ibrahima Ndaw
      Next.js 10 (
      Oct 27, 2020
      Next.js 10 introduces Built-in Image Optimization, Internationalized Routing, Next.js Analytics, React 17 Support, and more.
      • Tim Neutkens
      • Joe Haddad
      • JJ Kasper
      • Davis Connor
      • Luis Alvarez
      • Shu Uesugi
      Getting Started With Next.js (
      Oct 22, 2020
      Next.js is a React framework that is bound to ease your life as a React developer by abstracting away the common and redundant tasks (such as routing) into relatively simpler and powerful APIs. That way, you can focus on writing your apps instead of reinventing the wheel.
      • Adebiyi Adedotun Lukman
      Next.js - The Data Story (
      Oct 22, 2020
      In this post, we'll take the next steps to talk about the data story, how it fits in to the picture, and how to implement various access patterns with and without authentication and authorization.
      How to Use Chakra UI with Next.js and React (
      Oct 20, 2020
      Building websites and applications is hard. There are a lot of things to consider to make sure our apps are usable and accessible including how our React components work.
      • Colby Fayock
      Next.js Basics Tutorial – Server-side Rendering, Static Sites, REST APIs, Routing, and More (
      Oct 16, 2020
      In this article, I will walk you through the Nextjs features that I personally use the most.
      • Said Hayani
      Routing in Next.js – A Complete Beginner's Guide (
      Oct 05, 2020
      Next.js is a React framework that ships with all the features you need for production. It enables routing in your app by using the file-system-based routing.
      • Ibrahima Ndaw
      The Complete Guide to Next.js Authentication (
      Sep 21, 2020
      In this guide you will learn how to implement authentication in a Next.js app. I will cover client authentication, authenticated server-rendered pages, authenticated API routes, protected routes, and redirects.
      Integrate Next.js & Contentful (
      Sep 17, 2020
      We will be building a simple demo site like this one, and you can clone the repo for it here. You’ll need to do the Set up Contentful and Set up Netlify steps to make it work for you!
      • Cassidy Williams
      Using Next.js with Stitches (
      Sep 17, 2020
      A simple guide to use Next.js with Stitches.
      • Pedro Duarte
      How to Build a Jamstack Site with Next.js and Vercel (
      Sep 17, 2020
      The Jamstack architecture is a modern approach to an old idea: making fast, static websites, but making them dynamic with tools like JavaScript.
      • Colby Fayock
      Comparing Styling Methods In Next.js (
      Sep 17, 2020
      Among others, Next.js has dubbed itself: The React Framework for Static Websites. But just like every other framework whose goal is to help you build what matters by abstracting common, redundant tasks, you’re often required to learn something new and opinionated. With Next.js, one of the things you need to know is how to integrate different CSS methods with its API, and that is the focus of this tutorial.
      • Adebiyi Adedotun Lukman
      Easily Deploy a Fullstack Next.js App with Vercel (
      Sep 15, 2020
      Developing and shipping production-ready applications to the web today couldn't be easier than with Next.js and Vercel. It provides a world-class developer experience right out of the box and is optimized for powering high-performance production workloads.
      • Chris Sevilleja
      Launching a JAMstack Website With NEXT.JS + Vercel (
      Sep 09, 2020
      Using Agility CMS JAMstack Starter
      • James Vidler
      How To Build A Blog With Next And MDX (
      Sep 09, 2020
      In this guide, we will be looking at Next.js, a popular React framework that offers a great developer experience and ships with all of the features you need for production. We will also build a blog, step by step, using Next.js and MDX. Finally, we’ll cover why you would opt for Next.js instead of “vanilla” React and alternatives such as Gatsby.
      • Ibrahima Ndaw
      Why is Next.js my ultimate choice over Gatsby, Gridsome, and Nuxt? (
      Sep 08, 2020
      In this article, Iʼll show you my journey over the various web technologies and my experience with them. Iʼll share my way into Jamstack, explain how to choose the right tool suitable for you and your project, and why it is Next.js for me.
      • Ondrej Polesny
      Add Syntax Highlighting to a Next.js Markdown Blog with rehype-prism (
      Sep 02, 2020
      This post documents my learnings and the steps I took to implement syntax highlighting in a Next.js Markdown blog.
      • Lauro Silva
      Integrate Next.js & Prismic (
      Aug 28, 2020
      We will be building a simple demo site like this one, and you can clone the repo for it here. You’ll need to do the Set up Prismic and Set up Netlify steps to make it work for you!
      • Cassidy Williams
      How to Create a Next.js Starter to Easily Bootstrap a New React App (
      Aug 18, 2020
      Getting started with a new React app is easier than ever with frameworks like Next.js. But those frameworks don’t always include all of the tools you want to use.
      • Colby Fayock
      Authentication Patterns for Next.js (
      Aug 17, 2020
      Authentication verifies who a user is, while authorization controls what a user can access. Next.js supports multiple patterns for authentication, each designed for different use cases. This guide will allow you to choose your adventure based on your constraints.
      • Lee Robinson
      Why You Should Learn Next.js as a React Developer (
      Aug 10, 2020
      In this post, I'll describe my personal journey with Next.js. I'll also discuss why I believe that it is the right time to add it to your React stack.
      • Mehul Mohan
      How Next.js can help improve SEO (
      Aug 07, 2020
      The release of some awesome JavaScript frameworks, such as Next and Gatsby, has lead to more server-side applications being made. Let’s see a few reasons why single-page applications are not the best choice for some cases, especially for applications that are going to depend heavily on SEO.
      • Leonardo Maldonado
      How to Add a YouTube Playlist to a Next.js React App with the YouTube API (
      Aug 06, 2020
      We’re going to put together a Next.js app that uses the YouTube API To fetch videos from a playlist.
      • Colby Fayock
      Next.js 9.5 (
      Jul 27, 2020
      Next.js 9.5 introduces Stable Incremental Static Regeneration, Custom Base Path, Redirects and Rewrites, Webpack 5 Beta, and more!
      Next.js: Server-side Rendering vs. Static Generation (
      Jul 09, 2020
      How to use Static Generation, Incremental Static Generation, and Client-side Fetching with Next.js.
      • Lee Robinson
      How to Create a Dynamic Rick and Morty Wiki Web App with Next.js (
      Jul 09, 2020
      Building web apps with dynamic APIs and server side rendering are a way to give give people a great experience both with content and speed. How can we use Next.js to easily build those apps?
      • Colby Fayock
      Building a Blog with Next.js (
      Jul 09, 2020
      In this article, we will use Next.js to build a static blog framework with the design and structure inspired by Jekyll.
      • Pankaj Parashar
      Building the Tailwind Blog with Next.js (
      Jun 30, 2020
      One of the things we believe as a team is that everything we make should be sealed with a blog post. Forcing ourselves to write up a short announcement post for every project we work on acts as a built-in quality check, making sure that we never call a project "done" until we feel comfortable telling the world it's out there.
      • Adam Wathan
      How to Share React Components Between NextJS Projects (
      Jun 30, 2020
      Publishing React components from a NextJS Project, to reuse in another.
      • Nathan Sebhastian
      What’s New in Next JS 9.4 (
      Jun 23, 2020
      Let's explore the new features that shipped with Next.js 9.4, including fast refresh, integrated web vitals reporting, new environment variables support and more.
      • Nwose Lotanna Victor
      Hey Next.js, Is Server Side Rendering Dead? (
      Jun 17, 2020
      If you ask someone about Next.js, they will talk about server-side rendering(SSR) for sure. But recently, we started to talk more about static site generation when it comes to Next.js.
      • Arunoda Susiripala
      The Hitchhiker’s Guide to Next.js (
      Jun 17, 2020
      How Next.js evolved, and why it’s one of the best React frameworks on the market.
      • Brandon Duffany
      Migrating from Gatsby to Next.js (
      Jun 16, 2020
      Like a lot of developers, I like to use my blog as a personal playground to try out the latest technologies. My blog was written in Gatsby, but recently I migrated it to Next.js. In this post, I’m going to talk about my experience, what went well, and what didn’t.
      • Matija Marohnić
      What is Next.js Incremental Static (Re)Generation? (
      Jun 08, 2020
      With these Next.js improvements, you can build your app as a static web app. But it can also (re)generate those static pages as needed. In a way, it's like putting a static cache in front of your server-side rendered(SSR) app.
      • Arunoda Susiripala
      Jumping Into Webmentions With NextJS (or Not) (
      Jun 03, 2020
      Webmention is a W3C recommendation last published on January 12, 2017. And what exactly is a Webmention? It’s described as… a simple way to notify any URL.
      • Atila Fassina
      Optimizing static pages in your Next.js apps with Prisma (
      May 27, 2020
      In this post, we’ll mostly discuss next-gen SSG support and why integrating your Next.js app with Prisma makes this feature even more powerful.
      • Nirmalya Ghosh
      Simple Auth Setup for Your React App (
      May 22, 2020
      I recently got super excited about Deeplearning, and wanted to share my experience. So, I created Deeplearning Mantra. I needed to add login functionality to it, but existing solutions are not that simple and hard to manage.
      • Arunoda Susiripala
      Handy new features in Next.js 9.4 (
      May 18, 2020
      Next.js 9.4 came out this past week, and boy howdy, there are some cool things that came out. My favorites though are Fast Refresh, Absolute Imports and Aliases, and Web Vitals Reporting!
      • Cassidy Williams
      Report Web Vitals in Next.js (
      May 11, 2020
      Measure the performance of our Next.js application with Web Vitals.
      • Sergio Xalambrí
      Next.js 9.4 (
      May 11, 2020
      Next.js 9.4 introduces React Fast Refresh, Incremental Static Regeneration, New Environment Support, Built-in Fetch, and more.
      Improve your SEO and Social Sharing Cards with Next.js (
      May 08, 2020
      Look, we’ve all done it. We’ve shared a post of our latest blog or project to Twitter, or LinkedIn, or Slack, or something, and it ends up looking like a blurred mess on the timeline, or has a boring default thumbnail.
      • Cassidy Williams
      Deploying a Next app with AWS Amplify Hosting (
      May 05, 2020
      In this tutorial you'll learn how to deploy a Next app to AWS using Amplify Hosting.
      Building a Markdown blog with Next 9.3 and Netlify (
      May 04, 2020
      Here’s how to build a Markdown blog with the latest Next (9.3.6, at the time of writing), and how to deploy it to Netlify.
      • Cassidy Williams
      Comparing Next.js and After.js for SSR React apps (
      Apr 28, 2020
      Next.js and After.js are both frameworks that let us build server-side-rendered React apps without the hassle of setting up SSR from scratch from a create-react-app project. In this article, we’ll compare Next.js and After.js and explore their differences.
      • John Au-Yeung
      Add Theme-ui to Next (
      Apr 24, 2020
      Today i decided to finally take the plunge and start learning NEXTjs. I've been working with Gatsby for two over years now, have created many sites and themes and generally feel very comfortable in that environment. But it was time, finally to bite the bullet and see what all the fuss was about!
      • Richard Haines
      Static Sites with Next.js 9.3 and Prisma (
      Apr 08, 2020
      Static sites are all the rage – and for a good reason. The JAMstack (i.e., JavaScript, APIs, and Markup) has emerged as an attractive alternative to traditional web apps.
      • Lee Robinson
      Develop Components for your Next.js Site in Isolation with Storybook (
      Apr 04, 2020
      Do you ever just started developing your next website with nextjs and after a while felt unproductive, because all of your components are scattered throughout your site?
      • Mike Barkmin
      How to add Auth0 to Nextjs- the Ultimate Guide (
      Apr 01, 2020
      A definitive guide for adding Auth0 to your Next.js project.
      • Stephen Jensen
      Improving My Next.js MDX Blog (
      Mar 29, 2020
      I revamped my personal site, adding a variety of improvements for the ideal Next.js + MDX blogging experience.
      • Lee Robinson
      Next.js, Storybook, and Lerna: Build a Monorepo Structure (
      Mar 24, 2020
      In this tutorial, you'll learn about how to build a monorepo using Lerna. We’ll be building a Next.js application which will import components from a separate package. We’ll also be using Storybook to showcase those components.
      • Nirmalya Ghosh
      NextJS OAuth with Passport + Github (
      Mar 14, 2020
      In this post we setup OAuth between a NextJS client and an Express API. I have assumed knowledge of JavaScript, Nodejs and Expressjs in this post. I however explain things well enough for anyone to catch up and understand things.
      • Danstan Onyango
      Visual Open Authoring with Next.js & TinaCMS (
      Mar 10, 2020
      We're focused on improving the independent web as a whole. We want to craft tools that help people build better sites and create better content. In line with this mission, we sought to create something we call Visual Open Authoring.
      • Scott Gallant
      Next.js 9.3 (
      Mar 09, 2020
      We are excited today to introduce Next.js 9.3.
      Building a Product Hunt clone app using Hasura and Next.js (
      Feb 20, 2020
      This tutorial will demonstrate how to create a clone of product curation app Product Hunt using Hasura and Next.js. We’ll show you how to conduct authentication and authorization using Hasura and how to leverage GraphQL to fetch and write data from a Next.js frontend application.
      • Nirmalya Ghosh
      Introducing the new Create Next App (
      Feb 11, 2020
      About three months ago, the Next.js team released a new starter boilerplate called Create Next App, and in this post, we will look into the new features that shipped with it.
      • Nwose Lotanna
      Building a GraphQL server in Next.js (
      Feb 10, 2020
      In this article, we will learn how to use API routes to set up a GraphQL API within a Next.js app. It will start with the basic setup, and then cover some more in-depth concepts.
      Deploy Next.js Apps using Github Actions (
      Feb 07, 2020
      Push to deploy. The easy way.
      • Eshwaren M
      What’s new in Next.js 9.2? (
      Jan 30, 2020
      In this article, we’ll break down all the new and shiny features that shipped with the latest version of Next.js.
      • Nwose Lotanna
      Next.Js boilerplate with TailwindCss and SASS (
      Jan 27, 2020
      Let’s combine all these powerful tools to build awesome products.
      • Nirazan Basnet
      How to create a website with Next.js and React (
      Jan 20, 2020
      In this tutorial, we’ll show you how to bootstrap a Next.js web application and add some basic components and features of a typical website.
      • Nick Major
      Next.js 9.2 (
      Jan 15, 2020
      We are excited today to introduce Next.js 9.2.
      New Next.js Documentation (
      Jan 09, 2020
      We're excited to announce the new Next.js documentation.
      Next.js 9.1.7 (
      Jan 06, 2020
      Next.js 9 was released six months ago, followed by Next.js 9.1 three months ago. These two releases added very powerful new features to Next.js, without increasing our baseline client runtime size. Since then, we've focused heavily on refining and improving the framework as a whole: 9.1.1, 9.1.2, 9.1.3, 9.1.4, 9.1.5, 9.1.6, and 9.1.7. Let's dive into what these releases have improved!
      Dealing with links in Next.js (
      Jan 02, 2020
      In this article, I’m going to explain two of my techniques for isolating routing in your application. I use Next as an example, but they can be applied to pretty much all routing libraries.
      • Radoslav Stankov
      Next.js vs. GatsbyJS: A developer’s perspective (
      Dec 19, 2019
      Now the whole community and projects around React are fondly known as the React ecosystem. Today, we are going to examine two of the famous React frameworks: Gatsby and Next.js.
      • Paramanantham Harrison
      How to get cookies server-side in a Next.js app (
      Dec 06, 2019
      Accessing cookies while server-side rendering in Next.js can be harder than you think. Here's how I solved it.
      How to Divert Traffic Using IP2Location in a Next.js Website (
      Dec 04, 2019
      In this article, you’ll learn how to set up a Node.js powered website that’s capable of directing traffic to relevant landing pages based on a visitor’s country. You’ll also learn how to block anonymous traffic (e.g. Tor) in order to eliminate risks coming from such networks.
      • Michael Wanyoike
      How to use Next.js API Routes (
      Nov 29, 2019
      Learn this powerful technique provided by Next.js to create an API endpoint within a Next.js app.
      How to use the Next.js Router (
      Nov 28, 2019
      Learn how to use the `next/router` package to control routes in Next.js
      The Next.js App Bundles (
      Nov 27, 2019
      How Next.js separates your app code into different bundles, and what do they contain.
      The icons added by Next.js to your app (
      Nov 26, 2019
      Learn what the icons generated by Next.js in development mode mean.
      Adding a wrapper component to your Next.js app (
      Nov 25, 2019
      How to use a wrapper component and add a common sidebar or header to it.
      Lazy loading modules in Next.js (
      Nov 24, 2019
      How to lazy load modules in your Next.js app.
      How to analyze the Next.js app bundles (
      Nov 23, 2019
      Learn more about what's in your Next.js app bundles.
      Deploying a Next.js app in production (
      Nov 22, 2019
      How to generate the production version of your Next.js app.
      Deploying a Next.js application on Now (
      Nov 20, 2019
      How to use Now to easily and seamlessly deploy your Next.js app.
      Feed data to a Next.js component using getInitialProps (
      Nov 13, 2019
      How to feed data to a Next.js component using getInitialProps
      Dynamic content in Next.js with the router (
      Nov 12, 2019
      How to setup dynamic content in a Next.js site
      Using i18n with Next.js & React context API (
      Nov 05, 2019
      An internationalized HTTP/2 React app that is fast and SEO friendly.
      • Yannis Torres
      Nice imports with Next.js (
      Nov 04, 2019
      During my React based development, I'll find myself importing a module from '../../../components/Widget' and that ../../../ is anyone's guess if it's right first time or not. Except I discovered that Next.js (which is what I do most of my React dev with) ships with a trick up its sleeve.
      • Remy Sharp
      Persistent Layout Patterns in Next.js (
      Oct 17, 2019
      So I spent a few weeks researching, asking questions, and experimenting, and came up with these four patterns for persistent layouts in Next.js applications.
      • Adam Wathan
      The Ultimate Guide to Next.js Authentication with Auth0 (
      Oct 10, 2019
      Learn how (and where) to authenticate your user in the different deployment models that exist for Next.js.
      • Sandrino Di Mattia
      Introducing Create Next App (
      Oct 09, 2019
      We're delighted today to introduce the new Create Next App. Create Next App sets up a modern React application powered by Next.js in one command.
      Next.js 9.1 (
      Oct 07, 2019
      Today, we are excited to announce Next.js 9.1 with src and public directory support.
      Using HTTP/2 with Next.js & Express (
      Oct 01, 2019
      HTTP/2 or H2 is a major revision of the HTTP protocol used by the World Wide Web. It is based upon an experimental protocol SPDY, developed by Google, and aims to speed up internet exchanges between clients and servers.
      • Yannis Torres
      Next.js 9.0.7 (
      Sep 30, 2019
      Next.js 9.0 was released approximately two months ago. Since then, we’ve been busy with 7 smaller but quite important releases. Let’s dive into what these releases have brought to your websites and applications, with absolutely no breaking changes.
      • Tim Neutkens
      • Joe Haddad
      • JJ Kasper
      • Connor Davis
      • Luis Alvarez
      • Lukáš Huvar
      Gatsby vs Next.JS - What, Why and When? (
      Sep 25, 2019
      Ok firstly, I digress, I am a massive fan of both of these "frameworks". I can usually be seen gushing about them on my Twitter or Instagram, however, without a doubt, the question I get asked the most when talking about these tools is which is better? Should I use Next.JS? But I have heard Gatsby is pretty 🔥, maybe I should use that?
      • James Bedford
      Animating Next.js page transitions with Framer Motion (
      Sep 17, 2019
      I've been testing several React animation libraries and Framer Motion made the highest impression on me. In this post we'll explore how to use Framer Motion to animate Next.js page transitions.
      • Kristian Heruc
      Nested dynamic layouts in Next.js apps (
      Sep 09, 2019
      In this post, we'll explore how to create a Next.js app with one global layout and multiple (dynamic) sub-layouts for different sections of the website.
      • Kristian Heruc
      Secrets and Environment Variables in Next.js and Now (
      Sep 07, 2019
      Zeit has great documentation, but it took me a while to understand the difference between environment variables (secrets) on the serverless side vs how to get env vars exposed and available to the React code which runs client side, in the browser.
      Next.js File Structure (
      Aug 27, 2019
      Overview of the file structure I like to use in Next.js projects.
      • Sergio Xalambrí
      Testing in Next.js: Dynamic Imports (
      Aug 22, 2019
      Learn how to test components using dynamic imports in a Next.js application.
      • Sergio Xalambrí
      Next.js 9 Released: Q&A with Co-Author Tim Neutkens (
      Aug 20, 2019
      InfoQ interviewed Tim Neutkens, co-author of Next.js, on the motivation and contents of the recent release, and the plans for the future.
      Redirects in Next.js, the Best Way (
      Aug 20, 2019
      Learn how to create redirects when using Next.js in the most efficient way.
      • Sergio Xalambrí
      NextJS vs GatsbyJS - What's the diff? (
      Aug 19, 2019
      While both of these frameworks could sometimes be used to hit the same target, they both excel at very different things and also have different costs associated with their implementation.
      • Michael David Friedman
      One year with NextJS (
      Aug 12, 2019
      In this series of articles, I'll try to tackle some of the most frequent issues faced using Server Side Rendering and how we tried to solve them.
      • Flavien Delangle
      7 Tips of Next.js 9 with TypeScript (
      Aug 02, 2019
      Recently I needed to research how good Next.js 9 is and I made this website using it in order to go over. Here is tips what I run into throughout making this website.
      • Kohei Asai
      Next.js Practical Introduction: Navigation and Routing (
      Jul 30, 2019
      Learn how to use Next.js to add navigation and routing to server-side rendered React applications.
      • Dan Arias
      Redux Persist with Next.js (
      Jul 25, 2019
      The following implementation shows you how to integrate Redux Persist into Next.js with a quick example.
      Server-Side Rendered Real-time Web App with Next.js, AWS Amplify & GraphQL (
      Jul 25, 2019
      In this blog post we will go through building a server-rendered realtime collaborative todo list app with Next.js and AWS Amplify.
      • Rakan Nimer
      Next.js Practical Introduction: Styling and Theming (
      Jul 23, 2019
      Learn how to handle styling and theming while using Next.js to build server-side rendered React applications.
      • Dan Arias
      Next.js Practical Introduction: Pages and Layout (
      Jul 16, 2019
      Learn how to use Next.js to create server-side rendered React applications.
      • Dan Arias
      Exploring Next.js 9 Dynamic Routing & API Routes (
      Jul 09, 2019
      Next.js 9 has been released yesterday with some amazing new features. In this post we'll create a simple RSS feed reader to explore how to use the new file system based dynamic routing and API routes.
      • Kristian Heruc
      Next.js 9 (
      Jul 08, 2019
      After 70 canary releases we are pleased to introduce Next.js 9.
      • Tim Neutkens
      • Joe Haddad
      • JJ Kasper
      • Connor Davis
      • Luis Alvarez
      • Lukáš Huvar
      Next.js vs. Create React App: Whose apps are more performant? (
      Jun 27, 2019
      What are the performance differences between Next.js and Create React App? Let’s unpack that question with some data, but first, we need to understand what exactly we are comparing here.
      • Sean Connolly
      Chrome Extension for Viewing Static Data in NextJS (
      Jun 16, 2019
      Install the Google Chrome extension Utilities Extension" and quickly see both the size and data associated with your Next.js server side rendered React app.
      • Peter Kellner
      Using Next.js and Material UI Together (
      May 26, 2019
      Both libraries are impressive, but there are some tricks to know to make them playing well together.
      • Kévin Dunglas
      Typing Next.JS components using TypeScript (
      May 22, 2019
      In this article, we’ll talk about typing Next.JS components. We’ll be using this Next.JS application that connects to Reddit API and displays a list of top posts in a given subreddit.
      • Konstantin Lebedev
      Next.js E-Commerce Tutorial: Quick Shopping Cart Integration (
      May 16, 2019
      These days, there isn’t much you can’t do with React, whether you’re a seasoned developer or a complete beginner. This is mostly due to the creation of tools such as Next.js that have successfully simplified React frontend development. So, today, I want to explore what Next.js can do for e-commerce.
      • Michael Poirier-Ginter
      Next.js Authentication Tutorial (
      May 13, 2019
      Learn how to add authentication to your Next.js application with Passport.
      • Bruno Krebs
      So You Want to Build a Serverless React App with Next.js and ZEIT Now (
      May 10, 2019
      In this article, we will discuss the pros and cons of serverless then we will quickly build a React app using Next.js and deploy it with ZEIT Now.
      • Adrian Carolli
      Building an AMP website with React & Next.js (
      Apr 27, 2019
      A new Next.js 8.1 release with support for authoring AMP pages has been introduced last week. In this post we'll explore how to set up AMP pages with Next.js.
      • Kristian Heruc
      Next.js 8.1 (
      Apr 16, 2019
      Today, we're excited to announce we've extended the Next.js experience to authoring AMP pages.
      Styling Next.js with Styled JSX (
      Mar 28, 2019
      Styled JSX is a CSS-in-JS library that allows you to write encapsulated and scoped CSS to style your components. The styles you introduce for one component won't affect other components, allowing you to add, change and delete styles without worrying about unintended side effects.
      • Kristian Heruc
      Creating localised NextJs apps with next-i18next (
      Mar 05, 2019
      After deciding to remain in the i18n world, I began playing with react-i18next inside some simple NextJs apps, and quickly realised that although internationalising a simple client-side-only React app is fairly easy these days, internationalising an SSR React app (even with how easy NextJs makes it) is a somewhat difficult proposition.
      • Isaac Hinman
      Sharing global data in Next.js with custom App and useContext Hook (
      Feb 24, 2019
      How to use some global data in Next.js pages is a very common question new developers have. In this post, we'll do it with a custom App component and useContext Hook that's included in new React 16.8.
      • Kristian Heruc
      6 tips: Using Next.js for your next web app (
      Feb 22, 2019
      Next.js is indispensable when you want to build a high performance React app. It’s being used to power some of my apps such as WeCured, a data-driven medical community and True Home, an automated home valuation tool for properties in Hong Kong. Along the way, I learned a few tricks and figured out a few “gotchas” of the framework that beginners might find useful.
      • Joe Lei
      Build and Deploy Serverless Apps with Next.js 8 and Zeit Now (
      Feb 21, 2019
      Configure Next.js 8 serverless mode to generate lambdas for each page. Use Hasura GraphQL API as data layer. Deploy to Zeit Now. Instant setup.
      • Praveen Durairaj
      User Authentication with Next.js (
      Feb 20, 2019
      User authentication with Next.js has been one of the most requested examples by the community. The GitHub issue had more than 300 likes and hundreds of comments with recommendations and proposals.
      • Juan Olvera
      Next.js 8 Webpack Memory Improvements (
      Feb 19, 2019
      Recently Next.js 8 was introduced. The release included a massive build-time memory usage reduction. This blog post will explore how we have helped optimize webpack for the community.
      I used Next.js + Semantic UI on my React App and it’s awesome! (
      Feb 18, 2019
      Whenever we start doing a web project we always think of what framework should we use to create a good-looking elements for our website. Each framework has its own pros and cons, allowing you to choose based on the needs of your project.
      • Christian Cepe
      Static website using NextJS and Markdown (
      Feb 17, 2019
      This tutorial shows how to work with NextJS: add a new page, use CSS modules to style, navigate between pages, create a custom layout, process markdown files, create dynamic pages and export the app as a static website.
      • Vijay Thirugnanam
      Things I've Learned Building Next.js Apps (
      Feb 15, 2019
      I've spent a lot of time in the past 4 months creating Next.js apps for both work and personal use. Along that journey, I've grown to really ❤ Next.js and it's ecosystem. Here are some of the things I've learned along the way.
      • Lee Robinson
      Learn React by building websites with Next.js (
      Feb 15, 2019
      In this guide I'll show you how to build a website with React & Next.js. We'll create a portfolio website for an imaginary photography studio.
      • Kristian Heruc
      Next.js 8 (
      Feb 11, 2019
      We are proud today to introduce the production-ready Next.js 8.
      Materialize your Next.js project with MDBootstrap for React (
      Feb 04, 2019
      I'm Jakub, I work as a Front-End Developer in, and I want to share with you this quick guide on how to integrate MDBReact into your Next.js project.
      • Jakub Mandra
      Getting Started with React and Next.JS  (
      Feb 04, 2019
      This is the 1st post for Movies store, the React & Redux E-commerce app tutorial series created by
      • Kuldeep Saxena
      How We Moved From Wordpress to React and Raised $80 Million (
      Jan 25, 2019
      Culture Trip’s website used to be a WordPress site. Now it’s a flexibile, universal (isomorphic) JavaScript App powered by Next.js, React, MobX and Styled-Components on the front-end that uses WordPress as a semi-headless CMS.
      • Yoav Ganbar
      How To Build a Hacker News Clone with React and Next.js (
      Jan 16, 2019
      In this tutorial, we are going to build a small Hacker News React app using the Next.js framework.
      • Aman Mittal
      Using Mapbox with Next.js (Instead of Google Maps) (
      Jan 13, 2019
      In the process of selecting a mapping library for, I ran into a number of roadblocks. First and foremost, Google Maps has drastically changed their pricing structure.
      • Lee Robinson
      Deploying a Prismic and Next.js blog to Now (
      Jan 12, 2019
      In this post we will be using Now to deploy our blog. Now makes serverless application deployment easy! Not only that, but their free tier is very generous.
      • Gary Meehan
      Nextjs for everyone — with some basic knowledge of React (
      Dec 20, 2018
      With some basic React and JavaScript knowledge, you’ll be on your way
      • Said Hayani
      Creating a Static Site using Next.js and TypeScript (
      Dec 19, 2018
      My goal here is to document the steps required to create a static site rendered using next and TypeScript. I'm specifically interested in a configuration that uses the export functionality of next to produce what is basically a static, server-side rendered web site that integrates dynamic functionality once loaded. If that interests you as well, read on.
      • Michael Tiller
      Setting up Firebase and our React project with Next.js— Part I (
      Dec 17, 2018
      In this chapter we will create our Firebase project, setup Firebase Authentication, setup our Firestore database, create our Next.js project and create a VERY simple home page.
      • Zac Holland
      5 Tips for Building a Next.js App (
      Dec 10, 2018
      Practical tips with real world code snippets to help you in building your Next.js app using React Hooks, Fastify and more.
      • Karolis Narkevičius
      User Accounts with Next.js — An Extensive Tutorial (
      Oct 19, 2018
      There is an issue on the next.js repo that has been open since the early days of the project (October 2016), it’s called Add login / authentication example and is one of 2 issues tagged Priority: OMG Maximum. The issue has 185 comments, many of which mine (I joined the conversation in February 2017).
      • Nick Redmark
      Migrating to Static Next.js and Now (
      Oct 01, 2018
      I little over a year ago my friends and I released a little app called Carbon, and since then it has gone through a ton of development and upgrades.
      • Mike Fix
      Gatsby vs Next (
      Sep 20, 2018
      Lately Gatsby and Next have gotten lots of attention. At first glance, they both seem very similar.
      Next.js 7 (
      Sep 19, 2018
      After 26 canary releases and 3.4 million downloads, we are proud to introduce the production-ready Next.js 7.
      Introduction to the basics of Next.js (
      Aug 22, 2018
      Whilst learning next.js I am trying to create a small application that will have the basic functionality of instagram - a mini instagram clone if you like.
      • Aurel Kurtula
      Google Analytics with Next.js (
      Jul 16, 2018
      In this post we will be adding Google Analytics to our blog by leveraging Next.js's custom _document.js file.
      • Gary Meehan
      SEO in Next.js and Prismic (
      Jul 02, 2018
      This blog post is part two in a series of posts on developing a blog with Next.js and Prismic.
      • Gary Meehan
      Next.js 6.1 (
      Jun 27, 2018
      We are proud today to introduce the production-ready Next.js 6.1.
      Server side rendered blog with Next.js and (
      Jun 10, 2018
      Recently I decided to rebuild my blog using Next.js powered by
      • Gary Meehan
      How to handle SEO with a React SPA (
      Jun 05, 2018
      Today, I’ll use Next.js to craft a crawler-friendly e-commerce SPA
      • Maxime LaBoissonniere
      Next.js 6 and (
      May 16, 2018
      We are proud today to introduce the production-ready Next.js 6.
      Implicit routing and server rendering for React apps using Next.js (
      May 15, 2018
      Server rendering is one of the trickiest assignments we get as developers working with UI libraries and frameworks. React being a UI library is not an exception. We will discuss the impact of server rendering and how we can achieve it for React-based apps.
      Deploy a commercial Next.js application with pkg and docker (
      May 14, 2018
      Letting customers operate their own applications without source code is the key point in this deploy flow.
      • Michael Hsu
      Using Next.js and Auth0 (
      May 02, 2018
      This guide walks you through setting up authentication and authorisation in an example application created with Next.js and Auth0.
      • Tamas Piros
      Discover Next.js and write server-side React apps the easy way (
      Apr 04, 2018
      Working on a modern JavaScript application powered by React is awesome until you realize that there are a couple problems related to rendering all the content on the client-side
      Next.js 5.1: Faster Page Resolution, Environment Config & More (
      Mar 26, 2018
      We are happy to introduce Next.js 5.1, which features support for environment configuration, phases, source maps, and new Next.js plugins.
      Next.js 5: Universal Webpack, CSS Imports, Plugins and Zones (
      Feb 05, 2018
      We are very happy to introduce Next.js 5.0 to the world. It’s available on npm effective immediately.
      Rendering CSS on Servers for Next.js (React) Apps (
      Jan 04, 2018
      While working with Next.js, I ran into an obscure problem. This had to do with how styles are rendered on the server, and it never struck till now that styles are also first class citizens for server-side rendering.
      Writing Server-rendered React Apps with Next.js (
      Sep 25, 2017
      Next provides a simple yet customizable solution to building production-ready SPAs.
      • Jatin Shridhar
      Redux and Redux Saga in Next.js (
      Jun 28, 2017
      A couple of basic setup steps to use Redux combined with Redux Saga in Next.js. Whereas Next.js enables you to build server-side rendered React applications, Redux and Redux Saga make sure to handle your state not only on the client-side, but also on the server-side.
      What’s Next.js for Apollo (
      Mar 23, 2017
      Universally render your application with Apollo and Next
      • Adam Soffer

      Video Guides & Talks

      Using the Notion API with Next.js (
      May 25, 2021
      Watch as I build a Next.js application using the newly released Notion API live.
      • Lee Robinson
      Adding Clerk.Dev to a NextJS for powerful Authentication (
      May 21, 2021
      In this video, we mount our own components to keep users inside our application but still using the power and flexibility of Clerk.
      • James Perkins
      A Beginner's Guide to Next.js | Build a SSG Site with React (
      May 19, 2021
      Get started with Next.js, an awesome platform for server-side rendering and static site generation with React. We'll talk through the differences between SSR and SSG, how to create a Next.js app, and how routing works within it.
      • Ali Spittel
      Next.js Crash Course for Beginners 2021 (
      May 19, 2021
      Learn all about Next.js, React's most popular Production Framework! Get Started with NextJS and make build amazing websites with ReactJS even more fun! Full Project included, 100% free 3 hours long course!
      Adding Feature Flags to Next.js (Redis / Upstash, SWR, Hooks) (
      May 19, 2021
      In this video we'll build our own feature flag management tool in Next.js, storing the flags in Redis with Upstash, creating a custom hook to check a flag's status in the view.
      What is Incremental Static Regeneration? (ISR) (
      May 13, 2021
      Incremental Static Regeneration (ISR) allows content editors and developers to use static generation on a per-page basis and update content without having to rebuild the entire site.
      • Lee Robinson
      Next.js query params inside getStaticProps (Incremental Static Regeneration) (
      Apr 12, 2021
      Have you ever wondered how to access query parameters "context.req.query" inside getStaticProps???
      • Bruno Antunes
      Using Docker with Next.js (and Deploying with Google Cloud Run) (
      Apr 02, 2021
      Learn how to build, run, and deploy a Next.js application using Docker and Google Cloud Run in under 10 minutes!
      • Lee Robinson
      Create an Ecommerce Site Using Shopify, Next.js, and (with Steve Sewell) (
      Mar 31, 2021
      How do you give non-developers control over the look and feel of an ecommerce site? Steve Sewell will teach us how to use Next.js, Shopify, and to do it!
      • Steve Sewell
      • Jason Lengstorf
      This is How Routing Works in Next.js (
      Mar 27, 2021
      In this video, I will show you how routing works in Next.js including pages and routes.
      • Hong Ly
      Using Serverless Redis with Next.js (
      Mar 26, 2021
      When front-end developers are learning the full-stack, they often stumble on which backend to use. If they hear Redis, they think of in-memory caching. That's what I thought, at least. After doing more research, I was surprised to find Redis excels at hashmaps, counters, sorted lists, and even queues.
      • Lee Robinson
      Building a Netflix Clone with Next.js, Tailwind CSS, and Next Auth (
      Mar 17, 2021
      Watch me build a clone of the landing page live using Next.js, Tailwind CSS for styling, and Next Auth to authenticate with Google.
      • Lee Robinson
      Next.js API Routes Validation using YUP: Share frontend and backend validation using YUP schemas (
      Mar 09, 2021
      In this video we will add validation to our Next.js API Routes using YUP. In order to achieve that in a simple and reusable way we will create a validation middleware that uses YUP for schema validation.
      • Bruno Antunes
      Deploying Next.js to AWS Using a Custom Domain Name (
      Jan 23, 2021
      In this short video I show how to deploy a Next.js app to AWS using a custom domain name, leveraging the Serverless Next.js component.
      Building a Serverless Multi-user Blogging Platform with Next.js, Tailwind, & AWS (
      Jan 21, 2021
      We'll start from scratch, creating a new Next.js app. We'll then, step by step, use the Amplify CLI to build out and configure our cloud infrastructure and then use the Amplify JS Libraries to connect the Next.js app to the APIs we create using the CLI.
      Next.js Tips for Building Faster (
      Jan 21, 2021
      React developers: see how you can streamline your workflow and build the fastest possible site quickly using Next.js.
      • Chris Sev
      Next.js AMA with Lee Robinson (
      Jan 18, 2021
      Ask our Solution Architect (Lee Robinson) anything about Next.js, React Server Components, Web Best Practices, Performance, Incremental Adoption, and Hosting.
      • Lee Robinson
      Client and Server Side Cookies in Next.js (
      Jan 14, 2021
      Let's learn how to set/remove cookies both in the browser but also on the server in Next.js. This will allow us to create HttpOnly cookies, perfect for storing sensitive data such as authentication tokens.
      Getting Started With Next.js (
      Jan 13, 2021
      Learn why so many React developers are switching to using Next.js, an open source framework that helps you build production-grade React applications that scale. This Tech Talk is designed for React developers that are looking to streamline your workflow.
      • Chris Sev
      Next.js on Fargate - Serverless Container Hosting with Docker and AWS Amplify (
      Jan 12, 2021
      In this video we'll start from scratch, creating a new Next.js app and then initializing a new Amplify project in the Next.js app directory. We'll then configure a custom domain and deploy the Next.js app to Amazon ECS on AWS Fargate using the Amplify CLI using the custom domain.
      Next.js 10 with Guillermo Rauch (
      Jan 07, 2021
      alking with Guillermo Rauch about Next.js 10 and Vercel. Including plans for 2021.
      • Guillermo Rauch
      Introduction to Next.js 10's Internationalized (i18n) Routing (
      Jan 06, 2021
      Next.js 10 came out with Internationalized Routes... we cover the basics of it in this video, how to load translated remote data, and how to translate text using react-intl.
      10 Next.js Tips You Might Not Know! (
      Jan 04, 2021
      Next.js can do a lot for you — which means there's features you probably haven't used! This video covers ten tips you might not know about Next.js.
      • Lee Robinson
      React Server Components (with Next.js Demo) (
      Dec 31, 2020
      React Server Components allow developers to build apps that span the server and client, combining the rich interactivity of client-side apps with the improved performance of traditional server rendering.
      • Lee Robinson
      Rebuilding the Twitter Embed Widget! (Next.js + Tailwind) (
      Dec 27, 2020
      Use the Twitter API, Tailwind CSS, and Next.js to embed tweets directly on your website without using any iframes or external scripts.
      • Lee Robinson
      Create a site like Pastebin with GraphQL + Next.js (
      Dec 23, 2020
      In this livestream we'll create a website that allows us to paste code snippets, and save them with friends! We'll use GraphQL mutations with GraphCMS inside a Next.js API route to store our data.
      • Jamie Barton
      Internationalization (i18n) with Next.js! (
      Dec 22, 2020
      Learn how to use Internationalized Routing with Next.js to support multiple languages on your site!
      • Lee Robinson
      Next.js Image Component and Image Optimization (
      Dec 21, 2020
      Learn how using the Next.js Image Component and Image Optimization will improve the performance, user experience, and SEO of your website.
      • Lee Robinson
      Next.js Image Component and Image Optimization + srcset and sizes explanation (
      Dec 21, 2020
      In this video we'll have a look at the new Image Component in Next.js. During this video we will learn how to use "srcset" and "sizes" attributes with the "normal" html "img" tag.
      • Bruno Antunes
      CSR / SSR / SSG / ISR with Next.js – Explained! (
      Dec 03, 2020
      Next.js is a hybrid framework, allowing you to choose your data fetching strategy on a per-page basis. Learn about all the different options available.
      • Lee Robinson
      Routing, Linking and Redirecting in Next.js (
      Nov 27, 2020
      In this video we'll cover a number of ways to send a user to a new page in Next.js. First using the Link component, next imperatively using the Next.js router, and then we'll cover how to create our own Redirect component and how to use Shallow routing.
      • Leigh Halliday
      How to Learn React, Next.js, or Anything (
      Nov 17, 2020
      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.
      • Arunoda Susiripala
      Next.js Router Update: Changes from Next 9.2 to Next 10 (
      Nov 17, 2020
      In this video we are going to see all the changes that happened in the Next.js Router between all the 9.x versions up to version 10.
      • Bruno Antunes
      Live Coding a Full Stack Serverless App with Next.js, Amazon Aurora Serverless, CDK, & TypeScript (
      Nov 17, 2020
      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.
      Next.js 10's New Image Component (
      Nov 17, 2020
      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.
      Adding Authentication to Next.js (GitHub Connect, JWT + Prisma 2 Integration) (
      Oct 05, 2020
      In this video we'll se NextAuth.js to easily add authentication to our Next.js application. We cover the GitHub provider, starting out without a database using JWT only, and later integrating Prisma 2 to store our users and their sessions in a database.
      Live Stream: Next.js Portfolio Site Work Time (
      Sep 24, 2020
      In this stream, I worked on learning Next.js in order to re-build my portfolio, I then deployed the site with AWS Amplify.
      • Ali Spittel
      Why I’m Using Next.js in 2020 (
      Aug 29, 2020
      Learn why the direction of Next.js (a React framework) might be aligned with the future of React
      • Lee Robinson
      (CI/CD): Deploy Next.js (SSG) to GitHub Pages using GitHub Actions (
      Aug 28, 2020
      In this video, we are going to deploy a Next.js (SSG) application to GitHub Pages using GitHub Actions (CI/CD).
      • Bruno Antunes
      Tracking Errors & Performance in Next.js with AppSignal (
      Aug 26, 2020
      In this video we cover how to add error and performance tracking to Next.js with AppSignal. We'll do this by adding a custom server to support server-side performance tracking.
      Authentication Patterns for Next.js (
      Aug 19, 2020
      Learn how to add authentication with Next.js. The video covers custom React Hooks, protecting routes and redirecting on the server, and includes a variety of examples.
      • Lee Robinson
      Next.js - Incremental Static Regeneration (ISR) and Static Site Generation (SSG) (
      Aug 19, 2020
      In this video, we will go through the new Incremental Static Regeneration (ISR) in Next.js. In order to explain and understand ISR, we will do a summary around Static Site Generation (SSG). We will look into fallback: false and fallback: true and revalidate property of getStaticProps.
      • Bruno Antunes
      Apollo Client v3 Fullstack Next.js Setup with SSR + Nexus Schema (
      Aug 17, 2020
      In this video we recreate the Next.js example setting up Apollo Client v3, Apollo Server, Nexus Schema, with support for SSR.
      Build your own GraphQL Resume with Next.js, Apollo Client, and Prism Code Highlighter. Part 2 / 2 (
      Aug 15, 2020
      In part two we will build out the frontend of our GraphQL Resume. First we set up the Apollo Client, then fetch and display the data that comes back from our GraphQL API. Lastly we add Prism Code Highlighter to show display the GraphQL query which retrieved the data we are displaying.
      Build your own GraphQL Resume with Next.js, Apollo Server, and Nexus Schema. Part 1 / 2 (
      Aug 11, 2020
      In this video we will use a code-first approach to building a GraphQL API. This means that the code we write will generate the GraphQL schema as an artifact rather than something we have to maintain ourselves.
      Creating a User Registration form with react-hook-form (
      Jul 31, 2020
      We'll create a User Registration Form in Next.js using react-hook-form, testing its validation with react testing library.
      Full Stack Next.js & MongoDB from Start to Finish (
      Jul 23, 2020
      In this video we'll take a React map in Next.js, and build out the backend, storing our data in MongoDB. We'll see how to connect the frontend to the backend, connecting to the database, interacting with it, and some gotchas that you may encounter.
      Next.js API Routes using next-connect (
      Jul 13, 2020
      In this video, we will create Next.js API Routes using next-connect. We will also show how to have middleware using next-connect for authentication and authorization.
      • Bruno Antunes
      Deploying Next.js to Vercel with Environment Variables (
      Jul 05, 2020
      Let's deploy a Next.js app to Vercel! This app contains two types of Env variables... one we want to include in the public build of our app, and another we only want available during "runtime", which means in this case when the serverless api functions are executed... these env variables in runtime are secret!
      Building static sites with Prisma and Next.js workshop (
      Jul 01, 2020
      The workshop was streamed on PrismaDay | June 25th, 2020
      • Lee Robinson
      Building a Backend for React with Next.js, Prisma 2, and Postgres (
      Jun 24, 2020
      In this video we will take an existing React app using Google Maps, and using Next.js (API routes), Prisma 2, and Postgres, we will learn how to read data from, and save data to our database.
      Instagram Style Route as Modal in Next.js (
      Apr 23, 2020
      This is an example of how to do routing as a modal in Next.js, where when the user clicks a link, content is shown within a modal, but when the user refreshes the page, they are on a dedicated page for that content.
      Fetch props directly from the Database?!?! New Hooks in Next.js 9.3! (
      Apr 19, 2020
      Fetch your props directly from the Database?!?! Adam Wathan showed a simple example of loading props directly from the database.
      GraphCMS x Next.js | Working with getStaticProps, getStaticPaths and GraphQL (
      Apr 10, 2020
      In this video we will configure Next.js to programmatically create our product pages by querying data from GraphCMS at build time.
      • Jamie Barton
      How to add Auth0 to Nextjs- the Ultimate Guide (
      Mar 31, 2020
      Learn how to add Auth0 to your Next.js application so that you will have foolproof user authentication and authorization.
      • Stephen Jensen
      Gatsby vs Next.js: Which does SSG Better? (
      Mar 30, 2020
      The battle you've all been waiting for! Which does static site generation better? Next.js or Gatsby?
      • Harry Wolff
      How to Add Monaco Editor to a Next.js app (
      Mar 30, 2020
      A quick tutorial on adding VS Code's Monaco Editor to a Next.js app.
      Next.js Static Site Generation (SSG) Tutorial (
      Mar 24, 2020
      Learn how to use static site generation in Next.js in this tutorial where I show you how you can setup.
      Building a GraphQL server in Next.js (
      Feb 10, 2020
      In this video, we will learn how to use API routes to set up a GraphQL API within a Next.js app.
      Mastering the basics of SEO in React and Next.js (
      Jan 27, 2020
      SEO from a technical perspective is nothing more than adding a few meta tags, right? Sorta... in this video we'll take a basic Next.js application, and get it to a score of 100 in Lighthouse Audit.
      Next.js SSR Refresh Tokens (
      Oct 03, 2019
      Learn how to get refresh tokens working with Next.js and server side rendering.
      ServerSide React for WordPress w Muhammad Muhsin (
      Aug 15, 2019
      In this talk from the 2019 JavaScript for WordPress Conference, Muhammad Muhsin explains how to use WordPress with ServerSide React!
      • Muhammad Muhsin
      Next.js: The React Framework (
      Aug 07, 2019
      Building fast and scaleable React applications is complex. There are many pieces that have to come together, from compilation to optimization to developer experience. Furthermore there are many strategies in which websites and applications are being built today, for example statically pre-rendering, server-rendering and client-side only rendering. Let's explore how Next.js solves all of these problems for you.
      Next.js vs Gatsby for SEO (
      Jul 03, 2019
      I explain the differences between how Next.js and Gatsby work and which one I recommend for good SEO.
      Next.js Persist State with Cookies (
      Jun 30, 2019
      Learn how you can persist state in Next.js with cookies.
      Why Next.js is an effective framework to build any kind of website (
      Jun 13, 2019
      Tim and Sadek are discussing the advantages of using Next.js on top of React.
      Lightning fast SSR React apps with top perceived performance and no [...] (
      May 03, 2019
      Let’s have a look on how you can do the same with Next.js, and if the principles still apply today. Is the user getting a better perceived experience when we turn off the client side JavaScript?
      • Håkon Gullord Krogh
      Next for Next.js (
      May 03, 2019
      With powerful features out of the box such as code-splitting, server-side rendering and powerful optimizations, this talk discusses the exciting next steps for Next.js.
      Authentication Higher Order Component in Next.js (
      Dec 29, 2018
      How to create an Authentication Higher Order Component in React for Next.js.
      Next.js SSR with 2 Apollo Clients (
      Dec 09, 2018
      We have 2 GraphQL endpoints, so I needed 2 Apollo clients and got them working with Next.js and SSR.
      Setup TailwindCSS with Next.js (
      Nov 25, 2018
      Learn how to setup TailwindCSS with NextJS.
      • Jamie Barton
      Building a Server-Rendered React App Using Next.js (
      Jul 31, 2018
      In this talk, I'll tell you how I used Next.js (a framework for static and server‑rendered apps) and the Enigma Public API (free search and discovery of public data) to build my latest project, "Today in Public Data."
      • Abe Rubenstein
      Building a High Performance, Dynamic CDN with Next.js (
      May 28, 2018
      In this talk, we will delve into tuning an out-of-the-box Next.js application to serve thousands of requests on a single instance. Then how we achieved CDN-like performance while supporting dynamic content for Help Users Vote.
      • Fouad Matin
      Universal React Apps Using Next (
      May 25, 2018
      Every user’s hardware is different, and processing speed can hinder user experience on client-side rendered React applications. Server-side rendering and code-splitting can drastically improve user experience by minimizing the work that the client has to do. It’s easy to get lost in the lingo, so come learn what it all means and how to easily build universal React apps using the Next.js framework. We’ll walk through the concepts and use code examples to cement your understanding. You’ll get the most out of this session if you’re comfortable with React and ES6 syntax.
      • Sia Karamalegos
      ZEIT Day 2018 - Keynote (
      May 03, 2018
      In this keynote, of our third conference in San Francisco, we are talking about what we have accomplished so far and what the future of cloud computing holds. We also announced Next.js 6 and MDX.
      Next.js Crash Course - Server Side React (
      Jan 19, 2018
      In this video we will talk about Next.js which is a framework to render React on the server. We will look at setup and build a simple application that pulls Bitcoin pricing from an API and displays it in the app.
      Next.js by Example (
      Oct 02, 2017
      Guillermo Rauch gave this talk at Nordic.js 2017.
      • Guillermo Rauch
      styled-jsx with Next.js (
      Jun 27, 2017
      I recorded a quick video to show you an awesome CSS-in-JS solution that is styled-jsx. Check it out!
      • Jamie Barton
      React Server Side Rendering with Next.js (
      Jun 18, 2017
      Let’s talk about Server Side Rendering, SEO, React and many more things Next.js tries to solve.
      • Jamie Barton
      Next for Next.js (
      Jun 03, 2017
      This talk will live demo some of the upcoming features, enhancements and performance improvements coming to Next.js.
      • Arunoda Susiripala
      Next.js Conf – Special Edition (
      Hosted by Vercel, creators of Next.js, with special guests from Google Chrome and the Next.js Community.
      • Guillermo Rauch
      • Lydia Hallie
      • Shubhie Panicker
      • & Houssein Djirdeh

      Books & Guides

      The Next.js Handbook (
      Nov 19, 2019
      I wrote this book to teach you all I know about Next.js!
      Hands on Next.js (
      Apr 27, 2018
      A Practical Fullstack Book on Universal (Server) Rendering for React

      Courses & Video Series

      Production-Grade Next.js (
      Mar 02, 2021
      Take Next.js to the next level through building a production-ready, full-stack React app. You’ll add authentication to your app, add the ability to generate hundreds of pages performantly, preview your content, query a database, and use a CMS with Next.js. Then deploy your app to production using the Vercel platform.
      • Scott Moss
      Introduction to Next.js (
      Sep 15, 2020
      Next.js is a complete full-stack framework built on top of React.js. You can use Next.js to create static sites like blogs and documentation websites to even full-blown, full-stack applications, and APIs. In this course, you'll learn server-side rendering, static site generation, data fetching, build API endpoints, creating pages with the file system, add CSS modules inside of Next.js, and much more!
      • Scott Moss
      Frontend Serverless with React and GraphQL (
      Mar 31, 2020
      Learn how to build end-to-end strongly-typed React apps that enable you to focus less on writing fragile, single purpose data fetching code and more on functionality that your users care about.
      • Stephen Jensen
      Mastering Next.js (
      Nov 04, 2019
      The premiere video course for building production, server-side rendered applications with Next.js and React.
      • Lee Robinson
      Getting Started With NextJS (
      Oct 31, 2019
      Learn all about NextJS 9's new API Routes, MongoDB for Data, Server Side Rendered React, Apollo Client and Server from within NextJS.
      Typescript, Next.js, And GraphQL Series (
      Jan 27, 2019
      Learn how to setup a Next.js project with typescript.
      Building Server-side Rendered React Apps for Beginners (
      Jan 02, 2019
      You'll see how to easily build high performance web apps that implement server-side rendering on every landing page using the Next.js framework.
      • Peter Kellner
      Building Apps with Third Party Integrations (
      Dec 27, 2018
      How to make safe, secure and robust web apps that use third party APIs.
      • Mike Solomon
      Universal JavaScript with Next.js (
      Jun 12, 2018
      Zero configuration, universal JavaScript web apps with Next.js for React.
      • Remy Sharp
      Headless WordPress (
      Apr 30, 2018
      Learn how you can build a headless WordPress site with ease using both Next.js or Gatsby
      React: Server-Side Rendering (
      Apr 04, 2018
      Create a faster and more responsive user experience by implementing server-side rendering in your React projects
      Build a Server-rendered ReactJS Application with Next.js (
      Feb 16, 2018
      In this course we we’ll see just how quickly next.js makes the process of building server-rendered ReactJS applications by creating and deploying an application that loads blog posts from the Google Blogger API.
      • Thomas Greco
      Build a universal React application with Next.js (
      Jul 07, 2017
      In this series we will build a universal/isomorphic JavaScript application using Next.js that displays repos by a GitHub user.
      • Jamie Barton

      Podcast Episodes

      Arunoda Susiripala — Building Storybook, Meteor, Next and communities on open source (
      Aug 22, 2020
      Arunoda is a prolific open source contributor, having built Storybook, and being a core contributor to MeteorJS and NextJS. He and I talk about how he started his career in open source, which led to him freelancing, then building Kadira (an performance monitoring tool for MeteorJS) and Storybook. After leaving the Meteor community he went on to work with Vercel as a maintainer of NextJS and their core hosting platform.
      • Arunoda Susiripala
      • Matthew Weeks
      Guillermo Rauch — NextJS 9.4, JAMStack, distributed systems, and manging eventually consistent state (
      May 14, 2020
      This week, I spoke with Guillermo Rauch, the CEO of Vercel (formerly Zeit) and co-creator of NextJS, and long-term member of the open source community.
      • Guillermo Rauch
      • Matthew Weeks
      Continuing to Innovate with Next.js 9.3 (
      Apr 08, 2020
      In this episode, Adam is talks to Tim Neutkens about what's new in Next.js 9.3 and how it's changing the way applications are built at ZEIT.
      Embrace the PHP with Next.js, Featuring Tim Neutkens (
      Jul 07, 2019
      We sit with Tim Neutkens, lead developer on Next.js, an open source framework, for react, by ZEIT. He tells us how you can get back to that beautiful, fun PHP experience but with all of the benefits of SSR, HMR, AMP, and so many more initialisms.
      Gatsby vs Next (
      Feb 20, 2019
      In this episode, Wes and Scott debate Gatsby vs Next — how they compare, the pros and cons of each, why you might chose one over the other for your next project, and more!
      Tim Neutkens - Building React Apps with Next.js (
      Oct 10, 2018
      In this episode Adam talks to Tim Neutkens about Next.js, an opinionated React framework for building server-rendered client-side applications.
      Next.js (
      Oct 03, 2018
      Today Una and Chris discuss Next.js, the much buzzed about server-side rendering React platform.
      • Una Kravets
      • Chris Dhanaraj


      next (
      Aug 01, 2019
      Next.js is a minimalistic framework for server-rendered React applications
      nextron (
      Jul 25, 2019
      Build an Electron + Next.js app for speed.
      • Yoshihide Shiono
      next-seo (
      Jul 20, 2019
      Next SEO is a plug in that makes managing your SEO easier in Next.js projects.
      • Gary Meehan