Converting a WordPress page to NextJS using Generative AI
WordPress is a popular open-source content management system to manage and build dynamic websites. WordPress can be used for personal blogs, portfolios, online stores, News websites etc. It’s become popular after 2010, because of ability to manage multiple sites and easy to use WordPress page building tools and plugins. Although WordPress has significant dominance in the web industry, it’s not suitable for large business and also become significantly slow when a website site gets enriched with many features.
Why NextJS?
NextJS has several advantages over WordPress sites. NextJS supports both server-side and client-side rendering, which gives super performance optimization, client-side rendering can store state efficiently, since NextJS is a single page application, it gives users a mobile applications like experience in browser. Users can wander page to page without reload the site, which considerably improves users experience over traditional WordPress or any other CMS websites. Besides, NextJS application can be easily scaled to handle high traffic and complex user interaction. In addition of that, it also supports modern development features like hot-reload, automatic code splitting, and has rich eco-system of tools and library, that noticeably reduce the development time. Since NextJS does not reply on plugins that of course reduce the security vulnerability. Furthermore, NextJS applications do not need to install any theme like WordPress, that allow developer to make a flexible and customized applications.
Our approach:
In this project we converted Studio-23’s Control-override website to brand New Site.
Step-1: Exploring the Code
The most exciting part of this project was I didn’t get the source code of the project, only thing I got was a link of the website and client requirements. So, I took an unusual approach, I took the entire frontend code from the source tab in the browser. Code was pretty big, over 1500 lines, so I removed the JS scripts from the bottom and kept only the html code.
Step-2: Designing the ChatGPT prompt
ChatGPT version: ChatGPT 4
In the prompt, I told the ChatGPT what role it should play during generating response, and how it should process the HTML code that is provided. In the prompt I told its expected role as Code Converter assistant, and instructions were, first it should process the given HTML code step-by-step. Then, it was asked to separate the sections from the given HTML, and then Generate the components for each section. In addition of that I added a note, where I mentioned that I’m using tailwind css for the styling, the NextJS project is using Typescript. Also, design must be responsive in different devices, such as desktop, table, mobile.
Prompt:
Challenges:
During the response, ChatGPT didn’t provide the entire code at a time, instead it provided one component per response, which is not a big deal. However, it struggled to share state in different child components, so in these cases I as a developer need to fine tunned the code, I got from the ChatGPT. Despite facing several challenges, I managed to build the site with significantly greater efficiency and required considerably less time to complete it.
Time spent:
Conclusion:
We successfully transformed the website into a NextJS application. Performance was significantly enhanced, and it exceeded our expectations in terms of development time and efficiency. It took only 9 hours including the manual efforts that we put to make the site responsive in different breakpoints.
