Next.js 설치와 실행

● node.js 설치가 되어있어야한다.

홈페이지에서 다운로드해주기.

https://nodejs.org/ko

Node.js — 어디서든 JavaScript를 실행하세요

 

 

 

●프로젝트를 저장할 폴더 만들고 vs코드로 열기.

 

vs코드의 탐색기 열어서 폴더열기 클릭.

폴더열기에서 바탕화면 or 데스크탑 으로 경로 이동.

데스크탑에서 새폴더 만들고 이름은 'nextapp' 으로 만들어둔다.

nextapp 들어가서 폴더열기. -> vs코드에서 열린다.

 

 

▼create next app 설치하고 실행되면서,  현재 폴더에 next.js 개발환경을 만들어주는 것.

npx : node로 만들어진 프로그램을 설치없이 바로 실행할 수 있는 프로그램으로 , node.js를 설치해야만 사용할 수 있다.

 

C:\Users\LSK\Desktop\nextapp>npx create-next-app@latest .

The directory nextapp contains files that could conflict:

  package-lock.json

Either try using a new directory name, or remove the files listed above.

C:\Users\LSK\Desktop\nextapp>del package-lock.json       

C:\Users\LSK\Desktop\nextapp>npx create-next-app@latest .

√ 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 your code inside a `src/` directory? ... No / Yes
√ Would you like to use App Router? (recommended) ... No / Yes 
√ Would you like to use Turbopack for `next dev`? ... No / Yes 
√ Would you like to customize the import alias (`@/*` by default)? ... No / Yes
Creating a new Next.js app in C:\Users\LSK\Desktop\nextapp.

Using npm.

Initializing project with template: app-tw


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- @tailwindcss/postcss
- tailwindcss
- eslint
- eslint-config-next
- @eslint/eslintrc


added 311 packages, and audited 312 packages in 2m

130 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Initialized a git repository.

Success! Created nextapp at C:\Users\LSK\Desktop\nextapp

▽ next.js 개발환경 실행하기

 

C:\Users\LSK\Desktop\nextapp>npm run dev

> nextapp@0.1.0 dev
> next dev

   ▲ Next.js 15.2.5
   - Local:        http://localhost:3000
   - Network:      http://169.254.36.250:3000

 ✓ Starting...
ures.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

 ✓ Ready in 2.9s
 ○ Compiling / ...
 ✓ Compiled / in 12s (743 modules)
 GET / 200 in 13103ms
 ○ Compiling /favicon.ico ...
 ✓ Compiled /favicon.ico in 794ms (411 modules)
 GET /favicon.ico 200 in 1593ms

 

 

참고영상 : https://www.youtube.com/watch?v=smAU6-ZdcoQ