[Next.js] Next.js 시작하기 : 설치 먼저 해볼까?

Next.js는 Vercel에서 개발한 React 기반의 오픈 소스 풀스택 프레임워크이다.

회사에서 곧 들어가는 프로젝트에서는 Next.js를 사용한다고 해서

공부를 시작하게 되면서 까먹지 않기 위해 블로그에 작성해보려고 한다🥹

 

먼저! 팀원들끼리 버전을 맞추기 위해 아래와 같은 버전으로 설치했고

(Next.js를 설치하기 전 Node.js 18 버전 이상이 필요하니 없다면 먼저 Node부터 설치.)

• Node.js v22
• Next.js v14 이상

---

설치방법

1. 프로젝트 생성:

터미널을 열고 아래 명령어를 입력.

npx create-next-app@latest my-next-app

 

 

2. 설정하기:

명령어를 입력하면 몇 가지 질문이 나오는데, No / Yes 중 선택하면 다음 질문이 나오니 읽어보고 선택.

나는 아래와 같이 선택했다.

✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like your code inside a `src/` directory? … Yes
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to use Turbopack for `next dev`? … Yes
✔ Would you like to customize the import alias (`@/*` by default)? › Yes

Would you like to use TypeScript? - TypeScript 사용할래?
Would you like to use ESLint? - ESLint 사용할래?
Would you like to use Tailwind CSS? - Tailwind CSS 사용할래?
Would you like your code inside a `src/` directory? - src/ 디렉터리사용할래?
Would you like to use App Router? (recommended) - App Router 사용할래?
Would you like to use Turbopack for `next dev`? - Turbopack 사용할래?
Would you like to customize the import alias (`@/*` by default)? › - import alias 커스텀 할래?

 

 

3. 개발 서버 실행하기:

그러면 이제 서버를 실행해 보자.

cd my-next-app
npm run dev

 

명령어를 입력하면 http://localhost:3000 port가 뜨는데!

나는 현재 3000 port를 이미 사용 중이라 3001 port가 뜬다😄

 

상관없으니 이제 http://localhost:3000 실행해보자.

command / ctrl + 더블클릭하면 화면이 실행되는데 아래와 같은 화면이 뜬다면 성공이다!

 

 

여기까지가 Next.js 설치 방법이다.

---

 

다음은 폴더 구조와 라우팅에 대해서 정리해야겠다📝