In this video I'm rebuilding the video section of my new website with you. We look at data fetching with getStaticProps, resolving mutliple promises in parallel and styling with Tailwind css, along with setting up a Next.js project from scratch with an ESLint config.


00:00 Introduction
01:00 Create App, ESLint & Prettier config
05:50 Tailwind css install
10:10 Fetching data
21:25 UI components statistics
26:52 Sorting & filtering video data
33:30 Displaying & styling video list items
42:30 Review and performance


Eslint Config
https://adamrichardson.dev/code/next-javascript-config


Git repository
https://github.com/adamrichardson14/youtubestatistics/tree/completed


Clone starter branch
git clone -b starter git@github.com:adamrichardson14/youtubestatistics.git

Youtube API to fetch data display channel statistics/videos in Next.js with tailwindcss.

======================================
🚀  Level up your React skills with 4.5 hours course - http://bit.ly/3brQhhL
======================================

Refer to documentations here: https://stripe.com/docs/payments/integration-builder

You can download the code from here: https://github.com/ms-mousa/files/files/6193553/Stripe-code-and-presentation.zip

Newsletter is work in progress now! 😅

Playing around with Stripe checkout (NextJS - TS - Chakra-ui)

😃 Courses
Tailwind Beginner Course: https://BeginnerTailwind.com
Free Emmet Course: https://FasterWithEmmet.com
React Course: https://MakeReactApps.com

💙 Social
Chris's Twitter: https://twitter.com/chris__sev
Kapehe's Twitter: https://twitter.com/kapehe_ok

🐝 Community
Discord: https://discord.gg/jzwnuyzfvb
Newsletter: http://bit.ly/better-dev-newsletter

🔴 Let's create a Jamstack Blog w/ Next.js

Multi-stage Docker container setup for Next.js applications.  Optimizing production deployments.
➥ Repo: https://gitlab.com/pragmaticreviews/next.js-jobs-app/-/tree/next-docker
➥ Buy Me a Coffee: https://buymeacoff.ee/pragmatic

➥➥ Learn even more! ➥➥
Learn Next.js ➥ https://bit.ly/PragmaticNext
Learn Contentful ➥ https://bit.ly/PragmaticContentful
Learn Strapi ➥ http://bit.ly/PragmaticStrapi
Learn Gatsby ➥ https://bit.ly/PragmaticGatsby
Learn Deno ➥ https://bit.ly/LearnDeno
Learn GraphQL ➥ https://bit.ly/LearnGraphQL
Golang in the Cloud ➥ https://bit.ly/LearnGolangCloud
Gin Crash Course ➥ http://bit.ly/2SXdJu2
Golang Crash Course ➥ http://bit.ly/39ZH8dy
Zapier Crash Course ➥ http://bit.ly/37q1BGt

Timestamps:

Intro - 0:00
Dockerfile without multi-stage - 0:44
Dockerfile with multi-stage - 5:09
Outro -12:10

#Next #Docker #Container

Next.js | Multi-stage Docker builds | Optimizing production deployments

In this video we are going to implement Prisma to a fresh install of Next.js and see how to make a full stack application.

We already checked out Blitz.js which is a full stack JavaScript framework based on #Next and #Prisma. However #Blitz is still in beta, but since it's based on Prisma and Next, why not try making a full stack application using those two technologies. And that is exactly what we are going to be doing in this video.

### Code used in this video

http://bit.ly/391ao4N

----------------------------------------------------------------------------------------------
⭐ Kite is a free AI-powered coding assistant that will help you code faster and smarter. The Kite plugin integrates with all the top editors and IDEs to give you smart completions and documentation while you’re typing. You can check it out here:  http://bit.ly/3qdjIc5​​​
------------------------------------------------------------------------------------------------

### You can support my work on Patreon 

https://patreon.com/watchlearn​

### Follow me on Social Media

Github:  https://github.com/ivandoric​
Twitter:  https://twitter.com/ivan_doric​
Instagram:  https://www.instagram.com/watchlearntuts​
Facebook:  https://facebook.com/watchlearntutorials

Let's Checkout... Prisma & Next.js

Sitecore Headless Development with Next.js

This video will equip you with all the knowledge required to start using Next.js in your projects. Subscribe to the channel so you don't miss out on upcoming full stack tutorials.

00:00 Introduction
00:55 Getting Started and Intro Slides
10:00 Create Next.js application
12:35 Creating Pages & Routing
15:10 Navigating between Pages
19:00 Global Header Component
21:05 Data Fetching - React way
27:20 Data Fetching - Server Side Rendering
33:55 Static Data Fetching - Get static Props
43:38 Dynamic Routing & Data fetching
1:02:50 Next/Image component
1:14:03 Css Module - Styling next/image dynamically
1:25:05 Environment variables
1:31:15 Next Head - Adding titles and title component
1:35:55 Next API Routes
1:40:28 Pushing code to Github
1:41:48 Deployment to Vercel

Getting Started with Next.js. An introduction to Next.js

Did you know it's possible to use Redis for your entire database? Hashmaps, counters, sorted lists, and even queues. Learn how to deploy a Redis & Next.js app in a few short minutes.

Using Serverless Redis with Next.js – Lee Robinson

Knowing how to build a webshop is an important skill to have for every web developer. With 2021 being, well, how it is, most of the shopping is now being done online. You, as a developer can contribute to the world by creating amazing web experiences.

If you are an E-Commerce Freelancer, a person with a non-development background that wants to run their own shop, or a developer that wants to extend their skills and learn how to build webshops - this video is for you.

⭐Builder -  http://builder.io/

📚 Materials/References:
GitHub Starter - https://github.com/BuilderIO/nextjs-shopify
Deployment: http://bit.ly/vercel_deployment

💼 Business Inquiries:
E-mail: javascriptmastery00@gmail.com

❤️ Support JavaScript Mastery
BuyMeACoffe: https://www.buymeacoffee.com/JSMastery

🌎 Find Me Here:
Discord Group: https://discord.gg/n6EdbFJ
Instagram: https://instagram.com/javascriptmastery
Twitter: https://twitter.com/JS_Mastery

Time Stamps 👇
00:00 Intro
03:06 Setup
08:21 Getting Started
13:42 Code Components
22:18 Generic Collections
29:55 Other Models
34:11 Countdown Timer
41:57 Deployment

Build & Deploy a React Next JS Shopify ECommerce Store | BuilderIO

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.

0:00 – Skip (audio fail)
2:17 – Start
4:10 – Building Login with Tailwind CSS
30:21 – Next Auth (Google Sign In)
1:01:36 – Custom Font
1:09:00 – Q&A

Links
–––––
Code: https://github.com/leerob/nextjs-netflix
Demo: https://nextjs-netflix.vercel.app/
https://nextjs.org
https://tailwindcss.com
https://next-auth.js.org

–––––
Blog: https://leerob.io/
Twitter: https://twitter.com/leeerob
GitHub: https://github.com/leerob
Course: https://react2025.com/
Gear / Coding Setup: https://leerob.io/uses
VSCode Theme: Sorcerer