Dev Lemmy
[Next.js] Next.js 설치와 개발환경 세팅 본문
Next.js 설치와 개발환경 세팅을 해보자.
먼저 구글에 Nodejs 검색 후 설치한다 (LTS라고 써진 버전을 설치하면 됨)
Node.js — Run JavaScript Everywhere
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
예전에 설치했어도 16버전 이하면 잘 안될 수 있기 때문에 18버전 이상으로 설치하자.
그리고 에디터가 하나 필요하니 VSCode 에디터를 설치한다.
https://code.visualstudio.com/
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
그리고 작업폴더를 하나 생성한다.
그리고 이 작업폴더를 에디터로 오픈한다.
이제 Next.js 프로젝트를 생성할 것인데
생성 방법은 터미널을 열고
npx create-next-app@latest
입력해준다
터미널창의 질문은 순서대로 아래와 같다
이렇게 완료되면 NextJS 프로젝트 폴더가 생성되었을 것이다.
이제 생성한 프로젝트 폴더를 오픈해서 코드를 작성하면 된다
여기서 app폴더 안에 page.js가 메인 페이지가 된다.
여기에 코드를 작성하면 됨 (React 문법을 사용해야 한다)
미리보기를 띄우고싶다면 터미널에
npm run dev를 입력하면 됨
http://localhost:3000 을 컨트롤(맥은 커맨드)을 누르고 클릭하면 미리보기 창이 띄워질 것임
우선 코드를 본격적으로 작성하기 전에
파일들이 어떤 파일인지 알아보자.
일단 page.js는 메인페이지이고
layout.js 파일은 page.js를 감싸는 파일이다.
왜냐하면 nextjs는 layout.js안에 page.js를 집어넣어서 페이지를 구성한다.
그렇기 때문에 내가 만약 page.js 밖에 뭔가 적을 내용이 있다면
layout.js에 입력하면 된다.
(ex. <head> 태그, 페이지간에 공유하고 싶은 UI 예를 들면 상단바 등..)
globals.css 파일에 작성한 CSS는 모든 페이지에 적용되는 스타일이다.
그런데 page.module.css 파일은 모든 페이지가 아닌 특정 페이지에만 적용시키고 싶은 CSS를 작성하는 파일이다.
(~~~.module.css 이런식으로 파일명을 작성하고 사용하면 됨)
그리고 app 하위에 api폴더가 있을 수 있는데
api 폴더는 서버 기능을 만드는 곳이다.
(서버 api, 서버 기능이 되는것임)
node_modules 폴더는 프로젝트 구동에 필요한 모든 라이브러리를 보관해주는 곳임 (설치한 라이브러리)
그리고 public 폴더가 있을 수 있는데
여기는 보통 이미지, 폰트 파일 등 소스코드 외의 파일들 보관하는 곳이다.
그리고 중요한 package.json 파일이 있는데
이곳은 프로젝트 구동에 필요한 라이브러리 버전들이 기록되어 있다.
(설치한 라이브러리를 자동으로 기록해주는 파일임)
터미널에서 쓸 수 있는 명령어도 기록되어 있다.
이제 본격적으로 시작하기 전에 page.js 파일 안에 필요없는 모든 것을 지우고 <div> 하나만 남겨놓자.
그리고 glovals.css 파일 안에 있는 내용들도 전부 지우고 시작하겠음.
이제 이렇게 하면 미리보기창은 아무것도 없는 백지상태가 될 것임
이제 NextJS 프로젝트를 본격적으로 시작해보자.
'Next.js' 카테고리의 다른 글
| [Next.js] 라우팅, 페이지 만들기 (0) | 2024.10.18 |
|---|---|
| [Next.js] 여러 페이지 만들기 (Routing) (3) | 2024.10.18 |
| [Next.js] 페이지 레이아웃 만들기(React 기초 문법) (0) | 2024.10.17 |
| [Next.js] 공개 API 호스트, 공개 API URL (0) | 2024.10.16 |
| [Next.js] 환경변수 사용법 (.env) (1) | 2024.10.15 |
