Using Next.js

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

Articles & Tutorials

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

    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