Next.js 브라우저 자동 열기(npm run dev/start)

Next.js 프로젝트에서 'npm run dev' 실행 시 브라우저가 자동으로 열리도록 설정하는 방법!


npx create-next-app으로 프로젝트 기본 템플릿을 생성했고, 나는 npm run dev시 자동으로 브라우저가 열리도록 하고자 하였다

😢 자동 열기 실패

아래와 같이 pakage.json 파일의 "dev" 부분 코드를 수정했다.

// package.json
  "scripts": {
    "dev": "next dev && npx open http://localhost:3000",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },

그러나 브라우저가 열리지 않았고 next.config 파일에서 자동 열기 설정을 해도 열리지 않았다.

// next.config.js
const nextConfig = {
  devIndicators: {
    autoOpen: true,
  },
}

module.exports = nextConfig

🤩 자동 열기 성공

// package.json
  "scripts": {
    "dev": "npm run open-browser && next dev",
    "open-browser": "open http://localhost:3000",// mac: open , window: start로 작성
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },

이렇게 open-browser을 따로 만들고 dev에서 실행되도록 하면 npm run dev시 자동으로 열리는 것을 확인할 수 있다.

🧐 Why?

첫번째 방식은 next dev가 실행되기 전에 브라우저를 열려고 시도하고 있는데, 이는 next dev 내부에서 제대로 작동되지 않는 경우가 발생할 수 있다고 한다.
두번째 방식은 브라우저를 여는 명령을 별도로 실행시키므로 next-dev와 open이 독립적으로 실행되어 자동 열기가 가능하다.