Next.js 설치 및 개발환경 셋팅법

---

1. node.js 설치

=> 18v 이상 권유

2. node 버전 확인 명령어

node -v

3. node.js 및 npm 삭제

1) 제어판 > 프로그램 추가/제거 > node.js 삭제

2) 아래 경로에 해당하는 디렉터리 삭제 

 

C:\Program Files\Nodejs

C:\Program Files (x86)\Nodejs
C:\Users\User\AppData\Roaming\npm
C:\Users\User\AppData\Roaming\npm-cache

 

=> 파일이 없다면 건너뛰기

4. node 버전 및 npm 버전 확인

C:\Users\User>node -v 
> 'node.js'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.
 
C:\Users\User>npm -v 
> 'npm'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.

5. node.js 설치

https://nodejs.org/en 

Node.js

필자는 왼쪽의 LTS버전을 다운로드하였다.

6. vs code 에디터 설치

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

7. 작업 폴더를 만들고 싶은 디렉터리로 이동

=> 필자는 C\workspace 폴더를 만들었음

8. 우클릭 후 git Bash 터미널 열기

9. 하단에 명령어 입력

npx create-next-app@latest

10. 프로젝트 이름 뭐로 작명할지 나오는데 원하는 이름으로 작성하고 엔터

11. 그 밖에도 타입스크립트 쓸 건지 등등 나오는데 원하는 대로 설치하고 엔터

12. vs code 에디터 > 파일 > 작업 영역에 폴더 추가 > 작업 폴더 추가

13. 폴더 > app > page.js 또는 page.tsx파일 (메인페이지)

=> 이곳에서 코드 작성하면 됨.

14. 터미널 > 새 터미널 > 명령어 입력

npm run dev

=> 브라우저 실시간 미리 보기 랜더링

---

프로젝트 파일 설명

app 폴더 : 코드 작성 폴더

page.js : 메인페이지

layout.js : 메인페이지 감싸는 용도의 페이지 <header, footer 등>

globals.css : 모든 페이지에 적용할 스타일

xxx.module.css : 특정 페이지에 적용할 스타일

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

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

next.config.js : 설정 파일

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

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

---

page.js 필요한 코드만 남기고 시작!

export default function Home() {
  return <div></div>;
}

---

매우 매우 설레고 긴장되고 두근두근하는 next.js와의 데이트라니 꿈만 같다!!

개발환경 설정은 리액트랑 되게 비슷해서 힘든 부분은 없었던 것 같다.

한 가지 아쉬운 점은 타입스크립트로 개발하고 싶었는데, 강의내용은 js기준으로 다루는 게 아쉽다.

하지만 나? 타입스크립트 완강한 사람이야~ 혼자서 tsx문법으로 강의를 들어볼 생각이다 ~ 후후😆 기대가 되군뇨~