Learn how to source MDX content in Next.js to dynamically create pages for a blog.

🧐 What's Inside
00:00 - Intro to using MDX in Next.js
00:10 - Tools we'll use like MDX and Next.js
00:34 - Starting Next.js app from scratch with Create Next App
01:28 - Creating sample MDX blog posts
02:43 - Sourcing MDX content with Next.js MDX Enhanced plugin and Next.js Compose Plugins
05:31 - Creating a React template for blog post pages
08:37 - Using Gray Matter and node.js in getStaticProps to look up available MDX blog posts
14:28 - Adding posts prop to page component with dynamic blog post page links
15:43 - Looping through posts date to add Next.js links to the homepage
17:27 - Adding and configuring Next.js Image to add an image with a React component into an MDX blog post
19:20 - Outro

🗒️ Read More
https://spacejelly.dev/posts/how-to-source-mdx-content-in-next-js-to-dynamically-create-pages-for-a-blog/

🔔 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

📸 Catch the next stream live on Twitch @colbyfayock
https://twitch.tv/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 MDX Enhanced
https://github.com/hashicorp/next-mdx-enhanced

Gray Matter
https://github.com/jonschlinkert/gray-matter

🎼 Music
Music from Uppbeat (free for Creators!):
https://uppbeat.io/t/prigida/moonshine
License code: 0AKWJRADVGBJD711

Use MDX in Next.js to Dynamically Create Pages for a Blog

Launch your own dropshipping store with Next.js, Printful, and Snipcart with this starter repo!

Build your own Headless eCommerce storefront with Next.js and Snipcart, and deliver swag powered by Printful. End to end commerce, styled using TailwindCSS and deployed on Vercel.

This starter comes production-ready with some kickass features out of the box, no extra configuration required (unless you want to 😉).

- Realtime shipping prices
- Secure payments
- Automatic fulfillment
- Built with Next.js
- Cart & Checkout with Snipcart
- Styled with Tailwind CSS
- Fully Typed
- Recover abandoned carts
- One click deploy

Learn more at https://headlessdropshipping.com

Launch your own dropshipping store with Next.js, Printful, and Snipcart | Headless Dropshipping

