In this stream we have Colby Fayock. Colby is a designer, developer and educator.

During the stream we'll set up a blog with Wordpress as a back-end, and NextJS as a front-end.

NextJS Wordpress: https://github.com/colbyfayock/next-wordpress-starter

Follow Colby Fayock on social media:
⇨ Twitter: https://twitter.com/colbyfayock
⇨ Youtube:  https://www.youtube.com/channel/UC7Wpv0Aft4NPNhHWW_JC4GQ
⇨ Newsletter: https://www.colbyfayock.com/newsletter/
⇨ Free YouTube Course: https://fromdesignto.dev/

Stream With Colby Fayock - Set Up a Blog With Wordpress And NextJS

In this livestream recording, Brian Rinaldi shows how you can combine the APIs of both DEV and GitHub into a single backend using StepZen to power a developer portfolio built as a Jamstack site using Next.js. Follow along and customize and deploy your own version of this site using your own DEV and GitHub accounts.

See the related blog post at https://stepzen.com/blog/developer-portfolio

Create a Developer Portfolio site with Next.js, DEV and GitHub

It's now easier to build Next.js on Netlify than ever before, with auto-installation of our latest and greatest plugin.

Try the new Essential Next.js plugin, now with auto-install!

With consideration for accessibility, prefers-color-scheme settings, persisting preferences and avoiding the dreaded 'flash of death' caused by SSR

Adding a dark / light mode toggle to Next.js using CSS variables

Learn how to integrate Next and Strapi in this 2 part crash course.

NextJS + Strapi Crash Course

In this video we cover deploying Strapi to Heroku with cloudinary. 

Join this channel to get access to perks:
https://www.youtube.com/channel/UC-zet8Eyyy-OUE_fmocp3Wg/join

Follow me on:
📃 Website/Blog: https://jamesperkins.io
👉 Twitter: https://twitter.com/james_r_perkins
👉 Linkedin: https://www.linkedin.com/in/james-perkins-268992a4
👉 Github: https://github.com/perkinsjr
👉  Discord : https://discord.gg/dqYP9Mc
--- 
Need 1:1 mentoring? 
Want to Donate?
Want to do business?
https://snugg.me/snuggery/?id=AGZ8lAig7uf1zXobyhw0jfuXA6Q2 
--

NextJS + Strapi Crash Course Part 1 : The Backend

In this video we cover using NextJS + Rest API to get the content from strapi and display it to the user. 

CHECK OUT COLBY FAYOCKS new course: https://www.youtube.com/watch?v=QjZIeA952jE&ab_channel=ColbyFayock 

Join this channel to get access to perks:
https://www.youtube.com/channel/UC-zet8Eyyy-OUE_fmocp3Wg/join

Follow me on:
📃 Website/Blog: https://jamesperkins.io
👉 Twitter: https://twitter.com/james_r_perkins
👉 Linkedin: https://www.linkedin.com/in/james-perkins-268992a4
👉 Github: https://github.com/perkinsjr
👉  Discord : https://discord.gg/dqYP9Mc
--- 
Need 1:1 mentoring? 
Want to Donate?
Want to do business?
https://snugg.me/snuggery/?id=AGZ8lAig7uf1zXobyhw0jfuXA6Q2 
--

NextJS + Strapi Crash Course Part 2 : NextJS integration.

In this talk, Scott Moss (Netflix developer) shows some of the awesome features of NextJS and things he ran into while developing Tipe (a powerful headless CMS for Next.js Apps).

Guru Talks are monthly webinars for our employees where we get inspired by international speakers and our colleagues. It includes:
- 2 lightning talks by Frontmen colleagues on various subjects
- 1 Guru Talk ending with a Q&A
- 1 MC making the event a smooth experience

Interested in Frontmen?
We're always looking for great Frontend Developers!
Have a look at our website https://frontmen.nl/

NextJS in Production - Scott Moss | GURU TALKS

Next.js is an amazing framework and in this video I go over five Next.js tips and tricks to improve your developer experience.

Happy coding :)

5 Next.js Tips and Tricks to Improve Your Developer Experience

