Migration to Next.js and Payload CMS – Enhanced Performance and Flexibility

Release Date: January 28, 2025
Version: 2.0.0

We are thrilled to announce that mindvista.ca has been successfully migrated from WordPress to a cutting-edge tech stack featuring Next.js and Payload CMS. This transition significantly enhances our website's performance, responsiveness, SEO, and developer experience. With improved stability, scalability, and maintainability, we can now deliver content more efficiently and introduce new features with greater flexibility.

---

Key Changes

• Front-end Framework: We have adopted Next.js, leveraging its powerful features to enhance website performance and search engine optimization. This shift also improves the developer experience by streamlining the code structure, reducing complexity, and enabling faster iterations and deployments.

• Back-end / Content Management: We have replaced WordPress with Payload CMS, a lightweight and highly customizable content management system. Unlike traditional CMS platforms, Payload allows us to build exactly what we need without excess features, improving efficiency and usability.

Stack

• Front-end: Next.js
• Back-end: Payload CMS
• Hosting: Vercel Serverless
• Database: Serverless PostgreSQL with Neon
• File Hosting: AWS S3

For more detailed information on our tech stack and contribution guidelines, please refer to our CONTRIBUTING.md file.

---

Benefits of the Migration

• Greater Control Over SEO: We take full advantage of Next.js’ hybrid approach, combining server-side rendering (SSR), static site generation (SSG), and incremental static regeneration (ISR) to fine-tune metadata, structured data, and indexing strategies for better search engine visibility.
• Optimized Developer Experience: The transition to Payload CMS and Next.js has resulted in a cleaner, more modular codebase, eliminating unnecessary complexity and making development more efficient.
• Lightweight & Tailored CMS: WordPress comes with numerous built-in features, themes, and plugins, many of which go unused but still consume resources, slowing down performance and increasing complexity. In contrast, Payload CMS is lightweight, minimalistic, and fully customizable, ensuring we only implement the features that are truly beneficial to our needs - reducing overhead and ensuring optimal efficiency.
• Increased Security: Fewer plugins and unused features reduce attack vectors.
• Improved Maintainability & Scalability: The new stack promotes a structured, modern development workflow, making future updates easier to manage while ensuring the system can grow alongside our expanding content and user base.
• Live Dynamic Content Rendering: With Payload CMS, we can render entities dynamically, ensuring users always have access to the most up-to-date information in real time without relying on manual updates or outdated cached content.

Lighthouse Metrics

Our migration has led to a massive performance boost, significantly enhancing loading speeds, responsiveness, and overall user experience. We maintain compliance with WCAG 2.1 AA standards and Canadian accessibility laws, ensuring our platform remains inclusive while delivering top-tier performance. The improved Lighthouse metrics speak for themselves:

• Performance: 68 -> 93
• Accessibility: 93 -> 90
• Best Practices: 79 -> 100
• SEO: 54 -> 92

Additionally, key performance indicators show substantial improvements:

• First Contentful Paint: 2.7s -> 1.3s
• Largest Contentful Paint: 7.9s -> 3.2s
• Speed Index: 4.9s -> 1.6s

Reduced Costs

One of the major benefits of our migration is the significant reduction in costs. By moving away from WordPress, we are no longer tied to WordPress.com and Automattic’s ecosystem, which, while widely used, comes with limitations and increasing costs. We’re relieved to have moved to a system that gives us full control over our infrastructure, eliminating unnecessary constraints and complexities.

Furthermore, we have drastically lowered hosting and operational expenses, cutting our annual costs by 97.36%.

By leveraging serverless deployment on Vercel, cost-efficient serverless PostgreSQL from Neon, and AWS S3’s low-cost, scalable storage, we have significantly reduced overhead while optimizing performance and scalability—all without compromising on reliability.

---

Next Steps

1. Enhancing Support for Internationalization (i18n) and Localization (l10n).

• We are eager to implement French-language support to create a more inclusive experience. McGill is home to a significant number of Francophone students, and ensuring bilingual support is a top priority. By integrating i18n capabilities and support for l10n, we will enable seamless content accessibility in both English and French, ensuring an improved user experience for all visitors. This initiative is a key step toward making our platform more inclusive and accessible, allowing students to fully engage with our content regardless of their primary language.

2. Improving Content Editing for Non-Developers

• We aim to enhance the content editing experience within Payload CMS to better accommodate non-developers, allowing content creators to update website content effortlessly without requiring technical expertise.
• This also includes moving away from hard-coded static content, and integrating static content with Payload CMS. This change will provide a seamless experience across all content types.
• Payload CMS offers a drafting and versioning system, allowing content creators to manage updates smoothly without affecting live content. Draft mode enables previews before publishing, ensuring accuracy, while versioning tracks all changes, making rollbacks simple when needed.

This system will streamline collaboration and content management, allowing our website content creators to focus on what's most important: producing quality content without worrying about the technical complexities.

3. Expanding Web Accessibility

• We are committed to making our platform more accessible to all users, including those who rely on screen readers and other assistive technologies.
• Additional improvements will include alt text for images, high contrast mode for better readability, keyboard navigation enhancements, and semantic HTML improvements to ensure an inclusive experience for all visitors.

---

Acknowledgements

We extend our deepest gratitude to all team members and contributors who played a crucial role in this migration. Your dedication and hard work have been instrumental in making this transition smooth and successful.

Feedback

We value your input! If you encounter any issues or have suggestions, please open an issue or reach out to us directly. Your feedback helps us continue to improve and evolve our platform.