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

Next.js 9.5

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.

Special thanks to AppSignal for partnering with me on this content! Please check them out at https://www.appsignal.com/nodejs and use the coupon code "leigh" for 10% off your first year. It's free to try out for a month!

00:00 - Introduction
03:35 - AppSignal
05:00 - MongoDB Setup
10:00 - Creating Sightings
13:45 - Database Client
16:00 - Inserting Data
20:15 - Fetching Sightings
26:00 - Schema Validation

Join me on Discord! https://discord.gg/wcSNwfu
View the source code: https://github.com/leighhalliday/next-mongo-demo
Deep dive on React Query: https://youtu.be/vzLmQn19kS4
Deep dive on Google Maps: https://youtu.be/WZcxJGmLbSo
MongoDB schema validation: https://www.leighhalliday.com/mongodb-geojson-schema-validation

Full Stack Next.js & MongoDB from Start to Finish

In this video we are going to learn how to work with the getServerSideProps(), getStaticProps(), and getStaticPaths() methods for static generation and server-side rendering in Next.js.

Next.js 9.3+ Data Fetching Explained: getServerSideProps(), getStaticProps(), and getStaticPaths()

Learn how to use Framer Motion to add animations and page transitions to your Next.js React app. We'll walk through setting up some basic animations when the page loads, some dynamic hover effects, and weird transitions for our Rick and Morty Wiki app.

🗒️ Original Post
https://www.freecodecamp.org/news/how-to-add-interactive-animations-and-page-transitions-to-a-next-js-web-app-with-framer-motion/

🔔 Subscribe for more tech and developer videos
https://www.youtube.com/colbyfayock?sub_confirmation=1

🐦 Get updates straight to your Twitter @colbyfayock
https://twitter.com/colbyfayock

✉️ Or a newsletter right to your inbox!
https://www.colbyfayock.com/newsletter/

💝 Sponsor me for more free content like this!
https://github.com/sponsors/colbyfayock

👨‍🚀 Brought to by colbyfayock.com
https://www.colbyfayock.com

🎥 Want to know what A/V equipment I use?
https://www.colbyfayock.com/what-i-use

🧰 More Resources

Part 1 - How to Create a Dynamic Rick and Morty Wiki Web App with Next.js
https://www.freecodecamp.org/news/how-to-create-a-dynamic-rick-and-morty-wiki-web-app-with-next-js/
https://www.youtube.com/watch?v=iW39Merz0zE

Framer Motion
https://www.framer.com/api/motion/

🎼 Music
Bad Snacks - Future City Funk
youtube.com/audiolibrary/music

How to Use Framer Motion to Add Animations and Page Transitions to a Next.js React App

Learn how to build a dynamic web app using Next.js from Vercel. We'll walk through building a character wiki for Rick and Morty by using the Rick and Morty API. We'll build out a Next.js app that fetches data on the server with pagination and has dynamic routes.

🗒️ Original Post
https://www.freecodecamp.org/news/how-to-create-a-dynamic-rick-and-morty-wiki-web-app-with-next-js/

🔔 Subscribe for more tech and developer videos
https://www.youtube.com/colbyfayock?sub_confirmation=1

🐦 Get updates straight to your Twitter @colbyfayock
https://twitter.com/colbyfayock

✉️ Or a newsletter right to your inbox!
https://www.colbyfayock.com/newsletter/

💝 Sponsor me for more free content like this!
https://github.com/sponsors/colbyfayock

👨‍🚀 Brought to by colbyfayock.com
https://www.colbyfayock.com

🎥 Want to know what A/V equipment I use?
https://www.colbyfayock.com/what-i-use

🧰 More Resources

Next.js
https://nextjs.org/

The Rick and Morty API
https://rickandmortyapi.com/

Next.js getServerSideProps
https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering

Next.js Dynamic Routes
https://nextjs.org/docs/routing/dynamic-routes

🎼 Music
Space Navigator by Sarah, The Illstrumentalist
https://www.youtube.com/audiolibrary/music

How to Create a Next.js App: Rick and Morty Dynamic Wiki

Learn how to build Server Side Rendered React applications in this Next.js tutorial. In this video, Cassidy talks about how Next.js fits in with the Jamstack, how to use some of their built-in features like routing, and how to deploy it to Netlify. 

___________________________________________
Learn with Auth0

Try Auth0 for free - https://auth0.com/ 
Upcoming Events - https://avocadolabs.dev/
The Auth0 blog - https://auth0.com/blog/ 
Watch Live Streams on Twitch - http://twitch.tv/auth0
Ask questions on the Community Forum - https://community.auth0.com/

___________________________________________
Follow Us on Social

Follow us on Twitter - https://twitter.com/auth0/ 
Follow us on LinkedIn - https://www.linkedin.com/company/auth0/

Next.js From The Ground Up - Cassidy Williams

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 live app (add some bear sightings!!): https://next-prisma-demo.vercel.app/
Join me on Discord! https://discord.gg/wcSNwfu
How to build the map: https://youtu.be/WZcxJGmLbSo
How to work with Prisma: https://youtu.be/Bqacj0iOL68
Source code: https://github.com/leighhalliday/next-prisma-demo
Vercel configuration: https://vercel.com/docs/configuration#project/env

00:00 - Introduction
00:55 - Deploying to Vercel
02:20 - Adding Environment Variables
08:00 - Runtime vs Build Time Variables

Deploying Next.js to Vercel with Environment Variables

Want to persist your data between page loads? You need a backend! Becoming a full stack developer means learning the ins and outs of how to add a backend that your frontend in React can interact with. 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.

00:00 - Introduction
05:40 - Setting up Prisma 2
09:05 - Defining Prisma Schema
14:30 - Next.js API Routes
19:30 - Creating Sighting w/ Prisma
24:20 - Fetching Sightings w/ Prisma
27:01 - react-query useQuery
31:30 - react-query useMutation
40:00 - Optimistic UI w/ react-query

Join me on Discord! https://discord.gg/wcSNwfu
Source Code: https://github.com/leighhalliday/next-prisma-demo
Google Maps in React Video: https://youtu.be/WZcxJGmLbSo
Prisma Setup: https://www.prisma.io/docs/getting-started/setup-prisma/add-to-existing-project-typescript-postgres#set-up-prisma
Prisma Migrate: https://www.prisma.io/docs/reference/tools-and-interfaces/prisma-migrate

Building a Backend for React with Next.js, Prisma 2, and Postgres

In this video we'll cover the Web Speech API, building a word matching game for learning a language, similar to one of the features that DuoLingo has.

Give it a try! 
https://use-pairs.now.sh/en/es

Source Code
https://github.com/leighhalliday/use-pairs

Web Speech API Documentation
https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance
https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis/getVoices

Join me on Discord! https://discord.gg/wcSNwfu

Web Speech API & React Tutorial - Word Matching Game

In this online meetup, Maxime Castres, Growth Hacker at Strapi first introduced the JAMstack and how you can benefit from this way of building website by creating a Strapi and Next.js blog. He then deployed a blog starter Strapi application on Heroku that will be used by our guest to fetch data.

Shu Uesugi, Product Engineer at Vercel joined us and explained in details how Next.js works behind the curtain (Static Site Generation function). He finished by showing us how he deployed the blog on Vercel.

We are pleased to present the program for this online meetup:

  - Introduction to JAMstack: 05:22
  - Introduction to Strapi: 10:04
  - Deploy Strapi on Heroku: 12:46
  - Introduction to Next.js and Vercel: 20:36
  - Deploy a Next.js static blog starter using Strapi on Vercel: 40:05

Next.js 9.5 (nextjs.org)