Next.js 시작하기(Node.js 버전 업그레이드)

Node.js버전 업그레이드는 아래의 블로그를 참고했다.

https://velog.io/@summer_luna_0/nvm설치설정

NVM 설치, NVM 에러(exit status 5:)

 

Next.js에서는 Node.js버전 요구사항으로 18.18.0 이상, 19.8.9이상, 20.x이상의 버전 범위를 명시하고 있다.

현재 내 Node.js버전이 18.17.1이여서 위의 요구 범위보다 낮기 때문에 호환성 문제가 발생한다.

오랜만에 Node.js버전을 업그레이드를 했다.

---

💻Next.js 설치

Nextjs설치 방법

1. npx create-next-app@latest [your app name]

주의: nextjs설치 시 turboWebpack설치 유무가 뜰 때 무조건 No를 선택하자. tailwind적용이 안되서 결국엔 turbo webpack없는 새 프로젝트 만들어서 tailwind 적용한거 확인함...

 

 

💻Nextjs 수동설치

1. 바탕화면 등 원하는 위치에 nextjs를 설치할 폴더를 생성한다.

2. 폴더를 vscode에서 연다.

3. 터미널에서 npm init -y을 한다.

4. pakage.json의 "license": 'MIT'로 수정한다.

5. 터미널에 nextjs를 설치한다.

  -  명령어 : npm install react@latest next@latest react-dom@latest

6. package.json의 script를 "dev": "next dev"으로 수정한다.

7. 폴더 root위치에서 app폴더를 생성하고 하위에 page.tsx나 page.jsx 파일을 생성한다.(대소문자 중요)

8. page.tsx파일에 아래의 코드를 입력한다.

export default function Tomato(){
	return <h1> Hello NextJS!! </h1>
}

 

9. 터미널에서 npm run dev를 한다.

10. 자동으로 layout.tsx가 생성된걸 알 수 있다.

---

Node.js로 버전 업그레이드를 하고나서도 Next.js프로젝트의 npm run dev가 안되면서 오류 메시지가 아래처럼 뜬다면?

npm : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Program Files\nodejs\npm.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://g o.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오. 위치 줄:1 문자:1 + npm run dev + ~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess

위 오류 메시지는 Window PowerShell의 실행 정책(Excution Policy)때문에 발생한다. 기본적으로 PowerShell은 보안상의 이유로 스크립트 실행을 제한하는데, Node.js업그레이드 후 npm 명령어가 npm.ps1스크립트를 호출하면서 차단되는것이다.

해결방법:

1. PowerShell 실행 정책 변경
   1. *경고: 실행 정책을 변경하면 시스템 보안에 영향을 줄 수 있으니, 변경 후에는 반드시 필요한 상황에서만 사용하고 다시 원래 설정으로 복구하는것도 고려해야한다.* 
   2. PowerShell을 관리자 권한으로 실행
   3. 아래 명령어를 입력하여 현재 사용자 범위의 실행 정책을 파악하기
      1. Get-ExecutionPolicy -Scope CurrentUser
   4. 아래 명령어를 입력하여 Y또는 A(전체 허용)을 입력. 현재 사용자 범위의 실행 정책을 RemoteSigned로 변경
      1. Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
   5. 변경 확인. 아래 명령어를 입력하여 실행 정책이 변경 되었는지 확인한다. 결과가 RemoteSigned로 표시되면 제대로 설정된 것이다.
      1. Get-ExecutionPolicy -Scope CurrentUser
   6. 다시 프로젝트로 돌아가서 npm run dev를 실행하여 Next.js프로젝트를 시작한다.
2. 다른 쉘(예: CMD)사용(추천)
   1. PowerShell대신 기본 명령 프롬프트(CMD)를 사용하면 실행 정책 제한 문제가 발생하지 않는다.
   2. 명령 프롬프트를 실행한다.
      1. 시작 메뉴에서 'cmd'를 검색 후 엔터를 누르거나 선택하여 명령 프롬프트를 연다.
      2. 프로젝트 폴더로 이동한다.
         1. cd 경로\to\your-project
      3. 개발 서버를 실행한다.
         1. CMD에서 아래의 명령어를 실행한다.
            1. npm run dev
         2. 이 경우 PowerShell의 실행 정책 제한이 없으므로 오류 없이 실행 되어야 한다.
   3. CMD 또는 Git Bash사용을 VS Code의 터미널에서 하고 싶다면?
      
      1. VS Code의 기본 통합 터미널 셀을 PowerShell 대신 CMD 또는 Git Bash 등으로 변경하자.
      2. 나는 Bash로 선택했다.
      3. 그리고 npm run dev 명령어를 입력했다.
      4. 오류없이 실행된다.

*1번 방법인 PowerShell 실행 정책 변경한 것을 원래 설정으로 복구하는 방법 두 가지*

첫 번째 방법: 기본 실행 정책인 Restricted로 설정

  - Set-ExecutionPolicy Restricted -Scope CurrentUser 입력 후 Y 입력.

  - Get-ExecutionPolicy -Scope CurrentUser 입력하여 변경 결과가 Retricted로 표시된 걸 확인.

두 번째 방법: 사용자 스코프의 실행 정책 제거(Undefined)

  - Set-ExecutionPolicy Undefined -Scope CurrentUser 입력 후 Y 입력.

  - Get-ExecutionPolicy -Scope CurrentUser 입력하여 변경 결과가 Undefined로 표시된 걸 확인.