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

Apollo Client v3 Fullstack Next.js Setup with SSR + Nexus Schema

Learn how to add authentication with Next.js. The guide covers custom React Hooks, protecting routes and redirecting on the server, and includes a variety of examples.

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.

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/graphql-resume
Deployed version: https://graphql-resume.vercel.app/
Part One: https://youtu.be/_HOp7hBEjp8

00:00 Introduction
01:00 AppSignal
01:55 Apollo Client setup
12:05 useQuery Hook
17:48 Displaying content
34:00 Prism Code Highlighter

Build your own GraphQL Resume with Next.js, Apollo Client, and Prism Code Highlighter. Part 2 / 2.

In this video, we'll take a look at how to easily add TypeScript to our NextJS application. This method will work for both a brand new as well as an existing NextJS application. If you're not familiar with TypeScript, I'd highly encourage you to learn about it at typescriptlang.org.

How to Add TypeScript to your Next.js Application

Incremental Static Regeneration brings the best of Static Site Generation (SSG) and Server Side Rendering (SSR) to NextJS. The feature allows you to update static content after you have already built your site, meaning your users get a blazing fast experience and the latest data. In this video, you'll learn how to enable and work with incremental static regeneration.