Learn how to take a new project from design to development in this crash course. We'll walk through the full stack of building a new web app including designing a new app, starting the app from scratch, building components, adding dynamic content with authenticated APIs, automating tests, and deploying the project to the web.

Code: https://github.com/colbyfayock/my-posts-app

Support my work by liking this video and subscribing for more free tutorials! 
https://youtube.com/colbyfayock?sub_confirmation=1
https://twitter.com/colbyfayock
https://colbyfayock.com/newsletter

Ready to get started? Here's a breakdown of all the chapters and what to expect. More info: https://fromdesignto.dev

0:00:00 - Intro
Welcome! Ready to dive in? 🚀

0:00:28 - What tools will we use?
Reviewing what tools we'll use including:
- Figma: https://figma.com/
- Next.js: https://nextjs.org/
- Sass: https://sass-lang.com/
- Storybook: https://storybook.js.org/
- Applitools: https://info.applitools.com/udbC3
- GitHub Actions: https://github.com/features/actions
- Netlify: https://www.netlify.com/
- Airtable: https://airtable.com/

0:01:05 - Picking a new project with 50 Projects for React & the static Web
Downloading the free project idea PDF from https://50reactprojects.com and reviewing project ideas

0:01:40 - Creating a new design with Figma
Creating a new project in Figma and learning how to use Figma design tools.

0:10:30 - Creating a new React app with Next.js and Create Next App
Starting a new Next.js app from scratch and organizing content structure.

0:15:43 - Installing and configuring Sass in Next.js
Adding and configuring Sass in a Next.js app and learning how to use Sass features like nesting and variables.

0:18:37 - Create a project layout from a Figma design in Next.js 
Using a Figma design to create a new project in Next.js including the design to development handoff with CSS styles, making changes using browser devtools, and adding new fonts from Google Fonts. 

0:38:17 - Adding Storybook to a Next.js app
Installing Storybook in a Next.js React project and configuring the project to use Sass, then creating new stories to use in the project.

0:56:00 - Developing and designing React components in Storybook
Creating new Figma design components to help develop new React components, using Iconset and React Icons to add SVG icons, and creating new React components from scratch.

1:36:52 - Deploying a Next.js project with Netlify
Creating and setting up a new repository for the project including connecting it to Netlify and installing the Next.js build plugin for Netlify.

1:42:52 - Automating Visual Testing with Applitools Eyes & GitHub Actions in Storybook
Getting started with Applitools including finding the API key, installing the Applitools Eyes Storybook SDK, adding visual testing to the Storybook project, and setting up a GitHub Action to automate running tests using GitHub Secrets for API keys.

1:58:48 - Authentication with Netlify Identity and React Context
Installing and setting up Netlify Identity with the Netlify Identity Widget to add authentication and using a custom React hook with the Context API to wrap the Next.js app with global authentication state.

2:27:16 - Adding dynamic content with the Airtable API
Setting up a new Airtable Base and using the REST API to fetch content, create content, and using Next.js serverless functions to authenticate API requests through Netlify Identity.

3:23:23 - Deploying the final app and serverless functions to Netlify
Adding sensitive data as environment variables to Netlify, debugging serverless functions inside of the Next.js project to deploy the final project to Netlify.

3:29:03 - Project recap
Breakdown of everything accomplished including:
- 50reactprojects.com to get project ideas
- Creating a design in Figma
- Using Create Next App to create a new React app
- Setting up Storybook to develop components
- Adding Applitools Eyes for automated Visual Testing
- Authenticating our app with Netlify Identity
- Using Airtable to fetch and create dynamic data
- Creating serverless functions for securing API requests
- Setting up environment variables for sensitive data

3:33:43 - Congrats, you made it!
🥳🥳🥳

Full breakdown of everything included:
https://fromdesignto.dev

🔔 Subscribe for more tech and developer videos
https://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://colbyfayock.com/newsletter

💝 Sponsor me for more free content like this!
https://github.com/sponsors/colbyfayock

👨‍🚀 Brought to by colbyfayock.com
https://colbyfayock.com

