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 입니다.

'IDE' 카테고리의 다른 글
| VS Code frontend new project (0) | 2026.02.19 |
|---|---|
| 이클립스에서 소스 파일 가져오는 방법 (0) | 2026.02.04 |
| Eclipse - JAVA new project building step (0) | 2025.08.27 |
| STS 앱 실행하고 첫 화면 띄우기 (0) | 2025.08.24 |
| STS에서 스프링부트 로컬 서버 실행하는 방법 (3) | 2025.08.14 |