🚨 Migrate the complete project to Nextjs or any other SSG framework

[saadpasta]

Summary

Currently, the complete developerFolio is being rendered client side which results in low performance and no SEO.

My plan is to move the complete project to Static Site Generation in a short move the client side to a static site.

I have NextJs in mind with ISR.

We can also move to Gatsby but I am not sure about the support currently I have built two projects next and it's lot more stable.

What's new?

We will be moving to static sites nothing would change in jsx. The API call to GitHub for GitHub issues and other things might change. This would be a pretty big change and I am not sure how we would do it without effecting our current code. We will keep building a new version of it moving one piece one by one and then when it's done we will make it live.

Motivation

First, static sites are much faster and more performant than client-side rendered applications. This is because the content is pre-rendered and served directly from the server, rather than being generated on the client side. This means that the pages will load much faster for users, which is especially important for a project like developerFolio which may be used by developers for their portfolios.

Second, static sites are more secure than client-side rendered applications. Since the content is pre-rendered, there is no risk of user input being injected into the page and potentially causing security vulnerabilities. This is an important consideration for any open-source project that may have a large user base.

Overall, moving developerFolio to a static site using Next.js would likely provide numerous benefits for both users and maintainers of the project

Additional context

I am still on verge of using Nextjs. This could be a discussion I am open to ideas as to which static site generation we should move toward and also discuss how are going to migrate.

[saiteja13427]

I think Nextjs would be the best choice.

As we don't really have a lot of dynamic nature as in API calls and all I think the migration should be easy only if I am not wrong.

[saadpasta]

Yeah but I wanna do the migration step by step like maybe one component at a time. Stuff I am not sure where should we keep the nextjs code until then maybe in folder at root.

[saiteja13427]

Yeah, a separate folder in the root with a separate project setup would be better.

[saadpasta]

Yep, let's do it maybe we can define how we wanna break it maybe by components.

[saadpasta]

The first thing we need to do is maybe create a Nextjs empty project in the root folder with separate build and then one by one move all the components to the there and then completely move the project

[saadpasta]

Created a project for better tracking on this.

https://github.com/users/saadpasta/projects/1/views/1?layout=board

[saadpasta]

https://github.com/saadpasta/developerFolio/issues?q=is%3Aissue+is%3Aopen+label%3A%22Nextjs+Migration%22

All the issue related to the Nextjs Migration

[saadpasta]

If you wanna pick up some tasks please pick up the task from this board and comment on the issue that you would like to work on this.

https://github.com/users/saadpasta/projects/1/views/1?layout=board

A most important issue, for now, is #571 we have to setup this up as soon as possible. If anyone would like to pick this up. Please do that ASAP we need to get this get done before everyone can work on different issue 🙏 I can also help on that issue

[codewithshariq]

Will you consider using typescript for this project?

[ibrahimahmed]

A question do you want to use new project structure of nextjs 13 or the old one

[saadpasta]

@ibrahimahmed Let's use the latest one

[saadpasta]

@codewithshariq I was considering that but I ditch the idea because not a lot of people use Typescript and we don't have much to add overhead for typesafety

[GroovierHen]

what about Astro. If we only need Static Site I think Astro will be better.

[saadpasta]

@GroovierHen Would love to give a shot in my other project react-blog-github. We already have an open issue on it to migrate it to Nextjs or any other site

[roopeshsn]

Hi @saadpasta! Currently, the project uses SCSS. Can we integrate TailwindCSS along with migration to Next.js?

[saadpasta]

@roopeshsn I have seen tailwind used in one or two project but I feel that actually make your code a little messy but would love to give a shot

[humayunj]

Great work on the project ✨. NextJs is incredible framework specially it's incremental site generation. As the project is being migrated I strongly suggest the use of Typescript even in some parts to improve type safety and enhanced suggestions in IDE. But of course it depends on its users if it's meant for learning,JS is good to go.

[kartikcho]

+1 on adding typescript @saadpasta Since a lot of people use this project for learning React, if we want to shift to the latest, we should use best practices as well (even if they'll make things less beginner friendly).

[muneebahmedayub]

@ibrahimahmed @saadpasta the new project structure of nextjs is still experimental and probably would be stable in next14. Should we still use new project structure?

[saadpasta]

I think we can migrate to new if the latest one won't be stable

[rogigs]

@saadpasta How is the migration to NextJs going? I saw the table with the tasks, but most of them have the status "To do". Will the migration take place?

I've created a solution to this problem. I think a section with this could be good for an international portfolio. So I implemented it in my project (https://github.com/rogigs/developerFolio/commits/master/ - it's in the commits from January 9, 2024).

The big problem is that the migration will change the sections that i18n also affects. For this reason, I haven't made the effort to open a pull request yet, but I'd like to contribute to this project, so I'd like to know if the migration will take place so that I can contribute my solution

[souravpurkait360]

@saadpasta do you need any contribution in migration, I can pick a few sections if needed. BDW NextJS is just bringing on and on with new updates. The more delay we do the more changes we might have to make. Maybe for server components.