Learning Next.js

Course details

Next.js is a React framework developed by developers for developers, to create high-quality, responsive web applications. With built-in tools and ready-to-use features, Next.js makes the development process painless and a breeze. In this course, web developer and trainer Sandy Ludosky teaches you how to leverage the Next.js framework to speed up and improve your workflow, whether you are a front- or back-end developer. Find out how to build and deploy a fully functional web application. Explore ways to leverage and improve the developer experience. Plus, go over practical examples and complete a course project to help you practice what you’ve learned. This course can help you get to the next level with Next.js.

Learning objectives
Learning the foundation of the Next.js framework to build and deploy a fully functional web application.
Learning the benefits of the Next.js framework to leverage and improve the developer experience.
Learn the foundations of the Next.js framework with a practical example, covering the complete process from start to finish, including deployment to the cloud.
Complete a course project that will equip you with the knowledge and skills to leverage the power of Next.js and TypeScript effectively in your projects.

Concepts

0. Introduction

01 - Next.js - A React framework by developers, for developers
02 - What you should know
03 - Exercise files

1. Getting Started and Discovering Next.js

04 - What is Next.js
05 - The benefits of using Next.js
06 - Setting up the development environment
07 - Creating the Blog project and exploring the app anatomy

2. Building Your Application with App Router

08 - Creating pages and layouts
09 - Creating a shared layout between pages
10 - Navigating between pages
11 - Challenge - Add a route
12 - Solution - Add a route
13 - Create a dynamic route

3. Styling Your Application - CSS and Custom Fonts

14 - Adding global styles
15 - Using Tailwind CSS
16 - Using CSS modules for components
17 - Apply conditional styling with clsx
18 - Challenge - Optimizing images and fonts
19 - Solution - Optimizing images and fonts

4. Deploy and Connect to a Data Source

20 - Create a GitHub repository and push the project
21 - Creating a Vercel account
22 - Connect and deploy your project
23 - Challenge - Write and push changes then redeploy
24 - Solution - Write and push changes then redeploy
25 - Setting up a PostgreSQL database

5. Fetching Data

26 - Discovering the different ways of fetching data
27 - Seed the database and execute SQL queries
28 - Use SQL queries to fetch data
29 - Challenge - Insert data to the database
30 - Solution - Insert data to the database

6. Handling Errors, Pre-rendering, Caching, and Optimizing

31 - Static rendering vs. dynamic rendering
32 - Dynamic rendering without caching
33 - Enable streaming and partial rendering with a loading page
34 - Adding loading skeletons
35 - Handling errors with an error page - error.tsx
36 - Challenge - Handling 404 errors with notFound functions
37 - Solution - Handling 404 errors with notFound functions

7. Adding Authentication

38 - Getting started with NextAuth.js
39 - Setting up NextAuth.js
40 - Creating the auth routes and components
41 - Adding the Google credentials provider
42 - Sign in with your Gmail account
43 - Challenge - Authenticate and create posts
44 - Solution - Authenticate and create posts
45 - Protecting pages and API routes

8. Generative AI - Build a Chatbot with OpenAI

46 - Set up and configure a project
47 - Define requests to generate completion with the ChatCompletion API
48 - Writing blog posts with AI-generated content

Conclusion

49 - Next steps