Next.js 13 - 1. 설치와 실행

📋 준비물 소개

Next.js 개발 환경을 세팅하기 위해 필요한 준비물에 대해 알아보겠습니다.

Next.js를 시작하기 전에 준비해야 할 것이 몇 가지 있습니다. 첫째로, 비주얼 스튜디오 코드(Visual Studio Code)라는 코드 에디터가 필요합니다. 이 에디터는 다양한 플러그인을 통해 개발 환경을 맞춤 설정할 수 있으며, 코드 작성 시 편리한 기능을 제공합니다. 만약 이미 익숙한 다른 에디터가 있다면, 그 에디터를 사용하셔도 무방합니다.

둘째로, Node.js가 설치되어 있어야 합니다. Node.js는 JavaScript 런타임으로, Next.js와 같은 서버 사이드 애플리케이션을 실행하는 데 필수적입니다. Node.js를 설치하지 않았다면, 공식 홈페이지에서 LTS(Long Term Support) 버전을 다운로드하여 설치하시면 됩니다.

마지막으로, 프로젝트를 저장할 폴더를 만들어야 합니다. 이 폴더는 여러분의 Next.js 애플리케이션을 관리하는 공간이 될 것입니다. 이제 준비물이 모두 갖춰졌다면, 비주얼 스튜디오 코드를 열고 프로젝트 폴더를 생성해보세요.

⚙️ 비주얼 스튜디오 코드 설정하기

비주얼 스튜디오 코드를 설치하고 설정하는 방법에 대해 알아보겠습니다.

비주얼 스튜디오 코드를 설치한 후, 먼저 새로운 프로젝트를 시작하기 위해 폴더를 열어야 합니다. 탐색기에서 '폴더 열기'를 클릭하고, 생성한 프로젝트 폴더(예: '넥스트 앱')로 이동하여 선택합니다. 이제 비주얼 스튜디오 코드가 해당 폴더를 관리하게 됩니다.

이제 터미널을 열어야 합니다. 터미널은 비주얼 스튜디오 코드 내에서도 사용할 수 있으며, 새로운 터미널을 클릭하여 명령어를 입력할 수 있는 화면으로 이동합니다. 여기에서 우리는 Node.js를 통해 Next.js 개발 환경을 설치할 준비를 할 것입니다.

🛠️ Next.js 개발환경 설치하기

Next.js 개발 환경을 설치하는 과정을 단계별로 안내합니다.

Next.js를 설치하기 위해 터미널에서 npx create-next-app@latest . 명령어를 입력합니다. 여기서 create-next-app은 Next.js 애플리케이션을 생성하는 도구입니다. 명령어에서 @latest는 최신 버전을 사용하겠다는 의미이며, 마지막의 점(.)은 현재 폴더에 설치하겠다는 뜻입니다.

명령어를 입력하면 설치가 시작됩니다. 설치 중에는 몇 가지 질문이 나오게 되며, 예를 들어 TypeScript를 사용할 것인지, ESLint를 사용할 것인지에 대한 물음이 있습니다. 우리 수업은 JavaScript 기준으로 진행될 예정이므로 TypeScript는 'No'를 선택하고, ES Link는 'Yes'를 선택해주시면 됩니다.

가장 중요한 질문 중 하나는 앱 라우터 사용 여부입니다. Next.js 13 버전부터 도입된 앱 라우터는 개발 방식을 크게 바꾸므로, 'Yes'를 선택하시는 것이 좋습니다. 모든 질문에 답변을 마치면 Next.js 개발 환경이 성공적으로 설치됩니다.

🚀 Next.js 실행 및 테스트

Next.js 애플리케이션을 실행하고 테스트하는 방법을 알아보겠습니다.

개발 환경이 설치되었다면, 이제 Next.js 애플리케이션을 실행할 차례입니다. 터미널에서 npm run dev 명령어를 입력하여 개발 서버를 시작합니다. Next.js는 기본적으로 3000번 포트에서 실행되며, 브라우저에서 http://localhost:3000 주소로 접속하면 Next.js의 샘플 애플리케이션을 확인할 수 있습니다.

샘플 애플리케이션이 정상적으로 보인다면, 여러분은 성공적으로 Next.js 개발 환경을 구축한 것입니다. 이제 여러분의 프로젝트를 시작할 준비가 완료되었습니다. 필요한 경우 추가적인 모듈이나 라이브러리를 설치하여 애플리케이션을 확장할 수 있습니다.

✅ 결론 및 다음 단계

Next.js 개발 환경 구축을 마무리하며 다음 단계를 안내합니다.

Next.js 개발 환경을 성공적으로 구축한 후, 여러분은 다양한 웹 애플리케이션을 개발할 수 있는 기초를 마련했습니다. Next.js는 다양한 기능과 강력한 생태계를 제공하므로, 이를 활용하여 보다 복잡한 애플리케이션을 개발해보세요.

이제 여러분은 Next.js의 문서를 참고하여 더 깊이 있는 학습을 진행하거나, 실제 프로젝트를 시작해볼 수 있습니다. 웹 개발의 여정을 즐기시길 바랍니다!

🌐 공식사이트

Next.js 공식 사이트