Migrating from Vite to Next.js While Retaining Ant Design

As someone who isn't a dedicated frontend developer, navigating the complex ecosystem of web development tools can feel like stumbling across hidden traps. My journey began with the creation of Hotkys using Create React App. However, I soon discovered its obsolescence.

A few months ago, I delved into exploring alternatives and was astounded by the plethora of available tools and frameworks. The official React site mentions several build tools like Next.js, Remix, and Gatsby. The absence of a straightforward "just React" option took me by surprise. My research led me to Vite, a modern counterpart to Create React App.

Transitioning my project to Vite initially seemed like a triumph. But, I soon encountered a significant issue: the site's reliance on JavaScript made it invisible to search engines. This realization prompted me to understand the necessity of Server Side Rendering (SSR) for my application-centric site. Moreover, I wanted a solution that didn't require hosting a service. That's when I discovered frameworks blending static and dynamic pages. I chose Next.js for its popularity and hoped for its long-term support.

Learning Curve

The frontend world, as always, is a complex maze. With Next.js, there are two main approaches: Pages Router and App Router. The latter, being newer, still has its kinks and many advise against using it in production. However, I opted for the App Router, looking towards the future and aiming to avoid another migration soon.

My initial plan was to tackle this migration with the help of ChatGPT. Yet, it soon became clear that a deeper understanding of Next.js was essential. To my surprise, the official tutorial was incredibly insightful, and I grasped the basics in just a few evenings.

Migration

The real challenge emerged when I began migrating my ViteJS project to Next.js. I use Ant Design, which initially seemed incompatible with Next.js's App Router. The official documentation mentions integration with Next.js, but Ant Design's heavy JavaScript usage clashed with Next.js's SSR. To overcome this, each file needed the use client directive.

My first reaction was to switch from Ant Design to Tailwind-based component libraries. However, this proved to be a daunting task, requiring extensive work.

Then, I experimented with configuring static site generation using the use client directive. To my delight, it worked seamlessly! The trick was to separate page content into a client component and integrate it within the server-generated Page component. This approach allowed the Page component to fetch shortcut data and pass it as props to the client component. During static site generation, Next.js utilized this data to build fully functional static pages.

Here's an example of a page component:

import {getAllShortcuts} from "@/lib/shortcuts";
import {ApplicationList} from "@/ui/applications/application-list";

const Page = () => {
    const allAppShortcuts = getAllShortcuts();
    return (
        <div>
            <ApplicationList applications={allAppShortcuts.applications}/>
        </div>
    );
};

export default Page;

This method also enabled me to customize metadata for each page, adding unique titles and descriptions.

export function generateMetadata({params}: Props): Metadata {
    return {
        title: findApplication(params.slug)?.name,
    };
}

With this realization, using Ant Design with Next.js became straightforward.

I then set up Static Site Generation (SSG) and Static Exports, making it feasible to deploy the site on GitHub Pages, just as I had with ViteJS.

Conclusion

In summary, it took roughly three evenings to master the basics of Next.js and migrate Hotkys.

For those interested, you can view the detailed PR.