Learn Netlify, Next and Screen-reader

**Developers aren’t the only ones working on sites.** 

Marketers, copywriters, designers, and other non-coding roles all need to be able to make content changes. If you don't want to be bothered to open a PR every time a typo needs fixed, you *need* a CMS. 

And Strapi is an *amazing* CMS option.  

Strapi helps you quickly build a robust content API. You can host it yourself, it supports both RESTful and GraphQL, handles your authentication, lets you bring team members and it's highly customizable with plugins and extensions. 

You can take those gains even further by adding **Next.js 13 to the stack.** 

Next.js is fast, supports both server and client-side rendering, and features dynamic routes. Once you are generating dynamic pages from your CMS you’ll see just how powerful the combination of Strapi and Next.js is!

**In this course you will do the following:** 

- Building Content Models with Strapi
- Fetching Data from your Headless CMS
- Using React Server Components
- Using the Next.js App directory
- Setting up pagination in Strapi and Next.js
- Parsing and rendering content in your Next.js application
- Connecting external services to your Headless CMS (like Cloudinary for Media Management)
- Deploying your Next.js and Strapi Applications to a production environment
- Setting up and using Strapi Plugins
Transferring data between your Strapi environments

By the end of this course you’ll be building pages and managing your content like a pro!

strapi

Modern CMS Driven Web Applications with Strapi and Next 13

In this course, Colby is going to do a deep dive into creating a full store for your products. You'll learn how to set up and use GraphCMS as your content management system. You'll learn about the Cloudinary UI extension and how to use it to host your images. You'll learn about Snipcart and using the useSnipcart hook to handle the cart state and the checkout. You'll learn how to implement Stripe as your payment gateway. And lastly, you'll learn how to deploy a Next js app to vercel from github with environment variables.

snipcart

Ecommerce Product Management & Storefront with GraphCMS, Snipcart, & Next.js


Next.js is one of the most popular server-side-rendered React frameworks you can use to build production-ready serverless applications in record time. 

On the other hand, Fauna is a flexible, serverless, distributed document-relational database. Fauna has a powerful GraphQL API and custom resolver support. 

Using Next.js and Fauna, you can build robust, feature-rich, production-ready full-stack applications without the hassle of managing any servers or databases.

In this course, Shadid guides you through building your very own full-stack serverless marketplace application using Next.js, GraphQL, and Fauna. 

You will learn,

- How to work with Apollo GraphQL Client in Next.js
- How to setup Fauna GraphQL
- Data modeling in Fauna
- How to write custom Fauna GraphQL Resolvers (UDFs)
- How to authenticate with Auth0?
- Stripe payment 



GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

graphql

Full-Stack Serverless Applications with Next.js & Fauna

Next.js is a minimalistic framework for server-rendered React applications.

Fundamental Next.js API and Patterns

In this course, you'll create a blog that runs without a database. You'll be able to edit your content from your local file system or from GitHub.

You'll deploy your blog to Vercel and set up real-time previews with Next.js' draft mode!



React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Create a GitHub-Powered Blog With Keystatic and Next.js

A large number of people are unable to use the web effectively due to an impairment or disability.

As developers there are several tools and techniques we can use to make our web applications accessible, ensuring a great user experience that includes everyone.

We all agree that Accessibility is important. However, it’s a broad landscape and can be overwhelming figuring out where to start!

Erin Doyle is an expert in creating accessible React applications and has developed a course that will give you a concrete process for testing, refactoring, and building your applications with accessibility in mind.

After this course, you'll have a jump start on auditing and fixing accessibility issues in your applications and gain a better understanding of your target users and how to approach your web app design from their perspectives.


Develop Accessible Web Apps with React

Storybook is a tool for UI development. It makes development faster and easier by isolating components. This allows you to work on one component at a time. You can develop entire UIs without needing to start up a complex dev stack, force specific data into your database.

In this course, Michael Chan will teach you how to integrate Storybook 6.3 with Next.js 11 so that you can flawlessly build UIs. 

The course will kick off by taking the default Next.js page and turning it into a Story. You will then learn how to leverage Story `Args`, configure the `next/image` component to be unoptimized, and mock server workers with MSW inside Storybook.

Integrate Storybook in a Next.js Application

### Accept payments & sell products powered by Stripe and the best of the JAMStack

There are as many ways to build an e-commerce store on the internet as there are products to sell. One thing is for certain, e-commerce is here to stay and as professional developers we need to understand how to build fully custom stores for our clients using the best modern tools available.

- React: flexible and customizable while following modern best practices
- Next.js: lightening fast with guide rails to help your project perform as consumers expect
- Stripe Checkout: lets you offload reams of complicated business logic to a trusted third party that maintains regulatory compliance, global payments, and a standard UX.

