In this video I show you: 

- When to use getStaticProps.
- How to use getStaticProps.
- How to do incremental Static Generation with getStaticProps.
- What it looks like for the end user. 

Looking for the slides? https://docs.google.com/presentation/d/1kEfVxstADyymkR-90IdVc5VNAFJDh7s3aU9FeabNzyQ/edit?usp=sharing

00:00 - Introduction 
00:26 - What is getStaticProps
00:55 - When to use getStaticProps
01:20 - Getting fresh data using incremental SSG
01:52 - Advantages of incremental SSG 
02:58 - Coding getStaticProps
05:08 - Using the props 
07:10 - What the end user sees.
08:09 - Adding incremental SSG to our getStaticProps
10:09 - Showing getStaticProps and incremental SSG in action
11:30 - Outro
---
Buy my NextJS Course: https://gumroad.com/products/xltURi/
-- 
Support my channel:
Donate via Xsplit: https://www.xsplit.com/u/jamesperkins
--
Follow me on:
📃 Website/Blog: https://jamesperkins.io
👉 Twitter: https://twitter.com/james_r_perkins
👉 Linkedin: https://www.linkedin.com/in/james-perkins-268992a4
👉 Github: https://github.com/perkinsjr

When and Why to use getStaticProps

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

0:00 – Introduction
1:05 – Background on Next.js
2:40 – Performance
4:41 – Developer Experience
6:42 – Deployment
7:50 – Community
8:55 – Conclusion

*Note: Image Optimization and Internationalization are still being worked on and not in the framework yet. 

Conf: https://nextjs.org/conf
Inspiration: https://github.com/vercel/next.js/discussions/14953#discussioncomment-34938
–––––
Blog: https://leerob.io/
Twitter: https://twitter.com/leeerob
GitHub: https://github.com/leerob

Why I’m Using Next.js in 2020

In this video we'll learn how to import browser only libraries into your Next.js apps. 

React has traditionally been a SPA framework that runs entirely in the browser so many wrappers for JavaScript libraries that are built around React rely on the browser. Next.js on the other hand treats your app as a server-side app and this can cause issues when importing certain browser or client-only libraries. Luckily, the Next.js team has a great solution for how to get around this with the next/dynamic package.

How to Import Browser Only Libraries Into Your Next.js Application Using next/dynamic

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. We will also add Apollo Server tracking and Web Vital tracking. Then we will add Error reporting to the frontend in our React code, and finally deploy this project to Heroku.

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!

Join me on Discord! https://discord.gg/wcSNwfu
Source Code: https://github.com/leighhalliday/appsignal-demo

00:00 Introduction
02:00 Creating Next.js Server
12:00 Setting up TypeScript
13:00 Web Vitals Reporting
19:15 Apollo Server and Nexus/Schema Setup
26:00 Apollo Client v3 Setup
28:30 Adding Apollo Provider
29:40 Performing Query with useQuery
33:05 React Error Tracking with AppSignal
45:45 Deploying to Heroku

Tracking Errors & Performance in Next.js with AppSignal

Learn how to create a custom contact form using Netlify Forms. We'll walk through:
- Creating a basic HTML form from scratch
- Deploying an HTML form with Netlify
- Creating a form with Next.js and React
- Deploying a React form to Netlify

🗒️ Original Post
https://www.freecodecamp.org/news/how-to-create-a-contact-form-with-netlify-forms-and-nextjs/

🔔 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

Netlify Forms
https://www.netlify.com/products/forms/

🎼 Music
Dude by Patrick Patrikios
YouTube Audio Library

Create a Custom Contact Form with Netlify Forms and Next.js

UPDATE: Use version @1.17.0 or greater when deploying this component.

In this video you'll learn how to deploy a NextJS app complete with server rendered and API routes to AWS using the Serverless Framework.

Deploying NextJS with Amplify:

⚡️ Deploying a NextJS app to AWS with AWS Amplify Git-based deployments
https://youtube.com/watch?v=g-63px0PtTg

