Using Next.js

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.

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.

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.

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.

This post will walk through the creation of a realtime chat application with Next.js and deploying it to Vercel.

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.

This post will cover the relevant bits of this new strategy and explain why it’s a game-changer for web development.

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.

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.

In this blog post, we will build a simple NextJS app from scratch, using Apollo Client to consume the GraphQL API of Slash GraphQL.

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.

In this article, we’ll use Next.js and Sanity.io to create a commenting engine that meets those needs. One unified platform for content, editors, commenters, and developers.

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.

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.

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.

Next.js 10 introduces Built-in Image Optimization, Internationalized Routing, Next.js Analytics, React 17 Support, and more.

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.

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.

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.

In this article, I will walk you through the Nextjs features that I personally use the most.

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.

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.

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!

A simple guide to use Next.js with Stitches.

The Jamstack architecture is a modern approach to an old idea: making fast, static websites, but making them dynamic with tools like JavaScript.

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.

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.

Using Agility CMS JAMstack Starter

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.

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.

This post documents my learnings and the steps I took to implement syntax highlighting in a Next.js Markdown blog.

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!

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.

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.

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.

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.

We’re going to put together a Next.js app that uses the YouTube API To fetch videos from a playlist.

Next.js 9.5 introduces Stable Incremental Static Regeneration, Custom Base Path, Redirects and Rewrites, Webpack 5 Beta, and more!

How to use Static Generation, Incremental Static Generation, and Client-side Fetching with Next.js.

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?

In this article, we will use Next.js to build a static blog framework with the design and structure inspired by Jekyll.

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.

Publishing React components from a NextJS Project, to reuse in another.

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.

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.

How Next.js evolved, and why it’s one of the best React frameworks on the market.

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.

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.

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.

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.

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.

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!

Measure the performance of our Next.js application with Web Vitals.

Next.js 9.4 introduces React Fast Refresh, Incremental Static Regeneration, New Environment Support, Built-in Fetch, and more.

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.

In this tutorial you'll learn how to deploy a Next app to AWS using Amplify Hosting.

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.

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.

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!

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.

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?

A definitive guide for adding Auth0 to your Next.js project.

I revamped my personal site, adding a variety of improvements for the ideal Next.js + MDX blogging experience.

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.

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.

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.

We are excited today to introduce Next.js 9.3.

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.

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.

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.

Push to deploy. The easy way.

In this article, we’ll break down all the new and shiny features that shipped with the latest version of Next.js.

Let’s combine all these powerful tools to build awesome products.

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.

We are excited today to introduce Next.js 9.2.

We're excited to announce the new Next.js documentation.

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!

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.

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.

Accessing cookies while server-side rendering in Next.js can be harder than you think. Here's how I solved it.

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.

Learn this powerful technique provided by Next.js to create an API endpoint within a Next.js app.

Learn how to use the `next/router` package to control routes in Next.js

How Next.js separates your app code into different bundles, and what do they contain.

Learn what the icons generated by Next.js in development mode mean.

How to use a wrapper component and add a common sidebar or header to it.

How to lazy load modules in your Next.js app.

Learn more about what's in your Next.js app bundles.

How to generate the production version of your Next.js app.

How to use Now to easily and seamlessly deploy your Next.js app.

How to style React components in Next.js?

How to feed data to a Next.js component using getInitialProps

How to setup dynamic content in a Next.js site

How to link two or more pages in Next.js

An internationalized HTTP/2 React app that is fast and SEO friendly.

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.

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.

Learn how (and where) to authenticate your user in the different deployment models that exist for Next.js.

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.

Today, we are excited to announce Next.js 9.1 with src and public directory support.

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.

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.

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?

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.

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.

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.

Overview of the file structure I like to use in Next.js projects.

Learn how to test components using dynamic imports in a Next.js application.

InfoQ interviewed Tim Neutkens, co-author of Next.js, on the motivation and contents of the recent release, and the plans for the future.

Learn how to create redirects when using Next.js in the most efficient way.

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.

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.

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.

Learn how to use Next.js to add navigation and routing to server-side rendered React applications.

The following implementation shows you how to integrate Redux Persist into Next.js with a quick example.

In this blog post we will go through building a server-rendered realtime collaborative todo list app with Next.js and AWS Amplify.

Learn how to handle styling and theming while using Next.js to build server-side rendered React applications.

Learn how to use Next.js to create server-side rendered React applications.

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.

After 70 canary releases we are pleased to introduce Next.js 9.

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.

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.

Both libraries are impressive, but there are some tricks to know to make them playing well together.

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.

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.

Learn how to add authentication to your Next.js application with Passport.

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.

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.

Today, we're excited to announce we've extended the Next.js experience to authoring AMP pages.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

We are proud today to introduce the production-ready Next.js 8.

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.

This is the 1st post for Movies store, the React & Redux E-commerce app tutorial series created by appbase.io.

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.

In this tutorial, we are going to build a small Hacker News React app using the Next.js framework.

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.

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.

