After our very first introduction with Bun and running a ]React application with it, let's look at how to run a NextJS application with Bun.
At the point of writing, there are still quite a few features on the roadmap, so we are a bit limited in what we can use.
Running Next.js with Bun
To get started, run the following command to generate the project.
bun create next bun-next
Where bun-next is the project folder name, you will be creating with this command.
This will scaffold your basic Next application, and you can go ahead and create components and pages as you normally would.
However, there are some caveats I ran into.
- API routes don't work yet
- I had an issue with fetch in SSR *(this should be upcoming soon)
- And I've read the Tailwind plugin is not fully supported
However, it's an excellent way to try out Bun and see how fast it is.
I added a new page to the project called about.js.
import Head from 'next/head';
import React from 'react';
import styles from '../styles/Home.module.css';
import nextPackage from 'next/package.json';
export default function About({}) {
return (
<div>
<Head>
<title>Next.js</title>
<meta name='description' content='Generated by create next app' />
<link rel='icon' href='/favicon.ico' />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>About</h1>
<p className={styles.description}>
This is a Next.JS project run on Bun
</p>
<a href='/'>Back to the homepage</a>
</main>
</div>
);
}
Now add a link to your index page like this:
<a href='/about'>Read more on the about page</a>
As you can see, I'm using the HTML link instead of the Next one; this seems unsupported in Bun. But I will come back to this.
As for now, we can run Next.js on a Bun runtime.
Thank you for reading, and let's connect!
Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter