Q: All of Memberstack's examples, guides and templates are Next.js. Why not CRA, Gatsby or Vite?
The simple answer is, Next.js has an unrivalled developer experience. For that reason, we use it in all of our react-related open-source resources.
We are keeping an eye out for trends in the react ecosystem. Remix and Vite seem promising, so we will likely release some examples with these frameworks in the future, but for the time being, we are focused on supporting Next.js applications.
The good news is, you can still use our react package across all react frameworks. Our Memberstack client API and hooks are not exclusive to Next.js. While our docs and examples are used in a Next.js context, you can still easily adapt the same implementation across frameworks.
Lastly, our official react package has been battle-tested in a Next.js environment every day for over a year, starting from Next version 12 all the way to version 13. While our package is compatible with all react frameworks, we feel super confident in our compatibility with Next.js.
Below offers a more detailed explanation.
The Trouble with CRA
CRA is often thought of as a framework, but it's actually a scaffolding tool. CRA is a decent starting point, but lacks the essential tooling and features needed to build a high-performance, production-ready react application.
Before 2017, building in React was not so easy. CRA helped abstract away complexity by bundling react apps to work in the browser, making it accessible to developers of all skill levels. This abstraction came with sacrifices, particularly with flexibility. Developers literally have to "eject" from CRA if the existing configuration doesn't suit their needs. Ultimately, this became CRA's biggest weakness.
Frameworks like Next.js, Vite and now Remix have all surfaced to address the pain points that CRA created.
Even the makes of tailwindcss explicitly warn against using CRA on their website:
We highly recommend using Vite, Parcel, Next.js, or Remix instead of Create React App. They provide an equivalent or better developer experience but with more flexibility, giving you more control over how Tailwind and PostCSS are configured
While this statement applies specifically to tailwindcss, it holds true for many aspects of the react developer experience.
Why We Love Next.js
One of the key features that Next.js is known for is file-based routing; With CRA and Vite, developers rely on 3rd party routing libraries to manage their pages. Next makes creating routes is as simple as dropping a page in the dedicated "pages" directory.
Next offers serverless API routes out of the box- Memberstack developers love the simplicity and there’s nothing more simple than serverless. Last year, Next 12 also introduced middleware, which meant that developers could not only perform logic on serverless APIs but also at Edge, before page load.
Performance Vercel (the makers of Next.js) are all about performance, and it shows throughout their product ecosystem.
Next.js apps are blazing fast and SEO friendly, offering client-side rendering (CSR), server-side rendering (SSR), and incremental static rendering (ISR) - each with its own benefits. Developers can even build hybrid apps using a combination of CSR, SSR and ISR.
Next has dedicated Link and Image components that have built-in optimization enhancements. In their latest version, Next 13 also introduces support for server components which offers incredible performance upgrades that CRA, Vite and Gatsby don't offer out of the box.
Using Next.js with Vercel is a force multiplier. By leveraging the extremely-well funded and fast-progressing Vercel ecosystem, developers not only get a powerful hosting platform, but also access to services like:
- Edge Functions / Middleware
- Allows for A/B testing & feature flags, geolocation & localisation, personalization, bot protection and authentication instantly before the page even loads.
- 5x faster cold-start-up time and hot module reloads compared to Vite
- a high-performance build system for JS & TS codebases includes an intelligent cache system that can boost build speeds by 85% or more.
- A data fetching library that supports SSR / ISR / SSG, react suspense, optimistic UI updates, smart re-fetch retries, and cache revalidation on page focus, tab change or polling intervals.
- Pairs nicely with Next.js API routes.