Tech stack conversion: proposal

[ShivanshPlays]

Description

Proposal: Transition from EJS to Next.js for Website Templating

Objective

The goal of this proposal is to gradually shift the website's templating language from EJS (Embedded JavaScript Templating) to Next.js, a popular React-based framework that offers server-side rendering, static site generation, and a modern developer experience.

Benefits of Moving to Next.js

1. Improved Performance: Next.js supports server-side rendering and static site generation, resulting in faster page loads.
2. SEO Optimization: Server-side rendering (SSR) in Next.js is beneficial for SEO, allowing content to be indexed effectively.
3. Component Reusability: React's component-based architecture improves code organization, making it easier to maintain and scale the codebase.
4. Enhanced Developer Experience: Next.js has a robust ecosystem with built-in features like API routes, routing, and easy integration with TypeScript.

Migration Plan

This migration will be executed in an incremental, page-by-page approach. This strategy allows us to:

• Minimize Risk: By migrating one page at a time, we can test and validate each new component in Next.js.
• Streamline Code Reviews: The incremental approach allows the development and maintenance teams to review smaller, manageable chunks of code.
• Maintain Consistency: Both EJS and Next.js templates will coexist temporarily, enabling us to keep the website functional throughout the transition.

Proposed Steps for Migration

1. Setup the Next.js Environment

• Initialize a new Next.js project within the current repository or create a parallel project structure.
• Set up the necessary dependencies, such as React, Next.js, and any additional libraries that may be required.

2. Plan and Prioritize Pages

• Identify and prioritize the pages to be migrated based on factors like traffic, complexity, and dependency on shared components.

3. Convert Pages Incrementally

• Select a Page: Begin with a low-complexity page to create a template for the migration process.
• Replicate Layout and Functionality: Recreate the EJS layout, structure, and components in a React-based format within Next.js.
• Test Functionality: Ensure the migrated page mirrors the functionality of the original EJS page.
• Implement SSR or SSG as Needed: Decide if the page benefits from server-side rendering (SSR) or static site generation (SSG).
• Push and Review: Commit the migrated page and conduct a code review. Validate that it integrates smoothly with the current website.

4. Iterate Page-by-Page

• Continue the process, migrating one page at a time while addressing any issues or optimizations discovered in the previous steps.

5. Finalize Migration and Remove EJS

• Once all pages have been migrated and thoroughly tested, remove the EJS templates and related dependencies from the codebase..

Summary

By transitioning to Next.js, the website will benefit from enhanced performance, SEO, and maintainability. The incremental, page-by-page approach ensures that this process is low-risk, manageable, and transparent for both developers and the maintenance team.

In my opinion, we should start with the homepage.

@swarooppatilx

Screenshots

No response

Checklist

• I have checked the existing issues
• I have read the Contributing Guidelines
• I'm a GSSoC'24-Extd contributor
• I'm a Hacktoberfest'24 contributor
• I am willing to work on this issue (optional)