젯브레인 웹스톰(jetbrains webstorm) 사용하시는 분들 참고

Question

프로젝트 생성 시 위와 같이 선택 하시면 됩니다. (Create TypeScript project 체크 박스 꼭 선택 하세요.) Create 버튼 클릭 하시면 화면 하단 터미널에 설치 옵션을 물어보는 화면이 보이게 됩니다. 그런데, 강의 와는 다르게 터보팩 사용 여부는 물어보지 않아요. Next.js 13 이상 버전에는 터보팩이 이미 내장되어 있습니다. 이 부분은 무시하고 진행 하시면 됩니다. 설치 완료 후, package.json 파일에 아래와 같이 개발 스크립트 부분을 수정 하세요. --turbo 추가 하시면 됩니다. "scripts": { "dev": "next dev --turbo", "build": "next build", "start": "next start", "lint": "eslint" }, 실행은 상단 우측 보시면 아래와 같은게 보이실 겁니다. client-side 와 server-side 가 있는데 server-side 선택 하셔서 실행 하시면 됩니다. (안보이면 웹스톰 재시작 하세요. 지금 단계 에서 client-side 는 선택 하지 마세요. 이 강의를 계속 들어 보시면 저 두가지가 무슨 의미 인지 알게 됩니다.) 터보팩 적용 하여 올바르게 실행 되면 아래와 같이 보일 겁니다.

수코딩 · Answer

안녕하세요, jyuvenia님! 해당 강의는 VS Code 또는 Cursor 환경을 기준으로 설계되어 있어 JetBrains 환경에서는 제가 미처 확인해보지 못했습니다. 소중한 내용 공유해주셔서 감사합니다. 🙏

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. jyuvenia님. 젯브레인 웹스톰을 활용하여 Next.js 프로젝트를 생성하고 실행하는 방법에 대해 공유해 주셔서 감사합니다. 이 과정은 일반적으로 Next.js와 TypeScript를 사용하는 개발 환경을 구축하는 데 도움이 됩니다. 특히, 최근 Next.js 13 버전 이상에서는 터보팩이 기본으로 내장되어 있으므로 별도의 설정 없이도 성능 향상을 누릴 수 있습니다. 프로젝트 생성 및 설정 요약 프로젝트 생성 시 : 프로젝트 위치와 Node 버전을 설정합니다. create-next-app 명령어를 사용합니다. &ldquo;Create TypeScript project&rdquo; 옵션을 반드시 선택하세요. 스크립트 수정 : 프로젝트 생성 후 package.json 의 scripts 항목에 --turbo 옵션을 추가하여 개발 서버를 실행합니다. 예시: "scripts": { "dev": "next dev --turbo", "build": "next build", "start": "next start", "lint": "eslint" } 프로젝트 실행 : 웹스톰의 우측 상단에서 server-side 옵션을 선택하여 실행합니다. 실행 후, 로컬 개발 서버가 정상적으로 작동하여 http://localhost:3000 또는 네트워크 주소로 접근 가능합니다. 이 과정들이 터보팩을 통해 최적화된 환경을 제공하며, 두 가지(ex. client-side와 server-side) 모드의 차이에 대한 이해는 강의 내용을 통해 더 자세히 알게 될 것입니다. 이 정보를 통해 Next.js 프로젝트를 더욱 효과적으로 관리하는 데 도움이 되기를 바랍니다. 추가적인 질문이나 강의 관련 문의가 있으시면 언제든지 남겨주세요. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.