NextJS Practice

April 3, 2026 · View on GitHub

Repository created to record my practice learning NextJS with exercises based on the Udemy Course of Maximilian Schwarzmüller.

Status
Requirements
Setup
How to run it
Repo structure & what i learned in each exercise
Other practice repos

Status

Current repo's version is
This course has been completed on 16/09/2025 - Certificate

Requirements

Node v20 or above
For some exercises, you will need a cloudinary account and link its keys to its according env files.

Setup

After cloning the repo, go to the created folder and install the node packages.

git clone https://github.com/NicolasOmar/next-practice.git
cd next-practice
npm run setup-all

setup-all is the command to install all the projects, but if you want to do it one by one, you can change that last line for one of the following:

App Setup	Command
All	`npm run setup-all`
React Basics	`npm run setup-react-basics`
Next Essentials	`npm run setup-next-essentials`
Routing and page rendering	`npm run setup-routing-and-rendering`
Work with APIs	`npm run setup-work-with-apis`
Caching	`npm run setup-caching`
SEO optimizations	`npm run setup-optimizations`
User authentication	`npm run setup-authentication`

How to run it

To run any specific exercise, execute the following command in the project´s folder:

npm start

Repo structure & what I learned in each exercise

React Basics (1-react-basics folder)
- Create a new project based on Vite.
- Understanding and usage of CSS modules.
- Learn about React concepts such as components, props passage, input change methods, function passing though components, and conditional rendering.
- Understanding of its core hooks such as useState and useEffect.
- Understand how to handle REST API calls.
- Understanding and usage of the routing engine implementation by react-router-dom, as well as data loading and posting techniques based on loader and action features.
Next Essentials (2-next-essentials folder)
- Create a new project using Next provided command.
- Understanding of file-based routing and several reserved file names.
- Understand the difference between server-side and client-side components and how to implement them efficiently.
- Understand how to make API calls asynchronously on a server-side component.
- Basic database script handling using better-sqlite3.
- Understanding and usage of several reserved components such as page, loading, error, and not-found.
- Usage of granular loading using Suspense.
- Understanding and usage of form-related handler methods such as useFormStatus and useActionState.
- Understanding and basic usage of metadata injection in static and dynamic ways.
Routing and page rendering (3-routing-and-rendering folder)
- Understanding and usage of routing features such as:
  - parallel routes
  - catch-all routes
  - intercepting routes
  - content routes
Working with APIs (4-work-with-apis folder)
- How to handle REST queries with async functions at the component level.
- How to handle loading states with loading page or Suspense.
- How to handle form data and errors with server actions.
- How to renew cache on need with revalidatePath.
- How to handle value optimistically changes with useOptimistic.
Caching (5-caching folder)
- How to handle cache strategy by adjusting next fetch configuration.
- How to revalidate cache based on paths with revalidatePath or API with revalidateTag.
- How to cache data from direct data sources with cache.
SEO optimizations (6-seo-optimizations folder)
- How to improve image loading times with loader and priority properties.
- How to set page metadata statically and dynamically.
User authentication (7-authentication folder)
- How to make a user creation flow with server-side rendering.
- How to handle a session ID authentication using Lucia
  - THIS PACKAGE IS DEPRECATED
- How to handle signup, login, and logout features using the next strategies.