Mastering Next.js

Build static and server-rendered applications with Next.js and React

Recommended by Teachable

$

99

FREE

$

0

$

99

  • 2 Example Applications: A blog using Markdown & React (MDX), optimized for SEO. A Reddit-like crowdsourced voting app with a custom GraphQL API.
  • 4+ hours of content: Master the best features of Next.js with ease. Dynamic routing, TypeScript integration, lazy-loading, deployment, API routes, handling static assets, performance optimization, and more!
  • 50+ Jam-packed lessons: 12 easy to consume video modules. Everything you need to know to build Next.js apps.
Teachable Best Price Guarantee™

If you find it cheaper anywhere else, we'll refund you the difference.

Price:

$

99

FREE

$

0

Teachable Best Price Guarantee™

If you find it cheaper anywhere else, we'll refund you the difference.

Your Outcome

About this course

Next.js is the React framework that evolves with your product. It's unique among front-end frameworks because it seamlessly allows developers to grow from static sites to server-rendered sites as requirements change. This course will give you an introduction to Next.js and its ecosystem.


- Static Sites

- Server-Side Rendering

- Pre-Rendering


Who is this for?

You will be expected to be familiar with basic HTML, CSS, JavaScript, and React. We’ll utilize the latest JavaScript features and best practices.

- Beginner Friendly

- Open-Source Code

- High-Quality Video & Audio

What Students Say

No items found.

Introduction

  • Why Next.js?
  • Fundamentals of Next
  • Zero-Config approach
  • Universal JavaScript (Isomorphic)
  • Server-side rendering
  • Code splitting
  • Next vs. Create React App vs. Gatsby

React Overview

  • Classes vs Functional Components
  • Props & State
  • React Hooks (useState & useEffect)
  • ES6
  • JSX

Developing Locally

  • Installing Nextjs
  • Running locally
  • Linting
  • Formatting

Navigating Between Pages

  • Link (client-side routing)
  • withRouter
  • getInitialProps
  • Retrieving data from URLs

Styling

  • CSS (Importing & Using)
  • Sass
  • CSS-in-JS (Custom _app.js)
  • Styled-Components
  • Responsive + Mobile-First Design
  • moduleFetching Data
  • Static Sites with Next.js 9.3
  • Custom Server
  • Node.js & API Routes
  • GraphQL
  • Hasura

Managing Assets and SEO

  • Static Assets
  • Public Files
  • Image Compression / Optimization
  • Custom _document.js
  • Open Graph (OG) tags

Building A Blog With MDX

  • MDX vs CMS
  • Initial Setup
  • Managing Posts
  • Building Forms (StaticKit)
  • Using a Component Library (Theme UI)

Authentication

  • What is a JWT?
  • Auth0
  • Firebase Auth
  • Login & Signup Pages

Testing & Error Handling

  • Unit test vs Integration test
  • React Testing Library
  • Jest Snapshot Testing
  • Sentry Plugin
  • Custom Error Page (_error.js)

State Management & More

  • Redux
  • React Context
  • Adding TypeScript
  • Dynamic Imports

Exporting & Deployment

  • Static Pre-Rendering
  • Serverless Functions
  • Vercel
  • Netlify

Your Instructor

Lee Robinson
Full-stack developer

Lee Robinson is a full-stack developer, writer, and creator from the Midwest. He’s used React & Next.js extensively in his professional career and for freelance clients.

Lee has spoken across the country at conferences and meet-ups about front-end development and design. He’s also a part-time videographer and musician.

Frequently asked questions

What is the format of the course?

Mastering Next.js contains 12 video modules. Each module includes a handful of lessons. If the module has code referenced, it's included in the Mastering Next.js repository. There are also two full example applications to reference.


What if I decide it's not for me?

No problem at all! Email me at me@leerob.io and I'll refund you in full, no questions asked.


30 Day Money Back Guarantee

It's completely risk free to buy a course on Discover.

Try any course on Teachable Discover and if after 30 days, you were not impressed, you can request a full and complete refund.

