Using Next.js

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

Articles & Tutorials

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

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

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