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.

Patterns for recreating Vercel's static in-app page skeleton loaders in Next.js

Learn how you can access cookies in nextJS from server side.
Accessing cookies in NextJS from server side could be tricky for newbies. In this video I have shown how you can easily access cookies in nextJS from server side.
I have wrote a blog post about it where I have explained in more details. Feel free to check that out.
Blog: https://dev.to/thatanjan/access-cookies-in-nextjs-from-server-side-5fhg

Code: https://gist.github.com/thatanjan/44246988c063d881d24eb9cbbcd13b2a

About Me: My name is Anjan Shomodder. I am a full stack web developer. I can
create full stack applications social media, chat applications, blogging website
and many more. I also write blog posts about web development and cool
technologies on Medium and dev.to.

If you want to see my portfolio then visit: 
Portfolio: https://anjan.vercel.app/

My Personal projects:
Dev-book: https://dev-book.vercel.app/

My blog posts are:
Medium: https://medium.com/@thatanjan
Dev: https://dev.to/thatanjan/

If you want to reach out to me you can send me email or simply dm me on social
media.
Email: anjan.cules@gmail.com

I would really appreciate if you follow me on social media as @thatanjan.

You can follow me on: 
LinkedIn: https://www.linkedin.com/in/thatanjan/
Twitter: https://twitter.com/thatAnjan
GitHub: https://github.com/thatAnjan/
Instagram (personal): https://www.instagram.com/thatanjan/
Instagram (YouTube channel): https://www.instagram.com/cules_coding/
Facebook: https://www.facebook.com/thatanjan/

Thank You guys. Hope you have a good day.
Stay safe.


Photo by Food Photographer | Jennifer Pal

Access COOKIES in NextJS from server side. | Reactjs | SSR

Create PWA or make website work Offline with Next.js (React) . In this video I'll demonstrate 2 examples, first one is a SPA and second one is a multi-page site which also has a fallback page for those pages which are not cached !


Icon : https://raw.githubusercontent.com/abhik-b/next-tutorial/pwa/public/icon.png
Icon 512x512 : https://raw.githubusercontent.com/abhik-b/next-tutorial/pwa/public/icon-512x512.png

Service worker for 2nd example : https://raw.githubusercontent.com/shadowwalker/next-pwa/master/examples/offline-fallback/service-worker.js

next-pwa official repo : https://github.com/shadowwalker/next-pwa

First Example Code: https://github.com/abhik-b/rock-paper-scissor-lizard-spock
Second example code : https://github.com/abhik-b/next-tutorial/tree/pwa

Timestamps:

0:00 Introduction
0:36 First Example begins
1:16  Installing next-pwa
2:05 Creating manifest.json
2:38 Creating _document.js
3:38 Creating next.config.js
4:15 Running the build command
4:30 Serving the build
5:16 Discussing a known Issue
6:24 Second example begins
8:47 Creating a custom Service-worker.js
11:49 Running the build command
12:04 Serving the build
14:00 Concluding


If you are bored and want some memes or random pictures to time kill , visit this website (made by me) :  https://picsforbored.vercel.app/

Javascript Projects PlayList: https://www.youtube.com/watch?v=WK_SW5JO6rY&list=PLCBa_75YlKx7FxLVCYqXjrL9m5GCU-Cfp

React PlayList: https://www.youtube.com/watch?v=EgMjKqMo5r8&list=PLCBa_75YlKx7gTEyag1f2IikyrUmAtv48

Django PlayList : https://www.youtube.com/watch?v=e5SDQ30zqjk&list=PLCBa_75YlKx7UOvtJBAu1tuDTpThc6Zmf


*PLEASE NOTE:
PLEASE TAKE DECISIONS BASED ON YOUR RESEARCH AND WHAT YOU FEEL RIGHT
I'M JUST SHARING MY OWN RESEARCH THROUGH THIS VIDEO !!
AND THIS VIDEO DOES NOT FORCE YOU ANYTHING BY ANY MEANS!! *

How to create PWA or make site work Offline | Next.js Tutorial 2021

In this video you will learn a framework for writing Next.js middleware so you can do things like protect your API routes from unauthenticated users, check user permissions, and much more.

🗂 CODE 🗂

https://github.com/hunterbecton/next-js-middleware

⏰ TIMESTAMPS ⏰

Introduction: 0:00

Before: Express Middleware: 0:40

Now: Next.js Middleware: 4:30

withProtect Middleware Demo: 7:12

withRoles Middleware: 8:25

withRoles Middleware Demo: 10:33

🔗 HELPFUL RESOURCES 🔗

Next.js in 100 Seconds: https://www.youtube.com/watch?v=Sklc_fQBmcs

Next.js Crash Course 2021: https://www.youtube.com/watch?v=mTz0GXj8NN0

👋 FOLLOW US 👋

Instagram: https://instagram.com/skillthrive/

#Nextjs #WebDev #WebDevelopment

Next.js Tutorial: How to Add Middleware in Next.js API Routes

In this video I’m going to show you how to setup Sign In with Spotify using NextAuth.js.
➥ Repo: https://gitlab.com/pragmaticreviews/next.js-jobs-app/-/tree/nextauth-spotify
➥ 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
NextAuth.js: Spotify Provider setup - 0:32
Spotify Application setup - 1:55
Testing Spotify Sign In using NextAuth.js - 3:28
Outro - 5:19

#Next #NextAuth #Spotify