The 5 most popular React frameworks are Create React App (could argue it's not even a framework), Gatsby, Next.js, Blitz and RedwoodJS. They all have pros and cons to them, and different use-cases. This video aims to give an overview of each of them, highlighting their differences and what I personally find their most compelling features.

---------- Course

Want to go deeper with Next.js? Join me in my Next Level Next.js course where over 29 videos and 8 hours of content we'll build a full application from start to finish. We use TypeScript, GraphQL, Prisma, Apollo, Mapbox, Firebase and lots more. https://courses.leighhalliday.com/next-level-next-js

---------- Connect

Join this channel - https://www.youtube.com/channel/UCWPY8W-FAZ2HdDiJp2RC_sQ/join
Join me on Discord - https://discord.gg/wcSNwfu

---------- Timeline

00:00 - Introduction
00:25 - TL;DR
03:45 - Create React App
05:35 - Gatsby
11:05 - Next.js
16:00 - Blitz
19:55 - RedwoodJS

React Framework Comparison: Gatsby, Next.js, Blitz, Redwood

Hai everyone,
In this video,  we will see how to add a loading icon between the page transitions in next js (or react js) app.

Link for the loading icon used:

https://loading.io/spinner/blocks/-rectangle-square-rotate-cycle-adobe


#########
If you like the work I do and want to buy me a coffee:
http://paypal.me/davidrajm

Become a Patreon: Your $1 per month will motivate me a lot
https://www.patreon.com/davidrajm

Anyone interested in conducting workshops in LaTeX or any of the content I do here, I am ready to give support. 
Let's learn together.

Website: https://texanalytics.com/

How to show loading icon and progress bar in next js (react js) when changing page routes?

If you found the video valuable, please leave a like and subscribe ❤️ It helps the channel grow and helps me pumping out more such content.

About Me:
I'm a CSE'21 graduate from BITS Pilani, Goa. I started coding early in life, at the age of 13 when I created my first blog on Blogger. I am listed in Google, Microsoft, Sony, eSet, etc. Hall of Fame for reporting vulnerabilities in their systems.
I am Apple's WWDC'19 Scholar - visited San Fransisco and attended WWDC. Currently working on my own startup - codedamn.
I am an author of 2 books, on JavaScript and React - https://www.amazon.in/s?k=mehul+mohan

Connect with me:
📸 Instagram: https://instagram.com/mehulmpt
📱 Twitter: https://twitter.com/mehulmpt
📝 LinkedIn: https://www.linkedin.com/in/mehulmpt
👻 Snapchat: https://www.snapchat.com/add/mehulmpt
📂 GitHub: https://github.com/mehulmpt
🌎 Personal website: https://mehulmohan.com
💻 Learn to code: https://codedamn.com
🏷 Video Tags: 

Check out my other personal YouTube channel (it is in Hindi/English mix) where I share coding tips, tricks, and hacks: https://www.youtube.com/channel/UCzF68Hu6AqrqX_p-HHwZDqg

Next.js 10.2 out 🔥! Let's talk

The new Next.js SDK is here! This SDK makes setting up authentication and authorization in Next.js easier than it's ever been. You can get started in minutes by adding just a few lines of code.

This SDK has loads of features for helping you protect your Next.js applications.

- easy configuration
- front-end user hooks
- higher order functions for protecting your pages and API routes
- lots more!

SDK Github Repository - https://github.com/auth0/nextjs-auth0
Auth0 Nextjs Quickstart - https://auth0.com/docs/quickstart/webapp/nextjs
___________________________________________
Learn with Auth0

Try Auth0 for free - https://a0.to/auth0
Upcoming Events - https://a0.to/events
The Auth0 blog - https://a0.to/blog
Watch Live Streams on Twitch - https://a0.to/twitch
Ask questions on the Community Forum - https://a0.to/community

___________________________________________
Follow Us on Social

Follow us on Twitter - https://a0.to/twitter
Follow us on LinkedIn - https://a0.to/linkedin

The Brand New Next.js SDK - Add Authentication in Minutes!

Next.js 10.2 introduces performance improvements (faster builds, refresh, and startup), improved accessibility, Automatic Webfont Optimization, and more!

Next.js 10.2

In this video I show you how to build an AirBnB Clone, as well as manage all your data visually. We are going to build a backend for the app that defines the relationships between our data thanks to Schemas and Types, and add data using Sanity Studio ( http://bit.ly/sanity-studio )

Topics we will be touching on:
- Schemas
- Types
- Content Management Systems
- Geolocation
- Google Maps API
- Clustering Markers
- Next.js
- ServerSideProps
- Sanity SDK
- React Hooks

and much more!

0:00 - Introduction
2:39 - Getting started with Sanity
11:43 - Creating our Sanity Schemas
24:55 - Creating PropertyImage Type
30:15 - Creating Review Schema
34:44 - Creating Traveller Schema
35:50 - Creating Person Schema
42:28 - Adding Data to our Sanity Studio
52:17 - Getting Started with Next.js
56:00 - Connecting our Sanity App to our Next app
1:00:20 - Querying our Data with GROQ
1:03:57 - Building our Next.js pages
1:24:23 - Styling with CSS and Google Fonts
1:31:10 - Adding in our images
1:43:25 - Adding in our AirBnB property information styling
1:46:45 - Adding in Review information
1:54:25 - Adding in Location information
2:06:01 - Adding Links with Next.js
2:07:15 - Building our AirBnB’s home page
2:17:40 - Building our NavBar component
2:21:30 - Adding our AirBnB logo
2:23:35 - Adding a Cluster Map
2:30:25 - Conclusion


If you get stuck, the Sanity community I was talking about can be found here on the Sanity Exchange (https://www.sanity.io/exchange) and the Sanity Slack Community (https://slack.sanity.io/).

The code for my GitHub can be found here: 
- https://github.com/kubowania/airbnb-sanity-backend
- https://github.com/kubowania/airbnb-sanity-frontend

Google Maps API info can be found here: https://developers.google.com/maps
____

In most videos I use Tabnine as my A.I autocompletion tool. You can download it for free here: http://bit.ly/tabnine-top-tool

If you would like to buy me a coffee, well thank you very much that is mega kind! : https://www.buymeacoffee.com/aniakubow

Sign up for weekly coding tips from my newsletter partnership: https://bit.ly/JS-tips

You can also find me on:
Twitter: https://twitter.com/ania_kubow
Instagram: https://www.instagram.com/aniakubow

#codingbootcamp​​ #coding

I built an AirBnB clone with structured content! Using Sanity.io and Next.js

Learn how to use Yoast SEO to manage and level up your headless WordPress SEO inside a Next.js project with WPGraphQL.

Next.js WPGraphQL Basic Starter
https://github.com/colbyfayock/next-wpgraphql-basic-starter

🧐 What's Inside
0:00 - Intro to Managing SEO with WPGraphQL, Yoast SEO, and Next.js
0:11 - Tools we'll use like headless WordPress with WPGraphQL and Yoast SEO
0:40 - Installing and querying Yoast SEO and WPGraphQL Yoast SEO Addon with GraphQL
2:53 - Creating a new headless WordPress Next.js project with Next.js WPGraphQL Basic Starter
5:06 - Updating existing WPGraphQL queries using Apollo GraphQL to get Yoast SEO data in Next.js
6:25 - Using Yoast SEO metadata from WPGraphQL in Next.js using the Next.js Head component
7:30 - Adding the prerendered Yoast SEO HTML head to React with HTML React Parser and Next.js Head
10:20 - Reviewing querying SEO metadata with Yoast SEO and WPGraphQL
11:15 - Outro

🗒️ Read More
Coming soon...

🔔 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

📸 Catch the next stream live on Twitch @colbyfayock
https://twitch.tv/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 WPGraphQL Basic Starter
https://github.com/colbyfayock/next-wpgraphql-basic-starter

Next.js WordPress Starter
https://github.com/colbyfayock/next-wordpress-starter

Yoast SEO
https://wordpress.org/plugins/wordpress-seo/

WPGraphQL Yoast SEO Addon
https://wordpress.org/plugins/add-wpgraphql-seo/

🎼 Music
Music from Uppbeat (free for Creators!):
https://uppbeat.io/t/atm/dream-land
License code: LSTRJSORUNQBHCFA

Yoast SEO & Headless WordPress - Manage SEO with WPGraphQL & Next.js

Learn how to set up a project using Next.JS, AWS Amplify and Typescript. We'll create a simple to-do list application taking advantage of Next JS's serverside rendering, static site generation and dynamic routes. 

We'll be using AWS Amplify's GraphQL API to make authenticated serverside requests using the new SSRContext in AWS Amplify. We'll also be building a simple authentication system for users to create accounts that can be authenticated on the serverside, by setting ssr: true in the Amplify.configure method.

Resources I mentioned in this video:
- Code: https://github.com/vercel/next.js/tree/canary/examples/with-aws-amplify-typescript
- AWS Amplify CLI Init Setup Video: https://www.youtube.com/watch?v=fWbM5DLh25U

Other helpful links:
- Text version of this video: https://blog.jarrodwatts.com/aws-amplify-nextjs-typescript

Find me:
- Website: https://jarrodwatts.com
- Twitter:   https://twitter.com/JarrodWattsDev

Timestamps:
0:00 - Introduction
0:48 - What we're building
1:29 - Creating the Next.JS App
2:05 - TypeScript
3:04 - AWS Amplify CLI
5:30 - Front End

What we create in this video:
- A Structured, schema-based database hosted on AWS DynamoDB
- A GraphQL API hosted on AWS AppSync
- A basic authentication system using AWS Cognito
- A basic Todo creator to demonstrate the front-end