Next.js alternative powered by Vite
October 14, 2021
If you're not familiar with Vite, it's an instance of a new class of tools, sometimes called non-bundlers, that leverage modern browsers' native EcmaScript modules support to do away with the bundling during development. This results in instant server start and much faster updates than traditional bundlers like Webpack, Rollup, or Parcel. These new tools (another example is Snowpack) improve developer experience so much that, once you try, you will never want to go back to your old tooling.
Vite (and therefore Rakkas) supports TypeScript, JSX, hot module replacement with React fast refresh, CSS modules, PostCSS, CSS preprocessors (just install
stylus), and handling of static assets out of the box.
Rakkas is a MIT-licensed React framework similar to Next.js, it's not a clone. In fact, if you're familiar with Svelte -a user interface framework (like React or Vue)- many of Rakkas's features are inspired by SvelteKit, Svelte's web application building tool.
Important features of Rakkas are:
- ⚡ Lightning fast development server
- 📁 Intuitive file system-based routing
- 🖥️ Hassle free server-side rendering
- 📄 Static site generation (NEW!)
- ☸️ SPA-style client-side navigation
- ⬇️ Simple but effective data fetching system
- ⚙️ API routes to build and organize your backend
- 📚 Extensive documentation
The file system router maps your source files to web pages. For example, if you want a page
/about, you just default-export a React component from
src/pages/about/page.jsx. Route parameters are also encoded in the file name:
src/pages/users/[userName].page.jsx is rendered for
/users/joe, and so forth. In this case, your component receives a
params prop and the user name is available as
Rakkas supports nested layouts for elements common to more than one page, like headers, footers, navigation bars etc. Each page or layout can fetch its own data using an isomorphic
fetch function. For advanced use cases, you can implement your own data fetching helper functions or classes. The implementation can be different for the server and the client, opening up the possibility of avoiding the network roundtrip and serialization/deserialization while doing SSR.
API routes have a file system router similar to pages:
/src/api/users.endpoint.js implements the endpoint
/api/users. Functions exported from this file handle similarly named HTTP methods (i.e.
POST etc.) by taking a request object and returning a response object. You can also define middlewares for impementing abstractions relating to more than one endpoint.
If you're reading this on a Chromium-based desktop browser, you can try Rakkas online on StackBlitz. For a full-on experience, Rakkas project generator
create-rakkas-app comes with lots of features, all optional: TypeScript, ESLint, StyleLint, Prettier, Cypress, and jest (for unit testing and/or API testing). It supports
pnpm in addition to
npm. To get started, just create a new project directory and run
npx create-rakkas-app@latest, then follow the prompt. The optional demo app demonstrates a toy fullstack todo app that communicates via a simple REST API.
If you want to go further, there are integration examples with other popular tools:
There is also a RealWorld port (Rakkas implementation of the RealWorld specification), a simple but complete fullstack application demonstrating how to approach building a REST API, accessing your database (via Prisma), handling authentication, testing, and more.
Rakkas is still young and is not ready for production yet. But go ahead and give it a try and share your thoughts. Star us on Github and talk about Rakkas if you like what you see. If you have any questions, problems, or suggestions open a Github issue. If you want to contribute, fork and send a pull request. All feedback is welcome, positive or negative.