Learn how to speed up your workflow with Next.js, the popular, React-based framework that lets you build web applications quickly, easily, and effectively using JavaScript.
Overview
Syllabus
Introduction
- Speeding up your workflow with Next.js
- What you should know
- The exercise files and what you need
- Learning the building blocks of an application
- What is a web framework?
- Discovering the Next.js framework
- Learning the benefits of Next.js
- Getting started with the Next.js tooling
- Creating new pages
- Building a file-based routing system
- Creating links to navigate between pages
- Setting up dynamic routing and URLs
- Challenge: Set up a file-based system with zero config
- Solution: Set up a file-based system with zero config
- Discovering the rendering strategies
- Discovering the rendering strategies with getStaticProps
- Pre-rendering at build time with static generation
- Pre-rendering super fast and super SEO-efficient content
- Discovering the rendering strategies with getServerSideProps
- Using dynamic routes and user's input to query content
- Search, request, and pre-render content with SSR
- Discovering the rendering strategies with getStaticPaths
- Pre-rendering at build time with static paths
- Handling errors with a fallback page (404 not found)
- Customizing an error page
- Challenge: Pre-rendering at build vs. runtime
- Solution: Pre-rendering at build vs. runtime
- Adding global styles
- Using scoped CSS with CSS modules
- Styling Next.js with styled JSX
- Loading static images
- Challenge: Add global and scoped styling
- Solution: Adding and maintain CSS globally
- What to learn next?
Taught by
Sandy Ludosky