DEV Community

Cover image for Let's create a next.js app with bun
Ashirbad Panigrahi
Ashirbad Panigrahi

Posted on

Let's create a next.js app with bun

#bunjs #nextjs #react #javascript

Thank you for all the support you shown in react post, let's see how we can create a next.js app with bun

Install bun

First run the following command to check bun is installed or not

bun -v
Enter fullscreen mode Exit fullscreen mode

If you don't have bun installed then run the following command to install bun

curl https://bun.sh/install | bash
Enter fullscreen mode Exit fullscreen mode

Create a next app

Now run the following command to create a next app

bun create next [your-app-name]
Enter fullscreen mode Exit fullscreen mode

It will create a new directory with the name of your app. To start the app run the following command

cd your-app-name
bun dev
Enter fullscreen mode Exit fullscreen mode

Build production bundle for next app

We have to update next.js version before we build our next app

bun a next@latest
Enter fullscreen mode Exit fullscreen mode

Here we update to the latest version of next for avoiding any kind of build issue

Adding scripts to your package.json

We can add the following scripts to our package.json file

{
  "scripts": {
    "start": "next start",
    "build": "next build"
  }
}
Enter fullscreen mode Exit fullscreen mode

And we can run the following command to build the production bundle

bun run build
Enter fullscreen mode Exit fullscreen mode

To run the production build you can fire following command

bun start
Enter fullscreen mode Exit fullscreen mode

Get Full Source Code In GitHub

Top comments (6)

Collapse
 
zeeshansafdar48 profile image
Zeeshan Safdar •

Thanks for sharing man👍

Collapse
 
ashirbadgudu profile image
Ashirbad Panigrahi •

Happy to share it with you

Collapse
 
foxy4096 profile image
Foxy4096 •

Thanks for sharing this!

Collapse
 
ashirbadgudu profile image
Ashirbad Panigrahi •

You are welcome

Collapse
 
arjun_kayalmoni profile image
Full Stack Spiderman •

but looks like the testing with vitest does not work with bun setup..

Collapse
 
hamishjohnson profile image
Hamish •

Next you should do a tutorial on how to read getting started docs

Read next

adeleyeayodeji profile image

How to Stop Spam Comments on WordPress WITHOUT Any Plugin

Adeleye Ayodeji -

joanroucoux profile image

Building a Scalable URL Shortener with Node.js (Part 2/2)

Joan Roucoux -

keploy profile image

How to run cypress run and cypress open at a time

keploy -

nenepo profile image

Optimizing React Re-Renders: Best Practices for Performance

Nenepo -