With some basic React and JavaScript knowledge, you’ll be on your way

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.

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.

Practical tips with real world code snippets to help you in building your Next.js app using React Hooks, Fastify and more.

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

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.

Lately Gatsby and Next have gotten lots of attention. At first glance, they both seem very similar.

After 26 canary releases and 3.4 million downloads, we are proud to introduce the production-ready Next.js 7.

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.

In this post we will be adding Google Analytics to our blog by leveraging Next.js's custom _document.js file.

This blog post is part two in a series of posts on developing a blog with Next.js and Prismic.

We are proud today to introduce the production-ready Next.js 6.1.

Recently I decided to rebuild my blog using Next.js powered by Prismic.io.

Today, I’ll use Next.js to craft a crawler-friendly e-commerce SPA

We are proud today to introduce the production-ready Next.js 6.

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.

Letting customers operate their own applications without source code is the key point in this deploy flow.

This guide walks you through setting up authentication and authorisation in an example application created with Next.js and Auth0.

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

We are happy to introduce Next.js 5.1, which features support for environment configuration, phases, source maps, and new Next.js plugins.

We are very happy to introduce Next.js 5.0 to the world. It’s available on npm effective immediately.

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.

Next provides a simple yet customizable solution to building production-ready SPAs.

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.

Universally render your application with Apollo and Next

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 Builder.io to do it!

In this video, I will show you how routing works in Next.js including pages and routes.

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.

Watch me build a clone of the Netflix.com landing page live using Next.js, Tailwind CSS for styling, and Next Auth to authenticate with Google.

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.

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.

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.

React developers: see how you can streamline your workflow and build the fastest possible site quickly using Next.js.

Ask our Solution Architect (Lee Robinson) anything about Next.js, React Server Components, Web Best Practices, Performance, Incremental Adoption, and Hosting.

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.

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.

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.

alking with Guillermo Rauch about Next.js 10 and Vercel. Including plans for 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.

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.

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.

Use the Twitter API, Tailwind CSS, and Next.js to embed tweets directly on your website without using any iframes or external scripts.

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.

Learn how to use Internationalized Routing with Next.js to support multiple languages on your site!

Learn how using the Next.js Image Component and Image Optimization will improve the performance, user experience, and SEO of your website.

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.

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.

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.

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.

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.

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.

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.

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.

In this stream, I worked on learning Next.js in order to re-build my portfolio, alispit.tel. I then deployed the site with AWS Amplify.

Learn why the direction of Next.js (a React framework) might be aligned with the future of React

In this video, we are going to deploy a Next.js (SSG) application to GitHub Pages using GitHub Actions (CI/CD).

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.

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.

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.

In this video we recreate the Next.js example setting up Apollo Client v3, Apollo Server, Nexus Schema, with support for SSR.

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.

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.

We'll create a User Registration Form in Next.js using react-hook-form, testing its validation with react testing library.

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.

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.

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!

The workshop was streamed on PrismaDay | June 25th, 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.

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 your props directly from the Database?!?! Adam Wathan showed a simple example of loading props directly from the database.

In this video we will configure Next.js to programmatically create our product pages by querying data from GraphCMS at build time.

Learn how to add Auth0 to your Next.js application so that you will have foolproof user authentication and authorization.

The battle you've all been waiting for! Which does static site generation better? Next.js or Gatsby?

A quick tutorial on adding VS Code's Monaco Editor to a Next.js app.

Learn how to use static site generation in Next.js in this tutorial where I show you how you can setup.

In this video, we will learn how to use API routes to set up a GraphQL API within a Next.js app.

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.

Learn how to get refresh tokens working with Next.js and server side rendering.

In this talk from the 2019 JavaScript for WordPress Conference, Muhammad Muhsin explains how to use WordPress with ServerSide React!

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.

I explain the differences between how Next.js and Gatsby work and which one I recommend for good SEO.

Learn how you can persist state in Next.js with cookies.

Tim and Sadek are discussing the advantages of using Next.js on top of React.

What's coming to Next.js.

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?

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.

How to create an Authentication Higher Order Component in React for Next.js.

We have 2 GraphQL endpoints, so I needed 2 Apollo clients and got them working with Next.js and SSR.

Learn how to setup TailwindCSS with NextJS.

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

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.

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.

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.

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.

Guillermo Rauch gave this talk at Nordic.js 2017.

I recorded a quick video to show you an awesome CSS-in-JS solution that is styled-jsx. Check it out!

Let’s talk about Server Side Rendering, SEO, React and many more things Next.js tries to solve.

This talk will live demo some of the upcoming features, enhancements and performance improvements coming to Next.js.

Hosted by Vercel, creators of Next.js, with special guests from Google Chrome and the Next.js Community.

Create a faster and more responsive user experience by implementing server-side rendering in your React projects

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.

In this series we will build a universal/isomorphic JavaScript application using Next.js that displays repos by a GitHub user.