Зміст курсу
Next.js 14 Mastery for Building Modern Web Apps
Next.js 14 Mastery for Building Modern Web Apps
1. Introduction to Next.js
2. Setting Up a Next.js Project
Setting Up the Next.js Project Understanding the Project File and Folder StructureStyling Approaches in Next.jsAdding the Global CSS FileUsing Tailwind CSS for StylingWorking with CSS ModulesApplying Styles ConditionallyAdding Custom Google FontsChallenge: Implementing a Custom Google FontHandling Images in Next.js
3. Building Pages and Layouts in Next.js
4. Deploying a Next.js App and Setting Up a Database
5. Fetching and Displaying Data in Next.js
6. Advanced Next.js Features and Optimizations
7. Implementing Authentication in Next.js
Understanding AuthenticationSetting Up the Login RouteUsing NextAuth.js for AuthenticationConfiguring Authentication and Protecting RoutesHashing Passwords and Managing CredentialsImplementing Sign-In FunctionalityConnecting the UI with Authentication LogicImplementing Logout FunctionalityFinal Thoughts and Next Steps
Using NextAuth.js for Authentication
NextAuth.js is a tool to add authentication to our application easily. It handles the complexity of managing user sessions, sign-in, sign-out, and other authentication tasks. Instead of manually building these features, which can be time-consuming and prone to errors, NextAuth.js streamlines the process, offering a unified solution for authentication in Next.js applications.
Setting up NextAuth.js
Important: Windows users, please avoid using the PowerShell terminal and instead use the Bash terminal.
- Install NextAuth.js: Use the command
npm install next-auth@beta
in the terminal to install the beta version of NextAuth.js. This version is compatible with Next.js 14; - Generate a Secret Key: Create a secret key to encrypt cookies, securing user sessions. Run
openssl rand -base64 32
in the terminal to generate this key; - Add Key to
.env
File: Include the generated key in your.env
file, assigning it to theAUTH_SECRET
variable:
- Update Environment Variables in Vercel: If you're deploying the app on Vercel for production, update environment variables there too.
In Practice
Все було зрозуміло?
Дякуємо за ваш відгук!
Секція 7. Розділ 3