Using Next.js

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

Articles & Tutorials

Next.js E-Commerce Tutorial: Quick Shopping Cart Integration (snipcart.com)
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 (auth0.com)
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 (hackernoon.com)
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 (reacttricks.com)
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 (nextjs.org)
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 (nextjs.org)
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 (medium.com)
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 (reacttricks.com)
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 (medium.com)
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 (blog.hasura.io)
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 (jolvera.biz)
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 (nextjs.org)
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! (medium.com)
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 (vijayt.com)
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 (leerob.io)
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 (reacttricks.com)
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 (nextjs.org)
Feb 11, 2019
We are proud today to introduce the production-ready Next.js 8.
Materialize your Next.js project with MDBootstrap for React (mdbootstrap.com)
Feb 04, 2019
I'm Jakub, I work as a Front-End Developer in MDBootstrap.com, 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  (medium.appbase.io)
Feb 04, 2019
This is the 1st post for Movies store, the React & Redux E-commerce app tutorial series created by appbase.io.
  • Kuldeep Saxena
How We Moved From Wordpress to React and Raised $80 Million (medium.com)
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 (medium.com)
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) (leerob.io)
Jan 13, 2019
In the process of selecting a mapping library for dsmtech.io, 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 (garymeehan.ie)
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 (medium.freecodecamp.org)
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 (medium.com)
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 (medium.com)
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 (medium.com)
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 (medium.com)
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 (dawnlabs.io)
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 (blog.jakoblind.no)
Sep 20, 2018
Lately Gatsby and Next have gotten lots of attention. At first glance, they both seem very similar.
Next.js 7 (nextjs.org)
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 (dev.to)
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
SEO in Next.js and Prismic (garymeehan.ie)
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 (nextjs.org)
Jun 27, 2018
We are proud today to introduce the production-ready Next.js 6.1.
Server side rendered blog with Next.js and Prismic.io (garymeehan.ie)
Jun 10, 2018
Recently I decided to rebuild my blog using Next.js powered by Prismic.io.
  • Gary Meehan
How to handle SEO with a React SPA (medium.freecodecamp.org)
Jun 05, 2018
Today, I’ll use Next.js to craft a crawler-friendly e-commerce SPA
  • Maxime LaBoissonniere
Next.js 6 and Nextjs.org (nextjs.org)
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 (blog.pusher.com)
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 (medium.com)
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 (blog.fullstacktraining.com)
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 (medium.freecodecamp.org)
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 (nextjs.org)
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 (nextjs.org)
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 (scotch.io)
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 (sitepoint.com)
Sep 25, 2017
Next provides a simple yet customizable solution to building production-ready SPAs.
  • Jatin Shridhar
Redux and Redux Saga in Next.js (robinwieruch.de)
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 (blog.apollographql.com)
Mar 23, 2017
Universally render your application with Apollo and Next
  • Adam Soffer

Video Guides & Talks

Lightning fast SSR React apps with top perceived performance and no [...] (youtube.com)
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 (youtube.com)
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 (youtube.com)
Dec 29, 2018
How to create an Authentication Higher Order Component in React for Next.js.
Next.js SSR with 2 Apollo Clients (youtube.com)
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 (youtube.com)
Nov 25, 2018
Learn how to setup TailwindCSS with NextJS.
  • Jamie Barton
Building a Server-Rendered React App Using Next.js (youtube.com)
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 (youtube.com)
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 (youtube.com)
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 (youtube.com)
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 (youtube.com)
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 (youtube.com)
Oct 02, 2017
Guillermo Rauch gave this talk at Nordic.js 2017.
  • Guillermo Rauch
styled-jsx with Next.js (youtube.com)
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 (youtube.com)
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 (youtube.com)
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 (honext.io)
Apr 27, 2018
A Practical Fullstack Book on Universal (Server) Rendering for React

Courses & Video Series

Typescript, Next.js, And GraphQL Series (youtube.com)
Jan 27, 2019
Learn how to setup a Next.js project with typescript.
Building Server-side Rendered React Apps for Beginners (pluralsight.com)
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 (udemy.com)
Dec 27, 2018
How to make safe, secure and robust web apps that use third party APIs.
  • Mike Solomon
Universal JavaScript with Next.js (next.training.leftlogic.com)
Jun 12, 2018
Zero configuration, universal JavaScript web apps with Next.js for React.
  • Remy Sharp
Headless WordPress (leveluptutorials.com)
Apr 30, 2018
Learn how you can build a headless WordPress site with ease using both Next.js or Gatsby
React: Server-Side Rendering (lynda.com)
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 (egghead.io)
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 (youtube.com)
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

Gatsby vs Next (syntax.fm)
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 (fullstackradio.com)
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 (spec.fm)
Oct 03, 2018
Today Una and Chris discuss Next.js, the much buzzed about server-side rendering React platform.
  • Una Kravets
  • Chris Dhanaraj

Libraries

nextron (github.com)138
v4.7.8
May 17, 2019
Build an Electron + Next.js app for speed.
  • Yoshihide Shiono
next (nextjs.org)34873
v8.1.0
Apr 17, 2019
Next.js is a minimalistic framework for server-rendered React applications
next-seo (github.com)279
v1.11.2
Apr 04, 2019
Next SEO is a plug in that makes managing your SEO easier in Next.js projects.
  • Gary Meehan