Your store will have well managed local component state using React Hooks and you'll also have clear and cohesive shared (global) state with React Context.

Finally you'll deploy your custom store to Vercel (the platform behind Next.js) as well as how to make your Next.js e-commerce store portable to deploy to other platforms.

Create an eCommerce Store with Next.js and Stripe Checkout

Add Conversation Intelligence to your video or voice application without training Machine Learning models. Integrate speech to text and all of the below capabilities, out of the box:

- Speaker Diarization
- Sentiment Analysis
- Contextual Insights
- Conversational Analytics
- Topics of Discussion
- Entity and Intent Recognition
- Pre-built UI and Symbl JS Elements

In this course we will use [Symbl.ai](https://symbl.ai/) to get transcripts for the video we will upload as well as more meaningful insights. 

Additionally, you will pick up NextJS for the main stack and will use Symbl's RESTful APIs for processing a conversation from a video and rendering transcripts to screen. Get your Symbl account [here](https://platform.symbl.ai/) and start building.

Create Contextual Video Analysis App with NextJS and Symbl.ai

Starting from a prebuilt frontend, Jason Lengstorf guides you through the creation of a "Corgi Up-boop App" that uses Netlify Functions and Hasura. You can view [the deployed final product on Netlify](https://egghead-serverless-functions.netlify.app/).

You'll set up the Netlify CLI, and configure a local development environment before writing and deploying functions with a few different use cases.

The first example function bypasses CORS restrictions to retrieve corgi data from an example third-party API.

Next, you'll configure environmental variables to securely communicate with the Unsplash API without exposing private keys to the client.

Serverless functions don't persist data by themselves, so we will use  Hasura to create a GraphQL API for tracking the number of "boops" each corgi receives.

This course is an excellent illustration of the speed of Serverless functions, and how fast you can implement functionality in your web applications.

An all-in-one workflow that combines global deployment, continuous integration, and automatic HTTPS.

netlify

Build a Corgi Up-boop Web App with Netlify Serverless Functions and Hasura

How does e-commerce work on the Jamstack? 

Jason Lengstorf and [Thor 雷神](https://twitter.com/thorwebdev) teamed up on _Learn With Jason_ to [build a serverless Stripe Checkout implementation](https://www.learnwithjason.dev/sell-products-on-the-jamstack). This collection is a cleaned up, egghead-style tutorial for selling products on a Jamstack site using Netlify Functions and Stripe Checkout.

Sell Products Using Stripe Checkout and Netlify Functions

OpenGraph images are the images you see when you paste a link into a social platform and it "unfurls" into an image, title, and description. This happens on Twitter, Discord, Slack, and many other platforms. This collection goes over everything from designing OpenGraph images in Figma, to implementing them in CodeSandbox, to returning headless browser screenshots from Netlify Functions, and finally using Cloudinary as a write-through cache. 

You will come away from this collection with the ability to ship an API that you can use on any of your sites, and also on-demand, that can generate images for not only OpenGraph unfurls, but also for Instagram, GitHub, and more. Using headless browsers with playwright to generate our images means we get full access to all the responsive power of CSS and all the logical power of JS to handle layout, importing assets like pngs, choosing different fonts, and more.

The image below is generated via the project you'll build and deploy in this course

![An example opengraph image](https://relaxed-payne-d1bfbe.netlify.com/opengraph?title=Building%20an%20OpenGraph%20image%20generation%20API%20with%20Cloudinary%20Netlify%20Functions%20and%20React&tags=figma,netlify%20functions,playwright&author=chrisbiscardi)

Building an OpenGraph image generation API with Cloudinary, Netlify Functions, and React

(This collection is still WIP)

Databases are essential for any full-stack applications, but working with them is traditionally very difficult. Prisma is here to change that. It's a powerful database toolkit that helps us think in data itself - not SQL, not classes, just the data we care about in our apps.

In this series, we will learn how to leverage the power of Prisma to automatically generate a type-safe, autocomplete-ready, and efficient query builder, all based on a simple and easy-to-read schema. We will integrate all this good stuff into a Next.js project to complete a simple social network app.

In the end, you will be able to understand how Prisma works, and confidently start using Prisma in your own project.

Prisma is a next-generation open-source ORM For Node.js and TypeScript that helps developers build faster and make fewer errors.

It supports the following databases: PostgreSQL, MySQL, MariaDB, SQL Server, SQLite, and more recently, MongoDB (Preview).

Prisma provides a complete toolkit:

- Prisma Client: Auto-generated and type-safe database client
- Prisma Migrate: Declarative data modeling and customizable migrations
- Prisma Studio: Modern UI to view and edit data


prisma

Build a full-stack app with Prisma

[Next.js](https://nextjs.org/) is a fantastic framework that allows us to build performant server-side rendered React apps with ease.

In this series, we will learn how to utilize the powerful features of Next.js 9, like API routes and Static Site Generation (SSG), to build full-stack React apps. We will use [Auth0](https://auth0.com) to handle user authentication and authorization, and we'll also learn how to integrate the excellent [Chakra UI](https://chakra-ui.com/) component library into our Next.js project to make it a breeze to build beautiful and modularized user interfaces. Finally, we will import and deploy our project from GitHub to [Vercel](https://vercel.com), the deployment platform built by the creators of Next.js.

This collection will still be continuously updated with new and more advanced content. Subscribe to the RSS feed to get notified of the latest lessons!

Introduction to Next.js 9

In this course, we build a Twitter clone from scratch, using the [Next.js App Router](https://nextjs.org/docs/app) and [Supabase](https://supabase.com/). We dive deep on the Next.js App Router, learning about:

- Client Components
- Server Components
- Route Handlers
- Server Actions
- Middleware
- Implementing Optimistic UI

On the Supabase side we look at:

- Configuring Supabase Auth to use cookies
- Using Row Level Security (RLS) policies to implement Authorization
- Querying data across multiple tables
- Introspecting PostgreSQL schema to generate TypeScript definitions with the Supabase CLI
- Subscribing to realtime database changes

This course is a deep dive into modern web development and I'm very excited to see what you're going to build on the other side! 🚀

Build a Twitter Clone with the Next.js App Router and Supabase

A short list of screencasts to cover essentials of [Gatsby](https://www.gatsbyjs.org/) to get started and have enough knowledge to become dangerous. 

The content comes from multiple instructors that have each covered different essentials, this cherry picks some of the most important concepts.

Videos in this collection cover these topics:
- installing plugins
- creating pages
- navigating between pages
- adding optimized images
- theming your styles
- deploying your site

Gatsby is a blazing fast static site generator built with React. Gatsby gives you all of the modern JavaScript tools you want; set up and ready to go out of the box.

gatsby

Up and Running with Gatsby

This application serves as an introduction to building products with a JAMStack and Serverless approach. We cover everything from the beginning:

* starting with the Gatsby client
* handling authentication with Netlify Identity
* Shipping a GraphQL server on Netlify Functions
* Building in access control with a serverless capable database

It uses tools that remove as many of the barriers as possible while also allowing upgrading in the future. Netlify Functions can grow into AWS Lambda, Netlify Identity can grow into Auth0 or Cognito, and FaunaDB can grow into DynamoDB.

Building a Serverless JAMStack Todo app with Netlify, Gatsby, GraphQL, and FaunaDB

This collection is a sequel to the [Building a Serverless JAMStack Todo app with Netlify, Gatsby, GraphQL, and FaunaDB](https://egghead.io/playlists/building-a-serverless-jamstack-todo-app-with-netlify-gatsby-graphql-and-faunadb-53bb) collection. In this collection we take the TODO application we built and convert it to run using Netlify Identity, AWS Lambda (using the serverless framework) and DynamoDB. We cover

* Fauna vs DynamoDB and when to use each
* Setting up AWS accounts
* Creating DynamoDB tables and data modeling differences between Fauna and Dynamo
* Converting our Netlify Functions deployment to a Serverless Framework deployment
* Implementing Custom authorizer functions on AWS

It uses tools that remove as many of the barriers as possible. Netlify Functions grows into Serverless Framework adn AWS Lambda, Netlify Identity is kept around, and FaunaDB can grows into DynamoDB.



FaunaDB is a global serverless database that gives you ubiquitous, low latency access to app data, without sacrificing data correctness. It eliminates layers of app code for manually handling data anomalies, security, and scale, creating a friendlier dev experience for you and better app experience for your users.

faunadb

Converting a Serverless App to run on AWS Lambda and DynamoDB with Serverless Framework

Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.

tailwind

Architect an Extensible Digital Garden with Next.js, Tailwind, and Nx

Create a serverless application and deploy it in under thirty minutes!

We'll be using Netlify, Vite, TypeScript, and React in our project. This stack synergizes extremely well for rapidly developing professional-quality applications. 

If you haven't heard of Vite, it's the French word for quick! It's also a build tool that consists of a dev-server and an extremely fast bundler. It makes for a rapid development loop.

As for the rest. Netlify makes hosting fast and easy with serverless functions and continuous deployment. React enables you to quickly create reusable components. And TypeScript helps you write cleaner code that is easier to refactor. 

So get started and learn how to use this stack in your own applications!

Search

Search Results