In this article I will compare Next.js with Encore. I will show you how they differ and how they compliment each other. If you have a Next.js app and want to expand the backend functionality of that app then this article is for you!
TL;DR: Code example of using Next.js with Encore.ts: https://github.com/encoredev/examples/tree/main/ts/nextjs-starter
Video version of this article, including code examples
Encore.ts vs Next.js
Encore is an Open Source framework that aims to make it easier to build robust and type-safe backends. The framework is available for both TypeScript and Go (I will focus on Encore.ts which is the TypeScript version in this article) and it has a lot of build in tools to make the development experience smoother when building everything small to large scale backends.
Like Next, Encore is completely Open Source. Read the code on GitHub, fork it or contribute to it. When building an application you can host it wherever you want (that takes Docker images, like Digital Ocean) without any hidden costs or looming quotas. And performance wise, Encore is extremely fast compared to other Node.js and Bun frameworks, including Next.js. In this benchmark we measured requests per second on a public API endpoint.
The reason why Encore is so fast is because Encore makes use of Rust under the hood, check out this article if you are interested in learning more about that: Encore.ts — 9x faster than Express.js, 3x faster than ElysiaJS & Hono
Comparison
So, how does Encore.ts and Next.js compare to each other, well I like to describe it like this:
So, we have the traditional separation between backend and frontend. The backend part is bigger just because that is the part we are interested in. Backend here is also a spectrum, going from Feature rich to Lightweight. I know, i know… This is a bit two dimensional (literally) but keep with me.
Next.js
On this scale, I would position Next.js to include all of the frontend aspects and a small part of the backend sclae. The frontend aspects are covered, you are able to do everything from static site rendering to server side components. You can even build a single page application inside Next if you want to. Next is primarily a frontend framework and the backend functionality it offers is there to make the frontend aspects better. Next is amazing and for a lot of use cases it will be everything you need, I have used Next.js for years and continue to be impressed by it.
But… The backend aspects of Next are limited. There are some things that you just can’t do and some things that you probably shouldn't do even if you can. I am thinking of things like:
- You want to have multiple frontends e.g. mobile app & web page but want a single backend.
- You want to offer a public API to your consumers.
- The single-threaded nature of Node.js can become a performance bottleneck (not a Next.js problem specifically but still).
- Next is not great if you need long-running jobs with background processing.
Connected to the last point, APIs created in Next.js are stateless. This is not necessarily a bad thing but it can become a limitation depending on the type of application you are building.
With stateless applications your API handlers are running inside lambda functions that die when the response has been sent, so you are not really able to respond to the user and then continue to process data in the background. With a stateful application you are able to do just that. Again, this does not mean that stateless/serverless is bad but it is a limitation that Next forces you into a certain route.
With stateless applications your API handlers are running inside lambda functions that die when the response has been sent, so you are not really able to respond to the user and then continue to process data in the background. With a stateful application you are able to do just that. Again, this does not mean that stateless/serverless is bad but it is a limitation that Next forces you into a certain route.
Encore.ts
Encore.ts on the other hand is purely a backend framework. It’s built from the ground up to be scaleable, no matter how big you application or team becomes.
- Encore.ts makes it extremely easy to set up infrastructure locally so you will always be able to start the whole application by running
encore runin your terminal, no matter the size of your application. - Divide your application into multiple services which can be scaled separately
- Create event-driven systems where your services community through Pub/Sub in a type-safe way
- Encore.ts has a Rust runtime, so you get the developer experience of writing Typescript but a huge performance boost because of Encore’s multithreaded runtime.
- Have long running tasks or CronJobs running in the background.
- Inspect API calls using tracing (which comes built-in and even works for your local environment).
Using Next.js with Encore.ts
So why not use Next together with Encore? Well, you should! And with Encore you can generate type-safe request clients that can be used by your Next.js app. You can think of it sort of like tRPC client if you are familiar with that.
We love using Next with Encore, encore.dev is an example of that. We use static site generation for generating our documentation to keep it snappy and fast. But we keep the backend layer of the Next.js app really thin and fetch the markdown files from an Encore app when generating the static props. That way we can leave heavier things, like generating documentation search indexes, in the Encore app.
Code example
See a full code example of using Next.js with Encore.ts in our example repo: https://github.com/encoredev/examples/tree/main/ts/nextjs-starter
Install Encore
-
macOS:
brew install encoredev/tap/encore -
Linux:
curl -L https://encore.dev/install.sh | bash -
Windows:
iwr https://encore.dev/install.ps1 | iex
Clone the example app
encore app create --example=ts/nextjs-starter
Generating a request client
Keep the contract between the backend and frontend in sync by regenerating the request client whenever you make a change
to an Encore endpoint.
encore gen client --output=./app/client.ts --env=local
Deployment
Self-hosting
See the self-hosting instructions for how to use encore build docker to create a Docker image and configure it.
Encore Cloud Platform
Deploy your application to a free staging environment in Encore's development cloud using git push encore (this works if you have run encore app create to create your app):
git add -A .
git commit -m 'Commit message'
git push encore
You can also open your app in the Cloud Dashboard to integrate with GitHub, or connect your AWS/GCP account, enabling Encore to automatically handle cloud deployments for you.
Next.js on Vercel
The only thing you need to do is to create a new project on Vercel and point it to your newly created GitHup repo.
Conclusion
That’s it! Thank you for reading.
Give the Encore repo a star on GitHub to follow along with the updates, it will also help us out.
Post your questions below or join the Encore Discord community.
Top comments (0)