Next.js 설치와 개발환경 셋팅

 

0:00 개발환경 셋팅, nextjs 프로젝트 생성

3:38 폴더/파일 설명시간

 

 

 

 

 

개발환경 셋팅

 

(맥이나 윈도우나 똑같습니다)

 

1. 구글에 Nodejs 검색해서 LTS라고 써있는 버전을 설치합시다. 

- nodejs 18버전 이상에서만 잘돌아감

- 설치 경로는 C드라이브 어쩌구 되어있는거 바꾸지말고 그대로 쓰는게 좋습니다.

- 설치 중 chocolatey 어쩌구는 설치하지 맙시다. 

 

 

2. Visual Studio Code 에디터도 구글에 검색해서 설치합니다.

평소에 쓰던 에디터 쓰셔도 되지만 터미널을 기존에 안다뤄본 분들은 설치합시다.

 

 

 

 

 

 

Next.js 프로젝트 생성은 

 

1. 작업용 폴더를 하나 만들어줍니다.

아무데나 만들면 되는데 요즘은 한글로 폴더 이름을 지으면 실행이 이상하게 안됩니다.

그리고 윈도우 onedrive 이런 곳 안에 만들지 맙시다.

 

 

 

 

2. 작업폴더에 shift + 우클릭해서 여기서 powershell 열기를 누릅니다.

맥북은 손가락 두개 클릭해서 터미널열기 누르면 됩니다. 

 

 

 

 

 

3. 그럼 터미널이라는게 나오는데 

 

npx create-next-app@14

이거 그대로 입력하고 엔터누르면 프로젝트 생성 끝입니다.

이거저거 선택하라고 하면 남자답게 선택합시다. 

App router 선택하라고 나오면 Y로 합시다. 

 

 

 

 

 

4. 에디터에서 프로젝트 오픈해서 코드짭시다   

프로젝트 설치했으면 프로젝트이름의 폴더가 하나 생성되는데 (저는 fresh라는 폴더)

그 폴더를 에디터로 오픈해서 코드짜면 됩니다.  

Visual studio code 에디터 켠 다음에 File - Open Folder 누른다음에 아까 생성된 fresh 폴더 선택하면 됩니다.

 

 

 

 

5. page.js 가 메인페이지임

거기다가 코드짜면 됩니다. 

 

 

 

6. 내 사이트를 브라우저로 미리보기 띄우고 싶으면 

에디터 상단메뉴에서 Terminal - New Terminal 누릅니다. 

그럼 터미널이 뜨는데 거기다가 npm run dev 입력후 엔터치면 localhost:3000 어쩌구 url이 하나 나오는데

브라우저로 거기 접속하면 실시간 미리보기가 뜹니다. 

 

 

 

 

 

- npm run dev 입력 전에 저처럼 프로젝트명이 터미널에 안뜨면 폴더오픈을 제대로 안한것입니다. 폴더 오픈부터 잘하십쇼

- 브라우저 자동으로 안뜨면 localhost:3000 이라고 크롬 브라우저 열고 직접 입력합시다. 

 

 

 

 

 

 

프로젝트 파일들 설명

 

app 폴더 : 님들이 코드짤 폴더 

page.js : 메인페이지 

layout.js : 메인페이지 감싸는 용도의 페이지 

public 폴더 : 이미지나 static 파일 보관용 

api 폴더 : 서버기능 만드는 곳 

 

next.config.js : nextjs 설정 파일 

node_modules 폴더 : 설치한 라이브러리 보관용 폴더 

package.json : 설치한 라이브러리 버전 기록용 파일

 

 

 

 

 

 

 

자주 겪는 에러 모음 

 

 

Q. 저는 프로젝트 설치가 10분 이상 오래걸려요 

스타벅스에서 하지 말고 집에서 합시다.

 

 

 

Q. npm run dev 입력시 반응이 없어요

폴더 이름에서 한글을 제거해봅시다.

 

 

 

Q. "npx command not found 어쩌구" 에러

- 터미널 다시 껐다 켭시다. 

- 대부분 nodejs 설치가 제대로 안되어서 그렇습니다. 20버전 이상으로 재설치 해봅시다. 

- 윈도우는 작업폴더를 VScode 에디터로 오픈한 뒤에 상단 Terminal 메뉴에서 터미널 열어서 npx 어쩌구 입력해봅시다.

- 윈도우는 VSCode에서 Terminal 열면 여러 버튼이 있는데 Command prompt 눌러서 입력해봅시다.

- 윈도우는 작업폴더를 onedrive 안에 만들면 안됩니다.

 

 

 

Q. 맥북인데 프로젝트 생성시 "permission이 없어요 어쩌구" 에러

npx 어쩌구 명령어 왼쪽에 sudo라는 단어 포함해서 sudo npx 어쩌구 입력해보면 됩니다.

비번입력하라고 하면 맥북 비번 입력하면 됩니다. 

 

 

 

Q. 윈도우인데 "허가되지 않은 스크립트 입니다 어쩌구~" 에러

윈도우 하단 검색메뉴에서 Powershell 검색 - 우클릭 - 관리자 권한으로 실행한 뒤

Set-ExecutionPolicy RemoteSigned

입력하고 엔터칩니다.

그 다음에 뭐 선택하라고 하면 y 누르고 엔터치고 powershell 재시작합시다. 

 

 

 

Q. 윈도우인데 아직도 터미널에서 뭐 하는거 안되면 

- 이상한 보안프로그램 끕시다. 

- 아니면 Powershell 오픈할 때 관리자권한으로 오픈해서 입력해봅시다. 

- 시작 - 검색 - 환경 변수 편집 - 환경 변수 - path부분클릭 후 편집 - 새로만들기 - C:\Windows\System32 라고 추가 후 저장해봅시다. 

 

이외에 다양한 에러가 나올 수 있는데 에러메시지 구글에 검색하는게 빠를 수 있습니다.