🎥 Want to know what A/V equipment I use?
https://colbyfayock.com/what-i-use

🛍 Create an eCommerce Store with Next.js and Stripe Checkout
https://colbyfayock.com/ecomm

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

From Design to Development Crash Course - Figma, Next.js, Storybook, & more!

The COVID-19 global pandemic has upended the conference industry. Not only cheaper and easier to organize, but also bigger and more global in both audience and impact, virtual events are here to stay.

Do you want to build a high performant, mobile optimized event while maintaining a full control over the front-end experience?
Do you want to deliver a frictionless, engaging registration that page drives conversions? 

Then this hands-on developer workshop is for you!

Join Solutions Architect Lee Robinson from Vercel and Joel Varty, President of Agility CMS, who worked hard to make Next.js Conf epic platform available to everyone! 

This Virtual Event Starter Kit was used to run Next.js Conf 2020: 80K+ registrations, 40K+ attendees, 4 stages, dozens of sponsors booths. 

Now you can just CLONE. DEPLOY and CUSTOMIZE with your favorite Headless CMS.

Let us show you a few clicks, and you will have a powerful conference platform ready for you to launch virtual events. 

What you will learn:

Best practices for creating a conference platform that delights both marketing team and developers.
Ins and outs of Next.js legendary conference platform that brought 80k Registrations and 40K Attendees.
Secret tricks and tips for a viral ticketing system and engaging conference chats.
Practical step-by-step instructions on how to launch your own custom conference platform using Next.js and Agility CMS.

What is Next.js?

Next.js is a hybrid framework that builds on top of React to provide an even simpler development experience. The JavaScript framework has a gentle learning curve, which makes it simple to implement even for novice JS developers. Learn more.

What is Vercel?

Vercel is a cloud platform for hybrid applications and Serverless Functions that fits perfectly with your workflow. It enables developers to host websites and web services that deploy instantly, scale automatically, and requires no supervision, all with no configuration. Learn more.

What is Agility CMS?

Agility CMS is a headless CMS platform born in Canada in 2003: Jamstack-friendly, API-first, headless CMS with hybrid features.  In the world of pure headless CMS and traditional CMSs, it is designed to offer the best of both worlds: fast and flexible for developers as well as easy and powerful for marketers. Agility CMS gives both developers and marketers the tools to build, manage, and maintain their content with ease.

How to Deploy a Powerful Virtual Event in Record Time: With Next.js and Agility CMS

In this video, we cover how to use Next Auth to connect to our AWS Cognito user pool for authentication in our Next.JS project.

📱 Discord server:
https://devascend.com/d/discord

📚 Library(s) needed: npm i next-auth

🖥️ Source code: https://devascend.com/d/github

💡 Have a video request?
Suggest it in the Dev Ascend Discord community server or leave it in the comments below!

🕐 Timestamps:
00:00 Introduction
00:40 Creating our Next.JS project
00:59 Installing NextAuth
01:18 Setting up our project
01:45 Adding our provider to our main component
02:37 Setting up client-side logging in
04:53 Setting up the cognito user pool
07:00 Setting up the NextAuth API
09:15 Testing out our authentication

#aws #cognito #nextjs

Stream With Colby Fayock - Set Up a Blog With Wordpress And NextJS

Create a Developer Portfolio site with Next.js, DEV and GitHub

Try the new Essential Next.js plugin, now with auto-install! (www.netlify.com)

Adding a dark / light mode toggle to Next.js using CSS variables (electricanimals.com)

NextJS + Strapi Crash Course March 15th, 2021

NextJS + Strapi Crash Course Part 1 : The Backend

NextJS + Strapi Crash Course Part 2 : NextJS ...

NextJS in Production - Scott Moss | GURU TALKS

5 Next.js Tips and Tricks to Improve Your Developer Experience

From Design to Development Crash Course - Figma, Next.js, Storybook, & more!

How to Deploy a Powerful Virtual Event in Record Time: With Next.js and Agility CMS

NextAuth.js + AWS Cognito Tutorial - Next.js Authentication