Create a Project with NextJS, ElysiaJS, and Bun

Another Devlog <3

Hey, I decided to make a little guide on setting up a project with Nextjs and ElysiaJS that I know works.

I encountered a few that seemed obsolete, so I went through the process and documented what I did to get something basic started. First, using NextJS, ElysiaJS, with Bun, offers a powerful stack for building fast, flexible, and easy-to-manage web apps.

---

What You'll Need

• Node.js installed on your machine (though Bun will handle most Node.js tasks)

• Bun (a modern JavaScript runtime like Node.js, but faster) installed from

  bun.sh

• Basic familiarity with NextJS and ElysiaJS

---

Let's Set Up the Project

• Initialize a New NextJS Project Start by creating a new NextJS project using Bun:

bun create next-app ./my-next-elysia-project
cd my-next-elysia-project

• This command will scaffold a new NextJS app with the default project structure.

• Install Dependencies Since Bun uses its package manager, you can install dependencies easily with Bun.

bun add elysia @elysiajs/swagger @elysiajs/cors @elysiajs/eden

---

Configuring ElysiaJS

• Create a New API and Routes Directory with a route file.

#CD into the app directory
cd src/app

#create the API directory and cd into it
mkdir api && cd api

#create a routes directory following Nextjs dynamic routes documentation
mkdir [[...routes]] && cd [[...routes]] && cd . > route.ts 
 

---

Integrating ElysiaJS with NextJS

• In the routes folder, you will write the following code.

import { Elysia, t } from "elysia";
import { swagger } from "@elysiajs/swagger";
import { cors, HTTPMethod } from "@elysiajs/cors";

const corsConfig = {
  origin: "*",
  methods: ["GET", "POST", "PATCH", "DELETE", "PUT"] as HTTPMethod[],
  allowedHeaders: "*",
  exposedHeaders: "*",
  maxAge: 5,
};

const swaggerConfig = {
  documenation: {
    info: {
      title: "API Documentation",
      version: "0.0.0",
    },
  },
  path: "/documentation",
};

const app = new Elysia({ prefix: "/api" })
  .use(cors(corsConfig))
  .use(swagger(swaggerConfig))
  .get('/hello', () => 'Hello from Elysia!');

// Expose methods
export const GET = app.handle;
export const POST = app.handle;
export const PATCH = app.handle;
export const DELETE = app.handle;
export const PUT = app.handle;

export type API = typeof app;

---

Using ElysiaJS in the Client

• In the src directory, create a lib folder and file name api.ts

mkdir lib && cd lib && cd . > api.ts

• Open the api.ts file and use the following code

import { treaty } from "@elysiajs/eden";
import { API } from "../api";

export const api = treaty<API>(
  typeof window === "undefined"
    ? `http://localhost:${process.env.PORT ?? 3000}`
    : window.location.origin,
).api;

• The Eden Treaty allows us to connect to the Elysia server with full-type support, auto-completion, error handling, and type-safe unit tests.

• Documentation

---

Test the Integration

• Let's make sure we have everything installed:

bun install

• Start the NextJS development server:

bun --hot dev

• Now, navigate to http://localhost:3000/api/hello in your browser.

You should see the response from your Elysia server displayed, indicating that your NextJS app is successfully sending requests to the Elysia server.

---

Conclusion

Using NextJS for the front end, ElysiaJS for the backend, and Bun for runtime gives you a robust stack for modern web development. You get the performance benefits of Bun, the ease of use of NextJS, and the flexibility of ElysiaJS, enabling you to build full-stack applications quickly.

Now, you’re ready to start building your project and exploring more advanced features of each tool!

The Repo: https://github.com/Moikapy/nextjs-elysiajs-template