2 / 2

Next.js 첫 앱 만들기 — ncafe 스캐폴딩

대상 Next.js 를 처음 접하는 프론트엔드 개발자

목표 create-next-app 으로 ncafe/frontend 폴더에 기본 프로젝트를 생성하고, 불필요한 파일을 정리해 랜딩 페이지에 환영 문구 하나만 남긴다

완성물 ncafe/frontend 폴더에 생성된 Next.js 앱. 브라우저에서 http://localhost:3000 을 열면 "안녕하세요~ ncafe 에 오신 것을 환영합니다." 라는 텍스트만 보인다

Node.js (LTS 버전 권장) 와 npm 이 설치되어 있어야 합니다.

STEP 1 / 6프로젝트 폴더 구조 만들기

0개 완료 · 6개 남음

우리는 ncafe 라는 프로젝트 안에 frontend 폴더를 만들 것입니다. 먼저 작업할 상위 폴더를 만들고, 그 안에 frontend 폴더를 생성해 볼게요.

1-1. 작업 폴더 만들기

터미널에서 현재 위치를 확인하고, ncafe 폴더를 만듭니다.

mkdir ncafe
cd ncafe

1-2. frontend 폴더 준비

ncafe 폴더 안에 frontend 폴더를 만들지 않고, 바로 create-next-app 명령을 통해 frontend 이름의 폴더를 생성합니다.

npx create-next-app@latest frontend

Windows PowerShell 에서도 같은 명령이 됩니다.

✅ 확인

터미널에 Creating a new Next.js app in .../ncafe/frontend 라는 메시지가 보입니다.
ncafe/frontend 폴더가 생성되었습니다.

🎓 newlec 쌤의 코멘트

create-next-app 은 Next.js 공식 CLI 도구입니다. @latest 를 붙이면 최신 버전의 Next.js 를 설치합니다. frontend 은 우리가 지정한 프로젝트 폴더 이름입니다. 이 폴더가 나중에 ncafe 프로젝트의 프론트엔드 코드가 들어갈 곳입니다.

❌ 자주 하는 실수

증상	원인	해결
`npx: command not found`	Node.js 미설치 또는 PATH 문제	Node.js 를 설치하고 터미널을 다시 엽니다.
`EEXIST: file already exists`	`frontend` 폴더가 이미 존재함	기존 `frontend` 폴더를 삭제하거나 다른 이름을 지정합니다.

📝 이 단계의 핵심

프로젝트는 ncafe/frontend 경로에 생성됩니다.
npx create-next-app@latest 는 Next.js 프로젝트를 빠르게 생성하는 표준 명령입니다.

이어지는 내용은 회원만 볼 수 있어요

뉴렉처에 로그인하면 전체 학습 자료를 열람할 수 있습니다.

로그인하기