nextjs项目修改启动端口号，以及开发启动后自动打开浏览器

住在河边的程序猿

已于 2023-10-13 09:43:55 修改

阅读量2.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： react 文章标签： nextjs next react 修改端口自动打开

于 2023-10-13 09:43:31 首次发布

本文链接：https://blog.youkuaiyun.com/sinat_36728518/article/details/133803866

react 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了如何在Next.js项目中修改启动端口为3100，并设置开发时自动打开浏览器。方法是通过编辑package.json中的scripts部分，适用于pnpm和npm用户。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

next版本：13.5.4

一、修改端口

在package.json文件当中修改启动命令

"scripts": {
    "dev": "next dev -p 3100",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },

这样以来就会以端口3100进行启动。

二、开发启动自动开发浏览器

还是在package.json文件当中修改启动命令，并添加启动打开的地址

 "scripts": {
    "dev": "pnpm open-browser && next dev -p 3100",
    "open-browser": "start http://localhost:3100",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },

我的管理依赖用的是pnpm，如果你用的是npm，那么将是：

 "scripts": {
    "dev": "npm run open-browser && next dev -p 3100",
    "open-browser": "start http://localhost:3100",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },

以上就是nextjs 项目改端口，以及开发启动自动打开浏览器的配置。好了，开启你的炫酷旅程吧！