Nextjs module

react/modules/nextjs-ssr-ssg/README.md

@@ -0,0 +1,41 @@
+# [React](https://github.com/rolling-scopes-school/tasks/tree/master/react) Next.js. SSR and SSG ⚙️
+
+## Module Overview 📚
+
+This module introduces students to Server Side Rendering and Static Site Generation with Next.js framework. It aims to provide an in-depth understanding of server rendering and difference between client and server computations. The module covers a range of topics from understating the principles of server rendering to implementing it with Next.js, and React Server Components.
+
+In addition, this module covers the Remix framework, as an alternative approach of enabling SSG and SSR for React-based applications.
+
+## Learning Objectives 🎯
+
+Students will:
+
+- Understand principles and goals of server rendering.
+- Learn how to migrate from client to server rendering with Next.js.
+- Get familiar with React Server Components.
+
+## Approximate Module Completion Time ⏱️
+
+- **12 hours**
+
+## Theory 📖
+
+Students are encouraged to study the following resources:
+
+1. **Understanding client and server rendering:**
+   - [SSR vs CSR](https://wpwebinfotech.com/blog/server-side-rendering-vs-client-side-rendering/) - 1 hour
+   - [SSR vs SSG](https://www.sanity.io/ssr-vs-ssg-guide) - 30 minutes
+   - [The two reacts](https://overreacted.io/the-two-reacts/) - 30 minutes
+2. **React Server Components:**
+   - [RSC from scratch](https://github.com/reactwg/server-components/discussions/5) - 2 hours
+   - [Sense of RSC](https://www.joshwcomeau.com/react/server-components/) - 2 hours
+3. **Next.js:**
+   - [Migration from Vite to Next.js](https://nextjs.org/docs/app/building-your-application/upgrading/from-vite) - 2 hours
+   - [Next.js quick start](https://nextjs.org/docs/getting-started/installation) - 4 hours
+
+## Additional Resources 📘
+
+Expand your knowledge with these additional materials:
+
+1. [Remix quick start](https://remix.run/docs/en/main/discussion/introduction)
+2. [Future of Remix](https://remix.run/blog/merging-remix-and-react-router)

react/modules/tasks/nextjs-ssr-ssg.md

@@ -0,0 +1,46 @@
+# Next.js. Server Side Rendering
+
+## Technical requirements
+
+1. Create a separate branch for this task from the previous branch task. Branch name: "nextjs-ssr-pages-api".
+2. Next.js Pages Api Integration:
+   - Migrate your application from vite to next.js by using Pages folder API.
+   - React-router should be removed. You must use file-based routing provided by next.js (Pages Api).
+   - You may need to adapt some existing libraries to work with next.js if necessary.
+3. Next.js App Router Api Integration:
+   - Create a separate branch for this point from "nextjs-ssr-pages-api" branch. Branch name: "nextjs-ssr-app-router-api".
+   - You must use file-based routing provided by next.js (App Router)
+   - [Migrate from Pages Api to App Router](https://nextjs.org/docs/pages/building-your-application/upgrading/app-router-migration).
+4. Remix Integration:
+   - Create a separate branch for this point from the previous branch task. Branch name: "remix-ssr".
+   - Add the Remix framework to your vite config
+   - [Update routing](https://remix.run/docs/en/main/file-conventions/routes)
+   - Migrate your application to ssr with Remix
+
+## Application Requirements
+
+1. Application in each branch should function in accordance to the requirements provided in the previous modules, if they do not contradict with the new requirements provided in this module.
+2. All the tests should pass, test coverage should be >= 80%.
+
+## Points
+
+A student can achieve a maximum of 150 points.
+
+### Cross-check (score can be less if some parts of the functionality don't work)
+
+- Next.js Pages API is used in "nextjs-ssr-pages-api" branch. Pages render on the server - **50**
+- Next.js App Router API is used in "nextjs-ssr-app-router-api" branch. Pages render on the server with RSC - **50**
+- Remix is used in "remix-ssr" branch. Pages render on the server - **50**
+
+### Penalties
+
+- Remix implemented without Next.js implementation before: **-150 points**
+- Test coverage less than 80%: **-30 points per each branch**
+- TypeScript isn't used: **-145 points**
+- Usage of _any_: **-20 points per each**
+- Usage of _ts-ignore_: **-20 points per each**
+- Direct DOM manipulations inside the React components: **-50 points per each**
+- Presence of _code-smells_ (God-object, chunks of duplicate code), commented code sections: **-10 points per each**
+- Usage of component libraries, e.g. Material UI, Ant Design: **-100 points**
+- Commits after the deadline: **-40 points**
+- Pull Request doesn't follow guideline (including checkboxes in Score) [PR example](https://docs.rs.school/#/en/pull-request-review-process?id=pull-request-description-must-contain-the-following): **-10 points**