Next.js 개발환경 (2)

Next.js 개발환경 설정하기

 

1. 필요한 프로그램 설치하기

• Node.js: LTS 버전을 설치하세요. Node.js 18버전 이상에서만 잘 돌아갑니다. 설치 경로는 변경하지 마세요.
• Visual Studio Code: 구글에서 검색하여 설치하세요. 다른 에디터를 사용해도 됩니다만, 터미널을 처음 사용하는 분들은 Visual Studio Code를 설치하는 것이 좋습니다.

 

2. Next.js 프로젝트 생성하기

• 작업용 폴더를 하나 만듭니다.
• 작업 폴더에 Shift + 우클릭하여 '여기서 Powershell 열기'를 선택합니다. 맥북 사용자는 두 손가락으로 클릭하여 '터미널 열기'를 선택합니다.
• 터미널에 npx create-next-app@latest를 입력하고 엔터키를 누릅니다. 이후 나오는 선택지를 원하는 대로 선택합니다. 'App router 선택'이라고 나오면 'Y'를 선택하세요.
• 생성된 프로젝트를 Visual Studio Code로 열어 코드를 작성합니다. Visual Studio Code를 실행한 후, 상단 메뉴에서 'File' - 'Open Folder'를 선택하고, 생성된 프로젝트 폴더를 선택합니다.
• page.js가 메인 페이지입니다. 이 파일에서 코드를 작성합니다.
• 작성한 사이트를 브라우저에서 미리 보고 싶다면, Visual Studio Code 상단 메뉴에서 'Terminal' - 'New Terminal'을 선택합니다. 새로 뜨는 터미널에 npm run dev를 입력하고 엔터키를 누릅니다. 그러면 localhost:3000이라는 URL이 나오는데, 이 URL로 브라우저에서 접속하면 실시간 미리보기를 볼 수 있습니다.

3. 프로젝트 파일 설명

• app 폴더: 사용자가 코드를 작성하는 폴더
• page.js: 메인 페이지
• layout.js: 메인 페이지를 감싸는 용도의 페이지
• public 폴더: 이미지나 static 파일 보관용
• api 폴더: 서버 기능을 만드는 곳
• next.config.js: Next.js 설정 파일
• node_modules 폴더: 설치한 라이브러리 보관용 폴더
• package.json: 설치한 라이브러리 버전 기록용 파일