개발환경 셋팅
맥이나 윈도우나 똑같습니다.
1. 구글에 Node.js 검색해서 LTS 라고 써 있는 버전을 설치합니다.
- nodejs 18버전 이상에서만 잘 돌아갑니다.
- 설치 경로는 C드라이브로 시작되는거 바꾸지말고 그대로 사용하는 것이 좋습니다.
- 설치 중 chocalatey ~ 는 설치하지 않습니다.
2. visual Studio Code 에디터도 구글에 검색해 설치합니다.
평소에 쓰던 에디터 사용해도 무관합니다.
Next.js 프로젝트 생성
1. 작업용 폴더를 하나 준비합니다.
2. 폴더를 에디터로 열고, 새 터미널을 킨 후, 다음 명령어를 작성하고, 실행합니다.
npx create-next-app@latest- 그대로 입력하고, 엔터누르면 프로젝트 생성 끝입니다.
- 설치하면서 나오는 옵션들은 사용자가 직접 설정하시면 됩니다.(아직 사용할 줄 모르니 왠만하면 no..!)
- App router 가 나오면, Y 를 선택합니다.
3. 에디터에서 프로젝트 오픈해서 코드를 짭니다.
- 프로젝트 설치했으면 프로젝트 이름의 폴더가 하나 생생되는데, 해당 폴더를 에디터로 오픈합니다.
4. page.js = 메인페이지
- 리액트에서 app.js 와 비슷? 한 역할로 여기서 코드를 작성하시면 됩니다.
5. 사이트를 브라우저로 미리보기 띄우고 싶다면, npm run dev
- 새 터미널을 연뒤, 아래 코드를 입력하고 엔터를 누르면, localhost:3000~ url 이 하나 나옵니다.
npm run dev- 브라우저로 접속하면 실시간 으로 업로드 되는 미리보기 페이지를 켤 수 있습니다.
- npm run dev 입력 전에 프로젝트 폴더가 잘 열려있는지 확인합니다.
6. 프로젝트 파일들 설명
- app 폴더 : 개발자가 짤 코드를 작성하는 폴더
- page.js : 메인페이지('/')
- layout.js : 메인페이지 감싸는 용도의 페이지
- public 폴더 : 이미지나 static 파일 보관용
- api 폴더 : 서버기능 만드는 곳
- next.config.js : nextjs 설정 파일
- node_modules 폴더 : 설치한 라이브러리 보관용 폴더
- package.json : 설치한 라이브러리 버전 기록용 폴더
'Next.js > 코딩애플' 카테고리의 다른 글
| 상세페이지 만들기 1 (Dynamic route) (0) | 2023.09.17 |
|---|---|
| 글목록 조회기능 만들기 (DB 데이터 출력) (0) | 2023.09.17 |
| 쇼핑몰 프로젝트 생성 / MongoDB 사용 (0) | 2023.09.17 |
| client/server component, import 문법 (0) | 2023.09.17 |
| 여러 페이지 만들기 (라우팅) (0) | 2023.09.17 |