⚡️ Deploying a Next app with the AWS Amplify CLI
https://youtube.com/watch?v=7VDdgKXAAP0

Deploying a NextJS app to AWS using the Serverless Framework

Next.js crash course - This is a crash course on Next.js basics and how you can get started with the framework.

If you liked this course, try the Next.js Learning Path on codedamn which contains more projects and practical application of the framework! Next.js Learning Path: https://codedamn.com/learning-paths/nextjs-mastery

Timestamps:

00:00 Kickstart
02:24 Course Intro
04:56 Next.js Intro
08:26 Installing Next.js
14:29 File structure explanation
20:00 Pages in Next.js
25:43 _document.tsx
31:22 _app.tsx
39:32 Style Section Introduction
39:53 Styled JSX
46:27 Global Styles
49:25 CSS Modules
53:02 Sass Modules
55:53 File Structure
58:00 API Section Introduction
58:27 Creating APIs with Next.js
01:03:46 req and res Objects
01:11:29 Simple JWT Auth Example
01:15:42 Simple Routing
01:30:46 Link compnent
01:34:27 Nested Routing
01:37:34 Dynamic Routing
01:44:41 useRouter
01:51:39 Catch All Routes
01:56:39 Custom 404 Page
02:03:06 getStaticProps
02:04:40 revalidate Parameter
02:08:21 getStaticPaths
02:22:30 getServerSideProps

------------
Don't forget to subscribe and like the video if you enjoyed :)
Be a damner, join the coding community: https://codedamn.com

Learn Next.js in One Video - Fundamentals of Next.js

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.

Links
–––––
Static Optimization: https://nextjs.org/docs/advanced-features/automatic-static-optimization
Next.js preloading: https://nextjs.org/docs/api-reference/next/link
React hydration: https://reactjs.org/docs/react-dom.html#hydrate
Time to Interactive: https://web.dev/interactive/
Time to First Byte: https://web.dev/time-to-first-byte/
Firebase UI React: https://github.com/firebase/firebaseui-web-react

Examples
–––––
Magic: https://github.com/vercel/next.js/tree/canary/examples/with-magic
Auth0: https://github.com/vercel/next.js/tree/canary/examples/auth0
Firebase: https://github.com/vercel/next.js/tree/canary/examples/with-firebase-authentication
Next Auth: https://github.com/vercel/next.js/tree/canary/examples/with-next-auth
Next Iron Session: https://github.com/vercel/next.js/tree/canary/examples/with-iron-session

–––––
Blog: https://leerob.io/
Twitter: https://twitter.com/leeerob
GitHub: https://github.com/leerob
Course: https://react2025.com/

Authentication Patterns for Next.js

Learn how to create a new Next.js Starter to bootstrap your new React projects. We'll learn what a Starter is, walk through creating a new Starter, and add Sass as our Starter's feature.

🗒️ Original Post
https://www.freecodecamp.org/news/how-to-create-a-nextjs-starter-to-easily-bootstrap-a-new-react-app/

🔔 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 Sass Starter
https://github.com/colbyfayock/next-sass-starter

Next.js
https://nextjs.org/

Sass
https://sass-lang.com/

🎼 Music
Zoom by Vibe Tracks
YouTube Audio Library

How to Create a Next.js Starter and Add Sass to a Next.js React App

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

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!

Join me on Discord! https://discord.gg/wcSNwfu
Source code: https://github.com/leighhalliday/apollo-nextjs
Next.js Example: https://github.com/vercel/next.js/tree/canary/examples/api-routes-apollo-server-and-client

00:00 Introduction
01:37 AppSignal
02:30 Setting up Apollo Server in API route
05:42 Creating Schema with Nexus Schema
08:00 Setting up Apollo Client v3
17:50 Creating Isomorphic Link (HttpLink + SchemaLink)
24:00 Querying data with useQuery
26:30 Querying data via SSR