Using Next.js

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

Articles & Tutorials

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

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

Hands on Next.js (
Apr 27, 2018
A Practical Fullstack Book on Universal (Server) Rendering for React

Courses & Video Series

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

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