IDE

Stackbiltz Next.js new project building

lshjju 2025. 9. 21. 15:54

StackBlitz에서 Next.js 프로젝트 생성 단계



StackBlitz 웹사이트 접속: 

먼저 웹 브라우저를 통해 StackBlitz 웹사이트에 접속합니다.



새 프로젝트 생성 시작:

메인 페이지에 접속하시면 "Create New Project" 또는 "Start a new project"와 같은 옵션을 찾으실 수 있습니다.
또는 좌측 상단의 "Start new app" 버튼을 클릭하거나, 이미 계정이 있으시다면 대시보드에서 "+ New Project" 버튼을 클릭합니다.



 

Next.js 템플릿 선택:

다양한 프레임워크 및 기술 스택 템플릿 목록이 나타납니다. 

여기서 "Next.js" 템플릿을 찾아 선택합니다. 

StackBlitz는 공식 Next.js 예제 코드를 TypeScript와 함께 제공하기도 합니다 . 

일반 Next.js 템플릿 또는 "Next.js (Typescript)" 템플릿 중 필요한 것을 선택하십시오.



프로젝트 환경 설정 완료:

템플릿을 선택하면 StackBlitz가 자동으로 필요한 파일 및 의존성을 설치하고, Next.js 개발 환경을 웹 IDE에 로드합니다.
잠시 후, 좌측에 파일 탐색기, 중앙에 코드 에디터, 우측에 라이브 프리뷰 창이 있는 개발 환경이 준비됩니다. 

이제 코드 수정 및 애플리케이션 실행을 바로 시작할 수 있습니다.

메인은 page.tsx 입니다.