Introduction

Strongly Typed Next.js

link Welcome

Welcome to Strongly Typed Next.js!

Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

link Course Overview

Next.js

  • Custom _app.tsx
  • Custom _document.tsx
  • Custom Server
  • Server Side Rendering (SSR)

React

  • Functional components
  • React hooks
  • Props and state
  • Decorators (ES7)

Styling

  • Material UI
  • Responsive design
  • Custom themes
  • Dark mode

GraphQL

  • Apollo Server
  • TypeGraphQL
  • Typegoose
  • Queries
  • Mutations

Authentication

  • JSON Web Tokens (jwt)
  • Encryption (bcrypt)
  • Login and signup
  • User Context

link Course Prerequisites

We assume you know the basics of HTML/CSS/JavaScript and perhaps have dabbled in a newer front-end library (like React) to recognize what it offers.

The course does not teach you how to program from scratch. We delve into intermediate/advanced code, for example, building a GraphQL server with Node.js and using Hooks with React.

While you don't have to be a React expert, it is good if you have, for example, gone through a basic React tutorial beforehand.

link Why Next.js?

Zero Config

Automatic compilation and bundling. Optimized for production from the start.

TypeScript Support

Automatic TypeScript configuration and compilation.

Fast Refresh

Fast, reliable live-editing experience, as proven at Facebook scale.

File-system Routing

Every component in the pages directory becomes a route.

API Routes

Optionally create API endpoints to provide backend functionality.

Built-in CSS Support

Create component-level styles with CSS modules. Built-in Sass support.

Who is using Next.js?

Check out the Next.js Showcase

What are we building?

We are building a streaming service called Stream.me.

Our app will feature the following functionality:

Authentication

Builder Book

  • Users can login or signup and create their catalog.

Dark Mode

Builder Book

  • Dark mode switch to dim the lights.

Share Streams

Builder Book

  • Embed music, videos or social media content.

Builder Book

  • Share streaming content with embedded links.

Here are some other examples of popular streaming services:
https://twitch.tv
https://youtube.com

Before getting started, here is an excellent tutorial to get familiar with Next.js:

Create Next.js App (nextjs.org)

Pre-requisites

Before we dive into the implementation, here are a few things you’ll need to follow along.

  • Node 6 or higher
  • Yarn
  • NPM
  • Basic Knowledge of GraphQL and Node.js

Ready? Let's get started.

format_list_bulleted
help_outline