{"id":24373808,"url":"https://github.com/nicolasomar/next-practice","last_synced_at":"2026-04-09T16:03:19.254Z","repository":{"id":272479925,"uuid":"916275139","full_name":"NicolasOmar/next-practice","owner":"NicolasOmar","description":"Repository created to record my practice learning NextJs","archived":false,"fork":false,"pushed_at":"2025-02-05T15:25:13.000Z","size":4064,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-05T16:34:35.311Z","etag":null,"topics":["css-modules","javascript","nextjs","practice-project","react","typescript","udemy"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NicolasOmar.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-01-13T19:32:13.000Z","updated_at":"2025-01-29T14:22:36.000Z","dependencies_parsed_at":"2025-02-05T16:26:41.650Z","dependency_job_id":"c08ae449-bdd3-4858-931b-af1835e28fc0","html_url":"https://github.com/NicolasOmar/next-practice","commit_stats":null,"previous_names":["nicolasomar/next-practice"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NicolasOmar%2Fnext-practice","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NicolasOmar%2Fnext-practice/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NicolasOmar%2Fnext-practice/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NicolasOmar%2Fnext-practice/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NicolasOmar","download_url":"https://codeload.github.com/NicolasOmar/next-practice/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243205234,"owners_count":20253427,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css-modules","javascript","nextjs","practice-project","react","typescript","udemy"],"created_at":"2025-01-19T05:17:12.078Z","updated_at":"2026-04-09T16:03:19.248Z","avatar_url":"https://github.com/NicolasOmar.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \u003cimg src=\"https://cdn.simpleicons.org/nextdotjs\" title=\"NextJS Practice Repo\" alt=\"NextJS Practice Repo\" width=\"30\"\u003e NextJS Practice\nRepository 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/).\n\n## Table of contents\n- [Status](#status)\n- [Requirements](#requirements)\n- [Setup](#setup)\n- [How to run it](#how-to-run-it)\n- [Repo structure \u0026 what i learned in each exercise](#repo-structure--what-i-learned-in-each-exercise)\n- [Other practice repos](#other-practice-repos)\n\n## Status\n- Current repo's version is ![Nextjs practice version](https://img.shields.io/github/package-json/v/nicolasomar/next-practice?color=success\u0026label=%20\u0026style=flat-square)\n- **This course has been completed on 16/09/2025 - [Certificate](https://www.udemy.com/certificate/UC-375acfd7-464d-4024-8714-d3e76ea1b4df/)**\n\n## Requirements\n - [Node](https://nodejs.org/en/download/) `v20` or above\n - For some exercises, you will need a [cloudinary](https://cloudinary.com) account and link its keys to its according env files.\n\n## Setup\nAfter cloning the repo, go to the created folder and install the node packages.\n```sh\ngit clone https://github.com/NicolasOmar/next-practice.git\ncd next-practice\nnpm run setup-all\n```\n`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:\n| App Setup | Command |\n| ------ | ------ |\n| All | `npm run setup-all` |\n| React Basics | `npm run setup-react-basics` |\n| Next Essentials | `npm run setup-next-essentials` |\n| Routing and page rendering | `npm run setup-routing-and-rendering` |\n| Work with APIs | `npm run setup-work-with-apis` |\n| Caching | `npm run setup-caching` |\n| SEO optimizations | `npm run setup-optimizations` |\n| User authentication | `npm run setup-authentication` |\n\n## How to run it\nTo run any specific exercise, execute the following command in the project´s folder:\n```sh\nnpm start\n```\n\n## Repo structure \u0026 what I learned in each exercise\n - React Basics (`1-react-basics` folder)\n   - Create a new project based on `Vite`.\n   - Understanding and usage of `CSS modules`.\n   - Learn about React concepts such as `components`, `props passage`, `input change methods`, `function passing though components`, and `conditional rendering`.\n   - Understanding of its core hooks such as `useState` and `useEffect`.\n   - Understand how to handle REST API calls.\n   - 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.\n- Next Essentials (`2-next-essentials` folder)\n   - Create a new project using [Next provided command](https://nextjs.org/).\n   - Understanding of `file-based routing` and several reserved file names.\n   - Understand the difference between `server-side` and `client-side components` and how to implement them efficiently.\n   - Understand how to make API calls asynchronously on a server-side component.\n   - Basic database script handling using `better-sqlite3`.\n   - Understanding and usage of several reserved components such as `page`, `loading`, `error`, and `not-found`.\n   - Usage of granular loading using `Suspense`.\n   - Understanding and usage of form-related handler methods such as `useFormStatus` and `useActionState`.\n   - Understanding and basic usage of metadata injection in static and dynamic ways.\n- Routing and page rendering (`3-routing-and-rendering` folder)\n   - Understanding and usage of routing features such as:\n      - `parallel routes`\n      - `catch-all routes`\n      - `intercepting routes`\n      - `content routes`\n- Working with APIs (`4-work-with-apis` folder)\n   - How to handle REST queries with async functions at the component level.\n   - How to handle loading states with `loading page` or `Suspense`.\n   - How to handle form data and errors with `server actions`.\n   - How to renew cache on need with `revalidatePath`.\n   - How to handle value optimistically changes with `useOptimistic`.\n- Caching (`5-caching` folder)\n   - How to handle cache strategy by adjusting next fetch configuration.\n   - How to revalidate cache based on paths with `revalidatePath` or API with `revalidateTag`.\n   - How to cache data from direct data sources with `cache`.\n- SEO optimizations (`6-seo-optimizations` folder)\n   - How to improve image loading times with `loader` and `priority` properties.\n   - How to set page metadata statically and dynamically.\n- User authentication (`7-authentication` folder)\n   - How to make a user creation flow with server-side rendering.\n   - How to handle a session ID authentication using [Lucia](https://www.npmjs.com/package/lucia)\n     - THIS PACKAGE IS [DEPRECATED](https://lucia-auth.com/lucia-v3/migrate)\n   - How to handle signup, login, and logout features using the next strategies.\n\n## Other practice repos\n| Node | React | Angular | GraphQL | HTML \u0026 CSS | Styling | Typescript | Python | NestJS |\n| :---: | :---: | :---: | :---: | :---: | :---: | :---: | :---: | :---: |\n| [\u003cimg src=\"https://cdn.simpleicons.org/node.js\" title=\"Node Practice Repo\" alt=\"Node Practice Repo\" width=\"48px\"\u003e](https://github.com/NicolasOmar/node-practice) | [\u003cimg src=\"https://cdn.simpleicons.org/react\" title=\"React Practice Repo\" alt=\"React Practice Repo\" width=\"48px\"\u003e](https://github.com/NicolasOmar/react-practice) | [\u003cimg src=\"https://cdn.simpleicons.org/angular\" title=\"Angular Practice Repo\" alt=\"Angular Practice Repo\" width=\"48px\"\u003e](https://github.com/NicolasOmar/angular-practice) | [\u003cimg src=\"https://cdn.simpleicons.org/graphql\" title=\"GraphQL Practice Repo\" alt=\"GraphQL Practice Repo\" width=\"48px\"\u003e](https://github.com/NicolasOmar/graphql-practice) | [\u003cimg src=\"https://cdn.simpleicons.org/html5\" title=\"HTML and CSS Practice Repo\" alt=\"HTML and CSS Practice Repo\" width=\"48px\"\u003e](https://github.com/NicolasOmar/html-css-practice) | [\u003cimg src=\"https://cdn.simpleicons.org/sass\" title=\"Styling Practice Repo\" alt=\"Styling Practice Repo\" width=\"48px\"\u003e](https://github.com/NicolasOmar/styling-practice) | [\u003cimg src=\"https://cdn.simpleicons.org/typescript\" title=\"Typescript Practice Repo\" alt=\"Typescript Practice Repo\" width=\"48px\"\u003e](https://github.com/NicolasOmar/typescript-practice) | [\u003cimg src=\"https://cdn.simpleicons.org/python\" title=\"Python Practice Repo\" alt=\"Python Practice Repo\" width=\"48px\"\u003e](https://github.com/NicolasOmar/python-practice) | [\u003cimg src=\"https://cdn.simpleicons.org/nestjs\" title=\"NestJS Practice Repo\" alt=\"NestJS Practice Repo\" width=\"48px\"\u003e](https://github.com/NicolasOmar/nest-practice) |","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicolasomar%2Fnext-practice","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnicolasomar%2Fnext-practice","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicolasomar%2Fnext-practice/lists"}