Next.js new project building

Next.js new project building

---

---

프로젝트 디렉토리를 미리 생성했다면 - 추천

---

설치

---

윈도우

- 작업폴더에 shift + 우클릭

- powershell 열기

---

맥

- 손가락 두개 클릭

- 터미널열기

---

npx create-next-app@14

 

terminal

입력

엔터
설치 중 - App router 선택 - Y

---

---

VS CODE project open

---

File

Open Folder

작업용 디렉토리 오픈

터미널에 프로젝트 네임 체크

안뜨면 다시

---

---

VS CODE server view

---

실시간 미리보기
로컬호스트서버
에디터 상단메뉴

Terminal

New Terminal 

npm run dev

입력후 엔터

localhost:3000 
브라우저 접속

---

브라우저 자동으로 안뜨면?

크롬 브라우저

localhost:3000

입력

---

---

프로젝트 디렉토리 생성 안 한 경우

---

Next.js 프로젝트를 새롭게 생성하는 과정은 다음 단계를 통해 진행할 수 있으며, 각 단계는 간단하게 수행 가능합니다.

---

터미널 또는 명령 프롬프트 실행

먼저, 운영 체제에 맞는 터미널 또는 명령 프롬프트(예: Git Bash, PowerShell 등)를 실행하여 명령어를 입력할 준비를 합니다.

https://lshjju.tistory.com/69

---

프로젝트 생성 명령어 입력

 

명령어로 설치하고자 하는 디렉토리로 이동 합니다.
다음 명령어를 사용하여 Next.js 프로젝트를 생성합니다. @latest는 Next.js의 최신 버전을 사용하도록 지시합니다.

npx create-next-app@latest [프로젝트명]

npx create-next-app@latest:

위 코드는 Next.js 프로젝트 생성을 위한 공식 도구입니다.
[프로젝트명]: 생성하고자 하는 프로젝트의 이름을 지정하십시오 (예: my-nextjs-app).

이 명령어를 실행하면, Next.js 프로젝트 생성에 필요한 파일들이 자동으로 다운로드되고 설정됩니다.

---

프로젝트 설정 옵션 선택

명령어 실행 후, Next.js는 몇 가지 초기 설정에 대해 질문합니다. 

필요에 따라 각 옵션에 대해 'Yes' 또는 'No'를 선택하거나, 엔터 키를 눌러 기본 설정을 유지할 수 있습니다. 

일반적으로 다음과 같은 질문이 나타납니다:

? Would you like to use TypeScript? No / Yes
? Would you like to use ESLint? No / Yes
? Would you like to use Tailwind CSS? No / Yes
? Would you like to use `src/` directory? No / Yes
? Would you like to use App Router (recommended)? No / Yes
? Would you like to customize the default import alias (@/*)? No / Yes

선택 완료 시 필요한 종속성(dependencies) 설치가 자동으로 진행됩니다.

---

생성된 프로젝트 디렉토리로 이동

프로젝트 생성이 완료되면, 다음 명령어를 사용하여 새로 생성된 프로젝트 디렉토리로 이동합니다.

cd [프로젝트명]

 

 

bash

예를 들어, 프로젝트명을 my-nextjs-app으로 지정했다면 cd my-nextjs-app을 입력하시면 됩니다.

---

개발 서버 실행

프로젝트가 준비되면, 다음 명령어를 입력하여 개발 서버를 실행하고 웹 브라우저에서 프로젝트를 확인할 수 있습니다.

npm run dev

bash

이 명령어를 실행하면 Next.js 개발 서버가 시작되며, 일반적으로 웹 브라우저에서 http://localhost:3000 주소로 접속하여 프로젝트의 초기 화면을 확인하실 수 있습니다.

---