Auto open browser when run dev

[ricardocanelas]

Is there a way to open a browser when running next dev?

[jamesmosier]

Unfortunately that is not possible currently. See #12233

We're not planning to add automatically opening the browser at this point (keeping the CLI minimal and features contained).

[methodbox]

For a simple work-around on a *nix system just do this in package.json:

  "scripts": {
      "dev": "npm run open-browser && next dev",
      "open-browser": "open http://localhost:3000",
}

The page will load once the server starts, but it will show "can't be reached" for a moment. It's not perfect but it works fine.

[kakaponick]

for windows

"open-browser": "start http://localhost:3000"

[orassayag]

Saved my day :)

[malkiii]

I personally use this in my project for windows, linux and also WSL

"dev": "URL=http://localhost:3000 && (open $URL || cmd.exe /c start $URL) && next dev"

[hmzaabasi]

Worked like a charm 🎉Thanks

[TheHalcyonSavant]

For incognito lovers without open-browser:

cmd.exe /c start chrome.exe -incognito http://localhost:3000 && next dev

[ViniciusFXavier]

--open flag or -o =D

[OscarJVD]

It doesn't works.

[OscarJVD]

This solution works for me. Hire me now! +57 3133043714

[thucne]

Thank you. It works for me, too.

[dayanrr91]

Great, this still works

[gusperandio]

Thanks bro! It s worked

[rafiqulshopon]

It worked. Thanks

[jaydioar]

why using that open-browser task there, it's not nescesscary just use a "pre"-script. (https://docs.npmjs.com/cli/v10/using-npm/scripts) e.g.:

"predev": "start http://localhost:3010",
"dev": "next dev -p 3010",

[kiranvj]

I use this for windows

"dev": "explorer http://localhost:3000 & next dev",

Please note that there is only one & , this is to execute both commands in parallel

Instead of explorer start will also work "dev": "start http://localhost:3000/?queue=true & next dev", - I prefer this if you have query params in url

From windows command prompt execute npm run dev. It should open default browser.

[xiaogaoxiansheng]

Thanks bro! It s worked

[abhishek5670]

it worked for me

[o-az]

I suggest you leave the existing dev script alone and add your own. Overall more readable and still keeping create-next-app "defaults." Just add these 2 lines:

  "open-browser": "open http://0.0.0.0:3000",
  "dev-open-browser": "next dev -p 3000 & $npm_execpath open-browser"

$npm_execpath allows scripts to work with both npm and yarn (and pnpm too).
$npm_execpath is replaced with npm or yarn depending on what command ran it.

note: for Windows you might need to replace $npm_execpath with %npm_execpath%.

[sohebcakewalk]

@o-az - Worked for me on mac
open will open url in browser but start will not in my mac
thanks once again

[ISMAILBOUADDI]

go to package.json and updated like this :
"scripts": { "dev": "npm run open-browser && next dev", "open-browser": "start http://localhost:3000", }

[TechSculptorx]

yes, it is work for me thanks.

[rgurgul]

For linux
"start": "npm run open && next dev -p 3010",
"open": "xdg-open http://localhost:3010",

[narender56]

try

"dev": "next dev & open http://localhost:3000"

[phyzical]

this will avoid the need for the refresh, just pipes the open over to a background process, also avoid the ghost process stuff that some solutions suggest result in

"dev": "npm run open && next dev",
 "open": "sleep 5 && open http://localhost:3000 &",

[gregbarbosa]

Taking inspo from @jaydioar and @phyzical, I used a prescript.

"predev": "sleep 3 && open http://localhost:3000 &",
"dev": "astro dev",

[simoncdn]

Hello,
Since this feature is still not supported natively by next dev, I created a small plugin that provides a simple alternative for automatically opening the browser when the development server starts. it's for webpack only.

👉 next-plugin-open-browser

If this is something you still need, feel free to try it out or give feedback.
I hope it's helpful. Thanks!