We will use Next.js + Vercel (AWS Lambdas) + AWS S3 + Puppeteer for building a simple but robust project which allows you to take screenshot of a page and upload them in your S3 bucket.

Source code: https://github.com/mehulmpt/nextjs-puppeteer-aws-s3-screenshot-service

Don't forget to subscribe and like the video if you enjoyed :)
Want to become a programmer? Learn and solve challenges on codedamn: https://codedamn.com
My Instagram: https://instagram.com/mehulmpt
My Twitter: https://twitter.com/mehulmpt
My LinkedIn: https://linkedin.com/in/mehulmpt

Building a screenshot project with Next.js + Vercel + Headless chrome + AWS S3 for uploading images

Persisted Queries in GraphQL bring the Graph language flexibility with the benefits of regular REST APIs. Persisted Queries can be triggered using just the built-in Fetch API instead of adding an additional, client library; they can be easily cached and the most importantly, they can be analyzed ahead of time to allow the server to choose the best execution plan.

In this video I show you how to create a persisted query in OneGraph. We start with a regular GraphQL query. Then, we convert it to a persisted one and finally we create a React.js application with Next.js and trigger the query via the Fetch API from a React.js component.

Persisted GraphQL Queries in React.js with OneGraph & Next.js

Colby Fayock will teach us how we can combine the great content editing experience of WordPress, the flexibility of developing with Next.js, and the power of deploying to Netlify!

*   demo: https://wordpress-next.netlify.app/
*   repo: https://github.com/learnwithjason/wordpress-next

Links:  

- https://aws.amazon.com/lightsail/
- https://www.wpgraphql.com/
- https://wordpress.org/
- https://nextjs.org
- https://www.netlify.com/
- https://www.learnwithjason.dev/visual-testing-using-cypress-and-applitools
- https://www.learnwithjason.dev/gatsby-wordpress-with-wpgraphql
- https://www.apollographql.com/docs/react/get-started/
- https://github.com/jlengstorf/rehype-local-image-to-cloudinary
- https://docs.netlify.com/configure-builds/build-hooks/
- https://www.colbyfayock.com/

-- Watch live at https://www.twitch.tv/jlengstorf

Credits:

Local Elevator by Kevin MacLeod is licensed under a Creative Commons Attribution license (https://creativecommons.org/licenses/by/4.0/)
Source: http://incompetech.com/music/royalty-free/index.html?isrc=USUAN1300012

Artist: http://incompetech.com/

Busybody by Audionautix is licensed under a Creative Commons Attribution license (https://creativecommons.org/licenses/by/4.0/)

Artist: http://audionautix.com/

Additional sound effects obtained from https://www.zapsplat.com

Use WordPress with Next.JS (with Colby Fayock) — Learn With Jason

Learn how to build a serverless contact management app with Next.js, Prisma, Typescript, Tailwind, and NextAuth.js.

In this stream, Mahmoud Abdelwahab walks through:
0:00:00 - Intro
0:03:20 - Creating a new Next.js project from scratch
0:06:00 - Adding Typescript to a Next.js app
0:07:40 - Configuring Tailwind CSS in a Next.js app
0:14:04 - Explaining how Prisma works with databases and the development stack
0:22:49 - Creating a new Postgres database in Heroku
0:23:54 - Installing and setting up Prisma client in a Next.js app
0:37:08 - Using Prisma Studio to visualize database
0:41:10 - Setting up NextAuth.js in a Next.js app with GitHub
0:47:19 - Using a NextAuth session to find User in Prisma
0:50:10 - Adding login and contact UI to the app
0:55:02 - Adding a serverless function to create a new Contact
1:01:50 - Other Prisma community and examples
1:06:34 - Outro

Mahmoud Abdelwahab
https://twitter.com/thisismahmoud_

Subscribe on Twitch to catch the next one live!
https://twitch.tv/colbyfayock​

More Colbyashi Maru episodes
https://www.youtube.com/playlist?list=PLFsfg2xP7cbKHt4vRvmy9f5DgBXQIeCah

🧰 More Resources

Prisma
https://www.prisma.io/

Prisma Examples
https://github.com/prisma/prisma-examples

Next.js
https://nextjs.org/

NextAuth.js
https://next-auth.js.org/

Tailwind CSS
https://tailwindcss.com/

About Colbyashi Maru
https://www.colbyfayock.com/2021/01/colbyashi-maru/

🔔 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

🎼 Music
Streambeats
https://www.streambeats.com/

Full Stack Serverless with Prisma & Next.js - Colbyashi Maru

Prisma is an ORM and database toolkit which makes it easy to have type-safe database access in Node. It's also the easiest way to work with databases in a Next.js app. You can learn more at https://prisma.io/nextjs.

In this video, we look at how to integrate Prisma in a Next.js app. We see how to query for data in the getServerSideProps function and how to save data using an API route.

Demo App Repo: https://github.com/chenkie/next-prisma

Other Videos

Older video on Prisma + Next.js: https://youtu.be/lF8DV_ICIpY
Daniel Norman's video on deploying to Vercel: https://youtu.be/tsOHw2T1HvI

Using Prisma in a Next.js App

In this episode, learn how Joel Hooks creates powerful marketing automation using serverless functions, CustomerIO, and Next.js. This is a peek behind the curtain at Egghead.io!

Demo: https://deploy-preview-2--enterprise-jamstack.netlify.app/
Repo: https://github.com/eggheadio/enterprisejamstack.com/pull/2 

Links:  
- https://enterprisejamstack.com/ 
- https://convertkit.com/
- https://developers.convertkit.com/#add-subscriber-to-a-form 
- https://github.com/eggheadio/egghead-next
- https://egghead.io?af=azvpe4
- https://www.podia.com/
- https://customer.io/
- https://www.activecampaign.com/
- https://joelhooks.com/ 

-- Watch future episodes live at https://www.twitch.tv/jlengstorf

Credits:

Local Elevator by Kevin MacLeod is licensed under a Creative Commons Attribution license (https://creativecommons.org/licenses/by/4.0/)
Source: http://incompetech.com/music/royalty-free/index.html?isrc=USUAN1300012

Artist: http://incompetech.com/

Busybody by Audionautix is licensed under a Creative Commons Attribution license (https://creativecommons.org/licenses/by/4.0/)

Artist: http://audionautix.com/

Additional sound effects obtained from https://www.zapsplat.com

Serverless Marketing Automation for React (with Joel Hooks) — Learn With Jason

In this video we look at how to connect your Next.js Application to your Strapi backend with GraphQL



Timestamps:
02:00: Creating your first Admin User with Strapi

02:29: Creating a Collection Type in Strapi
03:26​: Installing the Strapi GraphQL Plugin
03:56: Setting User Permissions for our Collection Type
04:07​: Using the GraphQL Playground
04:43: Installing GraphQL Dependencies in our Next Client
05:44: Initializing our getStaticProps function
06:20: Initializing Apollo Client in our Next Client

07:00​: Adding a query to our Next client
08:15: Rendering Strapi data in the Next client





Get started with Strapi and Next: https://strapi.io/starters​

Next and Strapi: https://strapi.io/integrations/nextjs-cms



Try live demo: https://strapi.io/demo​

Strapi Blog: https://strapi.io/blog​

Learn More about Strapi: https://academy.strapi.io/​

Find help in our Forum: https://forum.strapi.io/​



Register for Strapi Conf: https://www.strapi.io/strapi-conf-2021

Connecting Your Next App to Strapi with GraphQL

For Shy’s 30th Birthday, he’s joined by Cassidy Williams (https://twitter.com/cassidoo) from Netlify. Using Netlify, Next JS and Contentful, they create a website to send out virtual birthday cards. Cassidy teaches Shy all about NextJS and shows off Reach UI (reach.tech) an accessible foundation for React. 
Checkout the final project live at https://birthday-cards.netlify.app/ and see the source code at: https://github.com/cassidoo/next-contentful-birthday-card

Building a better birthday card with Next.js and Cassidy Williams!

Let's add a shopping cart to a pre-existing Next.js app using `react-use-cart`.

react-use-cart: https://github.com/notrab/react-use-cart

Office Hours: Adding a shopping cart to Next.js

Strategies and patterns for per-page authentication and skeleton loaders inspired by Vercel in Next.js.