Categories

One time limited offer

00

Days

00

Hours

00

Mins

00

Secs

Mastering Next.js

By
Lee Robinson

Build static and server-rendered applications with Next.js and React

Recommended by Teachable

Your Outcome

  • 2 Example Applications: A blog using Markdown & React (MDX), optimized for SEO. A Reddit-like crowdsourced voting app with a custom GraphQL API.
  • 4+ hours of content: Master the best features of Next.js with ease. Dynamic routing, TypeScript integration, lazy-loading, deployment, API routes, handling static assets, performance optimization, and more!
  • 50+ Jam-packed lessons: 12 easy to consume video modules. Everything you need to know to build Next.js apps.
Full Price
$
0
$
99
Pay Monthly
$
/MO
Enroll Now
30 Day Money Back Guarantee
Price:
$
0

About this course

Next.js is the React framework that evolves with your product. It's unique among front-end frameworks because it seamlessly allows developers to grow from static sites to server-rendered sites as requirements change. This course will give you an introduction to Next.js and its ecosystem.


- Static Sites

- Server-Side Rendering

- Pre-Rendering


Who is this for?

You will be expected to be familiar with basic HTML, CSS, JavaScript, and React. We’ll utilize the latest JavaScript features and best practices.

- Beginner Friendly

- Open-Source Code

- High-Quality Video & Audio

What Students Say

No items found.

Introduction

  • Why Next.js?
  • Fundamentals of Next
  • Zero-Config approach
  • Universal JavaScript (Isomorphic)
  • Server-side rendering
  • Code splitting
  • Next vs. Create React App vs. Gatsby

React Overview

  • Classes vs Functional Components
  • Props & State
  • React Hooks (useState & useEffect)
  • ES6
  • JSX

Developing Locally

  • Installing Nextjs
  • Running locally
  • Linting
  • Formatting

Navigating Between Pages

  • Link (client-side routing)
  • withRouter
  • getInitialProps
  • Retrieving data from URLs

Styling

  • CSS (Importing & Using)
  • Sass
  • CSS-in-JS (Custom _app.js)
  • Styled-Components
  • Responsive + Mobile-First Design
  • moduleFetching Data
  • Static Sites with Next.js 9.3
  • Custom Server
  • Node.js & API Routes
  • GraphQL
  • Hasura

Managing Assets and SEO

  • Static Assets
  • Public Files
  • Image Compression / Optimization
  • Custom _document.js
  • Open Graph (OG) tags

Building A Blog With MDX

  • MDX vs CMS
  • Initial Setup
  • Managing Posts
  • Building Forms (StaticKit)
  • Using a Component Library (Theme UI)

Authentication

  • What is a JWT?
  • Auth0
  • Firebase Auth
  • Login & Signup Pages

Testing & Error Handling

  • Unit test vs Integration test
  • React Testing Library
  • Jest Snapshot Testing
  • Sentry Plugin
  • Custom Error Page (_error.js)

State Management & More

  • Redux
  • React Context
  • Adding TypeScript
  • Dynamic Imports

Exporting & Deployment

  • Static Pre-Rendering
  • Serverless Functions
  • Vercel
  • Netlify

Your Instructor

Lee Robinson

Full-stack developer

Lee Robinson is a full-stack developer, writer, and creator from the Midwest. He’s used React & Next.js extensively in his professional career and for freelance clients.

Lee has spoken across the country at conferences and meet-ups about front-end development and design. He’s also a part-time videographer and musician.

Frequently asked questions

What is the format of the course?

Mastering Next.js contains 12 video modules. Each module includes a handful of lessons. If the module has code referenced, it's included in the Mastering Next.js repository. There are also two full example applications to reference.


What if I decide it's not for me?

No problem at all! Email me at me@leerob.io and I'll refund you in full, no questions asked.


30 Day Money Back Guarantee

It's completely risk free to buy a course on Discover.

Try any course on Teachable Discover and if after 30 days, you were not impressed, you can request a full and complete refund.