NextJs Practice

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

Table of contents

• 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 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 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 optimistically value 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 dinamically.
• 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 next strategies.

Other practice repos

Node	Angular	GraphQL	React	HTML & CSS	Styling	Typescript	Docker