Next.js & React - The Complete Guide
Implementation of the Maximilian Schwarzmüller's course: Next.js & React - The Complete Guide. Each folder of the repo represents one of the section of the course.
Section 3: Pages & File-based Routing
Routing and navigation with Next.js. Folder: /routing
Section 4: Project Time - Working with File-based Routing
Routing and navigation applied to a simple demo project. Folder: /routing-demo-project
Section 5: Page Pre-Rendering & Data Fetching
This section covers the next topics:
- Explanation of how Next.js blends Server-side and Client-side code
- What is "Data Fetching"
- Static vs Server-side page generation
Folder: /pre-rendering.
Section 6: Project Time - Page Pre-Rendering & Data Fetching
Page Pre-Rendering & Data Fetching applied to the project developed during Section 4.
Folder: /pre-rendering-demo-project
Section 7: Optimizing NextJS Apps
This section covers the next topics:
- Adding Meta and tags
- Re-using components, logic and configuration
- Optimizing images
Folder: /optimization.
Section 8: Adding Backend Code with API Routes (Fullstack React)
This section covers the next topics:
- What are API Routes?
- Adding & Using API Routes
- Working with Requests & Responses
Folder: /api-routes
Section 9: Project Time - API Routes
API Routes applied to the project developed during Section 7. Folder: /api-routes-demo-project
Section 10: Working with App-wide State (React Context)
Adding app-wide state to the demo project developed during Section 9. Folder: /context
Section 11: Complete App Example: Build a Full Blog A to Z
Practical application of all the concepts and topics covered during the course.
Folder: /blog
Section 12: Deploying NextJS Apps
Section 13: Adding Authentication
This section covers the next topics:
- How does authentication work?
- Implementing Signup & Login
- Controlling page access
Folder: /auth
Images and data
-
coding-event.jpg: Photo by Vladimir Fedotov on Unsplash
-
introvert-event.jpg: Photo by Vladimir Fedotov on Unsplash
-
extrovert-event.jpg: Photo by Priscilla Du Preez on Unsplash
-
dog.jpg: Photo by Oleksandr Horbach on Unsplash
-
getting-started-with-nextjs.jpg: Photo by Ferenc Almasi on Unsplash
-
nextjs-file-based-routing.png: Photo provided by course instructor
-
github-logo.png: Logo provided by Github
-
Products data: Randomly generated with mockaroo