Running NextJS with Bun

Running NextJS with Bun

Β·

2 min read

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.

Bun running NextJS application

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

Did you find this article valuable?

Support Chris Bongers by becoming a sponsor. Any amount is appreciated!