Cursor + Next.js 개발설정

1. Next.js 프로젝트 생성하기

공식사이트를 보고 생성한다.

test 폴더를 생성하고 source 프로젝트를 생성한다.

$ mkdir test
$ cd test

$ npx create-next-app@latest source --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

 

노드 버전 오류

npx: installed 1 in 0.905s

Unexpected token '??='

 

node를 최신 버전으로 변경하고 재시도 한다.

 

2. 서버 실행

$ cd source
$ cat package.json

$ yarn dev

 

scripts를 확인하고 서버를 실행해 본다.

yarn dev

 

node 버전이 낮으면 아래와 같은 에러가 발생한다.

error @: The engine "node" is incompatible with this module. Expected version ">=18". Got "14.17.4"
error Commands cannot run with an incompatible environment.

버전을 올려주고 다시 실행하면 된다.

 

3. 실행확인

http://localhost:3000/

 

4. Cursor 및 vscode에서 실행하기

4.1. 디버깅 시작

디버깅 시작

 

4.2. 웹앱(Chrome) 선택

바꿀거지만 launch.json 쉽게 생성하려고 하는 방식이다.

웹앱(Chrome)

 

4.3. launch.json 파일 생성 확인

launch.json

 

4.4. launch.json 파일 수정

launch.json

 

node 버전이 낮으면 아래와 같은 에러가 발생한다. (버전 맞으면 에러 안남)

error @: The engine "node" is incompatible with this module. Expected version ">=18". Got "14.17.4"
error Commands cannot run with an incompatible environment.

 

 

 

4.5. node 버전 설정 후 실행

nvm에 설치되어 있는 노드 버전 확인

 

최종 수정

launch.json

 

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: debug server-side",
      "type": "node-terminal",
      "request": "launch",
      "cwd": "${workspaceFolder}/source",
      "command": "nvm use v20.9.0 && yarn dev",
      "resolveSourceMapLocations": ["${workspaceFolder}/**", "!**/node_modules/**"],
      "env": {
        "NODE_VERSION": "20" // 환경 변수를 통해 Node 버전 제어 가능
      }
    }
  ]
}

 

4.6. 최종 확인

실행

 

http://localhost:3000/