https://github.com/nicolasomar/next-practice
Repository created to record my practice learning NextJs
https://github.com/nicolasomar/next-practice
css-modules javascript nextjs practice-project react typescript udemy
Last synced: 29 days ago
JSON representation
Repository created to record my practice learning NextJs
- Host: GitHub
- URL: https://github.com/nicolasomar/next-practice
- Owner: NicolasOmar
- License: mit
- Created: 2025-01-13T19:32:13.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-05T15:25:13.000Z (12 months ago)
- Last Synced: 2025-02-05T16:34:35.311Z (12 months ago)
- Topics: css-modules, javascript, nextjs, practice-project, react, typescript, udemy
- Language: TypeScript
- Homepage:
- Size: 3.88 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 
NextJs Practice
Repository created to record my practice learning NextJs with exercises based on the [Udemy Course](https://www.udemy.com/course/nextjs-react-the-complete-guide) of [Maximilian Schwarzmüller](https://www.udemy.com/user/maximilian-schwarzmuller/).
## Table of contents
- [Status](#status)
- [Requirements](#requirements)
- [Setup](#setup)
- [How to run it](#how-to-run-it)
- [Repo structure & what i learned in each exercise](#repo-structure--what-i-learned-in-each-exercise)
- [Other practice repos](#other-practice-repos)
## Status
- Current repo's version is 
- **This course has been completed on 16/09/2025 - [Certificate](https://www.udemy.com/certificate/UC-375acfd7-464d-4024-8714-d3e76ea1b4df/)**
## Requirements
- [Node](https://nodejs.org/en/download/) `v20` or above
- For some exercises, you will need a [cloudinary](https://cloudinary.com) 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.
```sh
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:
```sh
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](https://nextjs.org/).
- 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](https://www.npmjs.com/package/lucia)
- THIS PACKAGE IS [DEPRECATED](https://lucia-auth.com/lucia-v3/migrate)
- How to handle signup, login and logout features using next strategies.
## Other practice repos
| Node | Angular | GraphQL | React | HTML & CSS | Styling | Typescript | Python | Docker |
| :---: | :---: | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
| [
](https://github.com/NicolasOmar/node-practice) | [
](https://github.com/NicolasOmar/angular-practice) | [
](https://github.com/NicolasOmar/graphql-practice) | [
](https://github.com/NicolasOmar/react-practice) | [
](https://github.com/NicolasOmar/html-css-practice) | [
](https://github.com/NicolasOmar/styling-practice) | [
](https://github.com/NicolasOmar/typescript-practice) | [
](https://github.com/NicolasOmar/python-practice) | [
](https://github.com/NicolasOmar/docker-practice) |