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
- Users can login or signup and create their catalog.
Dark Mode
- Dark mode switch to dim the lights.
Share Streams
- Embed music, videos or social media content.
- 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.
Ready? Let's get started.